SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 header image problem / border

    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. #2
    SitePoint Member 3dy's Avatar
    Join Date
    Jan 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only at the top. It also adds to the bottom of the header.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This was a little tricky to pin down.

    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.
    Code:
    #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:

    Code:
    a.named {
        float:left;
        width:0;
        height:0;
        overflow:hidden;
        font-size:0;
    }
    Code:
    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •