Thread

I have a baffling IE (6, 7, 8) error likely regarding margin/padding, which I can’t seem to resolve through any of the normal hacks. Take a gander:

Example page

And a link to a screen grab in IE8: IE margin bug screen grab

As you can see, the #headerlink (which has a margin: 0 0 0 46px;) gets stripped of its margin and then an extra top margin is mysteriously added to the top. This subsequently pushes down the nav bar as well.

Any ideas out there? This one is throwing me for a loop, and has for a while now! Everything is XHTML 1.0 Transitional and CSS 2.1 valid…

Cheers,
J.T.

#headerlink {
    background:transparent none repeat scroll 0 0;
    border: 0 none;
    padding: 0;
    height: 0;
    margin: 0 0 0 46px;
    [b]display:block;[/b]
    /*float:left;*/
    }

That should be it. Remember that anchors are inline elements.

Unfortunately if I add the display: block code to the CSS for #headerlink, the #headerlink img disappears completely. See screenshot here.

Strange. It worked for me earlier when i did a local test.

Try giving your anchor a height.

TheStig, you helped out enormously by spurring me to see what would happen if I added the display:block and margin code to #headerlink img rather than to #headerlink. It fixed it! Previously the code had been:

#headerlink {
    background:transparent none repeat scroll 0 0;
    border: 0 none;
    padding: 0;
    height: 0;
    margin: 0 0 6px 46px;
    }

But when I changed the code to this, it fixed the problem:

#headerlink {
    background:transparent none repeat scroll 0 0;
    border: 0 none;
    padding: 0;
    height: 0;
    }

#headerlink img {
    display: block;
    margin: 0 0 6px 46px;
    }

Thanks many times over!

Nps. Glad you got it sorted.