Get a free trial // Grow your CSS skills // Land your dream job

ie6 nightmare

  • # April 30, 2009 at 6:30 pm

    hi all

    does anyone know why my site falls apart in ie6 – works fine in everything else

    is driving me crazy

    could this be to do with the double margin bug

    any help would be much appreciated

    site at

    # April 30, 2009 at 6:42 pm

    15 errors:

    # May 1, 2009 at 1:31 am
    "olison" wrote:
    does anyone know why my site falls apart in ie6

    It’s kind of like asking, "why does gravity suck?"

    Reminds me of this pie chart:

    You just have to take it one problem at a time. Once you get those errors sorted out, let us know how it goes. It definitely doesn’t guarantee that it will work the way you want it to, but it’s a great place to start.

    # May 1, 2009 at 2:20 am

    Just cant seem to get the orange tab at the top of the page which is a marker for the current page to sit properly

    ie6 is expanding it to the same width as my main div tag

    in my dreamweaver browser check the only problem i am told about is that there is some problem


    <style type="text/css">

    html validator also confirms this, but I dont think thyis is the route of the problem


    # May 1, 2009 at 2:48 am

    Hi Olison,

    Yes, this is a common problem in IE6 when making Unordered Lists into horizontal Nav bars. The problem stems not giving a width to the List Item; so it extends 100% in IE6. (Even though the "float" should ignore that width 100%…)

    The short cut (manual) fix is to assign a width to each LI.

    But that isn’t the only way.. I don’t know exactly the magic item which fixes it, but I’d guess it has something to do with defining a height for the UL so the LI’s have no where to go.

    Sorry I don’t have time right now to get the full answer. Here’s the code that’s working on my website. I absolute positioned the UL inside my header which has an assigned height.

    /* ~-~-~~-~-~ NAVIGATION BAR ~-~-~-~-~ */

    ul#navbar {
    position: absolute;
    padding:0 2px 0 0;
    background: url(‘../images/layout/nav-divider.jpg’) bottom right no-repeat;

    ul#navbar li {
    background: url(‘../images/layout/nav-divider.jpg’) bottom left no-repeat;

    ul#navbar li a {
    padding:23px 23px;
    font-size: 20px;
    color: #024558;
    background: url(‘../images/layout/nav-hover.jpg’) repeat-x;
    background-position: 0 -80px;

    I hope that helps.
    Ashton Sanders

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed