IE7: li's behaving badly

Question

JSFiddle: http://jsfiddle.net/F6LBV/1/

IE7 is giving me and my a website a ton of grief. As much as I would like to meet Microsoft down a dark alley and get this sorted once and for all, I'm hoping one of you can help.

IE7 is hurting my li tags in two ways, the first by disrespecting their width:auto; property and instead of expanding to the width of the widest li , each li shrivels down to the size of its own copy plus padding.

As can be seen here:

Next up, IE7 be disrespecting my jQuery. I have a function which animates the ul sliding down when you hover over each parent li . However IE7 for some reason (I believe it has to do with display: none ) underestimates the width of my ul during animation and pops into the correct width once it is finished.

As can be seen here:

So here is the markup for my dropdown:

<div class="container_16">
    <div class="grid_16">
        <div id="breadcrumbs">
            <a href="http://rcnhca.org.uk/sites/first_steps" id="home"></a>
            <ul id="parent" class="grid_15 omega">
            <li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a><ul class="child"><li><a href="http://rcnhca.org.uk/sites/first_steps/getting-started/">Getting started</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/communication/">Communication</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/">Health, Safety and Security</a></li><li class="active" ><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/">Personal and people development </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/quality/">Quality</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/">Equality, diversity and rights </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/">Clinical skills</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/additional-material/">Additional material</a></li></ul></li><li><a href="#">Select a topic</a><ul class="child"><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/performance-appraisal/">Performance appraisal </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/personal-development-planning/">Personal development planning</a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/learning-and-development-opportunities/">Learning and development opportunities </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/lifelong-learning/">Lifelong learning </a></li><li><a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/reflection/">Reflection</a></li></ul></li>                         </ul>

        </div>
    </div>
    <div id="supplements" class="grid_16">
        <div class="left">
            <a href="#" class="button alpha"><img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/book-icon.png" alt="book icon">View competencies checklist</a>
        </div>
        <div class="right">
            <a href="#" class="button alpha bold"><img src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png" alt="rcn icon">Join the RCN</a>

            <a href="#" class="button omega">Reasons to joins</a>
        </div>
    </div>
</div>

and the css to boot:

#breadcrumbs {
    position: relative;
    z-index: 4;
    height: 39px;
    padding-bottom: 3px;
    background: #ffffff;
    border: 0px solid;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs ul {
    list-style: none; 
    list-style-image: none; 
    margin: 0;
}

#breadcrumbs #home{
    display: block;
    position: relative;
    height: 39px;
    width: 54px;
    float: left;
    background-image: url(library/images/home_icon.png);
    background-repeat: no-repeat;
    background-position: 19px center;   
    text-indent: -999em;
}

#breadcrumbs ul#parent {
    display: block;
    height: 39px;
    float: right;
    right: 3px;
    position: relative;
    background: #f38630;
    -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
    -moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
    box-shadow: inset 0px -2px 0px 0px #cf7229;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#breadcrumbs ul#parent li {
    position: relative;
    height: 39px;
    float: left;
    min-width: 1px; /* required to fix Opera bug */
    padding: 0 47px 0 15px;
    background-image: url(library/images/breadcrumb_seperator.png);
    background-repeat: no-repeat;
    background-position: right;
    line-height: 39px;
    zoom: 1;
}

#breadcrumbs ul#parent li a {
    display: block;
    height: 42px;
    position: relative;
    font-size: 15px;
    font-weight:900;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0px 2px 0px #cf7229;
}

#breadcrumbs ul li a:visited {
    color: #ffffff;
}
#breadcrumbs ul#parent li:first-child ul {
    left: -5px;
}
#breadcrumbs ul#parent li ul {
    position: absolute;
    z-index: 9998;
    left: -28px;
    top: 42px;
    background: #ffffff;
    border-left: #3a90a7 2px solid;
    border-right: #3a90a7 2px solid;
    border-bottom: #3a90a7 2px solid;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 0 3px 0 3px;
    list-style-position: outside;
    min-width: 200px;
    width: auto;
    -webkit-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.5);
}

.js #breadcrumbs ul#parent li ul {
    display:none;
}

.no-js #breadcrumbs ul#parent li ul {
    left: -999em;
}

#breadcrumbs ul#parent li ul li {
    float: none;
    display: block;
    position: relative;
    height: 26px;
    margin-bottom: 3px;
    padding: 0 15px;
    background-image: url(library/images/arrow-icon.png);
    background-position: -25px 50%;
    background-repeat: no-repeat;
    background-color: #738793;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    line-height: 26px;
    white-space: nowrap;
    zoom: 1;
    width: auto;
}

#breadcrumbs ul#parent li ul li a{
    display: block;
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
    font-weight: 100;
}

#breadcrumbs ul#parent li ul li.active, #breadcrumbs ul#parent li ul li:hover{
    background-color: #3393b5;
}

#breadcrumbs ul#parent li ul li.active, .no-js #breadcrumbs ul#parent li ul li:hover{
    background-position: 0px 50%;
    text-indent: 10px;
}

.no-js #breadcrumbs ul#parent li:hover ul, .no-js #breadcrumbs ul#parent li:focus ul {
    left: -5px;
}

and the jQuery that animates it:

$(document).ready(function(){

    // Fix background-position < IE8
    if ($('html').hasClass('oldie')) {
        $("ul.child li:not(.active)").each(function() {
            $(this).css('backgroundPosition', '-25px 50%');
        });
        $("#breadcrumbs ul")
    }

    //Animate dropdown menu
    $("#breadcrumbs>ul:not(.child)>li").each(function() {
        crumbWidth = $(this).width();
        if($(this).width() > $(this).children('ul.child').width()) {
            $(this).children('ul.child').width(crumbWidth + 43);
        }
    });
    $("#breadcrumbs>ul:not(.child)>li").hover(
      function () {
        var raquo = "&raquo;";
        $(this).children('ul.child').hoverFlow('mouseenter', {'height': 'show'},250).children('li:not(.active)').hover(
            function() {
                $(this).hoverFlow('mouseenter', {textIndent: 10, backgroundPosition: '-0px 50%'}, 250);
            },
            function () {
                $(this).hoverFlow('mouseleave', {textIndent: 0, backgroundPosition: '-25px 50%'}, 250);
            }
        );
      }, 
      function () {
        $(this).children('ul.child').hoverFlow('mouseleave', {'height': 'hide'}, 250).children('li').unbind();
      }
    );
});

The live site: http://rcnhca.org.uk/sites/first_steps/

Thanks guys.

Answer 1

width:100% on the #breadcrumbs ul#parent li ul seems to fix both problems. http://jsfiddle.net/F6LBV/4

tested in IE7 and Chrome so far.