Margin (I think?) showing differently in Chrome and IE

[kevlab]

I’m using Chrome and IE 11. I cut down as much HTML as I could and put it into codepen.

If you open the pen in IE and Chrome you’ll see the “hello world” shows up further down the page in IE. Can anyone tell me why?

Open this link to the CodePen

[Shikkediel]

All browsers render fonts differently… vertical alignment can be evened out by setting a line-height. Not a whole lot to do about how different font-weights look.

[kevlab]

Hey thanks for the reply. I’m not sure that you answered my question though… I’ll try it out when it out tonight.

Not sure what you’re talking about re: font weight… I was just asking why the text “hello world” along with its containers are showing up further down the page in IE

What this means on the real website, is Tha all of my content is within the same containers as the text “hello there
“… So in IE everyrhing after the menu is shifted down the page by about a couple inches.

[Shikkediel]

Firefox and IE don’t look too different to me, just slightly smaller and different font-weight (I meant to that there’s not much you can do about that). Maybe some vertical alignment difference but it doesn’t look like inches to me, line-height may work quite well on it’s own to solve it.

[kevlab]

Hello, so Update. I’m attaching two pictures, one from IE and one from Chrome. I would really appreciate it if someone could replicate the issue on their system and try and pick apart the css to see if they can spot where my problem is. I’m sure it’s simple.. I just can’t figure out where the issue is.

Image of Chrome view (opens in new window)
Image of (broken) IE View

Anyone?

[Shikkediel]

I see you’re using the <main> tag as a parent for the text – this is not supported in IE. Somewhat of a mystery to me for the rest.

[Author]

Posts