CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-6
Tim
Tim

Reputation: 2649

Simple navigation bar not working in IE6?

I've made a horizontal navigation bar to go on my website and it's not displaying correctly in IE6.

It's a really simple navigation bar and I'm not aware 100% what works and what doesn't in IE6.

Can anyone see anything wrong with my CSS?

Thanks

HTML:

<div id="controlslider">
    <ul>
        <li><a href="#slider2">Work, Life: Balanced.</a></li>
        <li><a href="#slider3">Mobilise your workforce.</a></li>
        <li><a href="#slider4">Built for business.</a></li>
        <li><a href="#slider5">Work whenever, wherever.</a></li>
        <li><a href="#slider6">Where to buy.</a></li>
    </ul>
</div>

CSS:

#controlslider{
    width: 981px;
    height: 50px;
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu.gif) no-repeat;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    margin-top: -25px;
    list-style: none;
    overflow: hidden;
}
#controlslider ul{
    list-style: none;
    display: block;
    margin-left: -36px;
    margin-top: 0;
    list-style-type: none;
}
#controlslider li{
display: inline-block !important;
padding: 5px 0px 0 0;
width: 190px;
height: 35px;
position: relative;
overflow: hidden;
}
#controlslider li a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color : white;
    text-decoration: none;
    display: block !important;
    width: 190px;
    height: 35px;
    text-align: center;
    padding-top: 10px;
}
#controlslider li a:hover{
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu_button.png);
    width: 190px;
    height: 35px;
}

Upvotes: 0

Views: 481

Answers (2)

Joonas
Joonas

Reputation: 7303

Im puzzled by your two negative margins.

At least the first one seems to have some logic as you seem to be using it for moving the menu up, but you should never fix problems with negative margins.

The second negative margin just makes no sense to me as it screw up the menu.

Things are not showing properly at least because of those two negative margins that you have. ( not saying its the problem in your question necessarily, but it sure is a problem. )

You should get rid of these.

#controlslider{
        margin-top: -25px;
}
#controlslider ul{
        margin-left: -36px;
}

Edit: I would like to note that im all in for using negative margins. The thing just is that if code can be fixed by refining your code it is not very productive to fix it with negative margins. Which may even result some problems.

Upvotes: 0

DanielB
DanielB

Reputation: 20230

Try block and float instead of inline-block.

#controlslider li{
   display: block !important;
   float: left;
   padding: 5px 0px 0 0;
   width: 190px;
   height: 35px;
   position: relative;
   overflow: hidden;
}

Be sure to clear floating after the UL.

Upvotes: 2

Related Questions