Hello Everyone,

First time question. /me waves enthusiastically!

I have a site that I'm designing and I can't figure out why the layout is entirely broken in IE 6, 7, and 8. While I would expect 6 to be broken this is not an issue. However, 7 and 8 with their reportedly better standards support, I thought should work.

I suspected inititially that it it had to do with my judicious use of inline-block. However, overriding that style seems to have no effect on the layout in IE. I'm sort of at a loss and could use some extra help.

  • It looks fine to me in IE8. What is the issue? Gary Hepting about 9 years ago

1 answer


It looked fine for me in IE8 as well.

It broke in IE7 for me. Here is what made it look better for me there: Change these two styles:

#mast-header #application-tagline {
margin-left: 215px;
display: inline;

And this one:

#mast-header #application-name {
text-align: right;
margin: 0px 15px -.1em 0px;
width: 197px;
height: 50px;

Essentially, I just added a height to #application-name and a left margin to #application-tagline. Make sure you only do this for IE7 (and maybe IE6, but I didn't test there) because it will break on other browsers. So you'll have to use ie conditional comments. (http://www.quirksmode.org/css/condcom.html)

Answered about 9 years ago by Abinadi Ayerdis