IE8 header image problem / border

HTML & CSS
1

Hi,

i really cant figure out where it comes from. In Safari, Opera, Chrome, FX, IE7 everything is ok, but IE8 allways has a border on top and bottom on my header image.

Check it out here:
http://www.fitness-rodgau.de/juegesheim/

2

Not only at the top. It also adds to the bottom of the header.

3

Hi,

This was a little tricky to pin down.:slight_smile:

IE8 doesn’t like the floated page_flip image and removing it seems to cure the gap at the top. Obviously you can’t remove it but if you add overflow:hidden to .page then that should stop the float having an effect.

The anchor and image in the header should also be set to display:block to cure any baseline issues with inline elements.

e.g.


#header img, #header a {
    display:block
}
.page {
    padding:0px;
    overflow:hidden
}

Of course that assumes that you can live with overflow:hidden on the page.

The bottom gap is a little more awkward and is caused by the named anchors in your skip links. These named anchors are causing a gap in IE8.

I would suggest that instead of using named anchors you link directly to an id on an existing element in the same place. You can jump to any element that has an ID just like a named anchor.

Otherwise if you want to keep your named anchors you could try this but just watch out that if doesn’t cause any issues (it should be ok as far as I can see).

Add a class to the named anchor and try this:


a.named {
    float:left;
    width:0;
    height:0;
    overflow:hidden;
    font-size:0;
}



<a class="named" id="navigation" name="navigation"></a>
  <div id="horiz-menu">

You should also be aware that IE has problems when inline elements are adjacent to block level elements like that and suffers from whitespace bugs.

Where elements need to join exactly then try to keep inline elements inside block level elements so that they don’t but up against a block level element as in the above code.

It’s extra mark up but more semantically correct and helps to avoid whitespace issues.

Hope that helps :slight_smile: