I have a background image in the header. The page navigation is dropping down about 15px in IE7 and I cannot figure out what might be the issue. The navigation looks perfect in all other browsers.

I have tested adding/deleting padding and margins on all header images with no luck.

2 answers

danwellman 5600

You don't, you clear the container ;)

But that doesn't seem to be the problem here. I don't think IE7 understands the :after psuedo selector anyway which is why the clearing mechanism isn't working.

IE7 is a flawed product, trying to understand why it does things usually turns out to be a lesson in futility - it's just not worth the time or effort it takes trying to understand the myriad bugs and issues (and cases where IE just 'does things the M$ way')...

I would add an IE7 specific rule (use a hack if you aren't already using conditional comments for IE7) that adds a negative top margin to the #page-navigation div. -13px positions it correctly :)

Answered over 8 years ago by danwellman

A commonly used solution is to use a couple of extra rules targeted at IE. For example:

.clearfix:after {

visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
  • html .clearfix { zoom: 1; } *:first-child+html .clearfix { zoom: 1; }

You're already using a "clearfix:after" in your code, so you should be familiar. The first line after uses a hack to target IE6, and the second IE7.

The answer box seems to want to muck up the CSS, so here it is in plain text in case it doesn't translate well:

* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }

Answered over 8 years ago by Justin Ryan