CSS Forum

**mattbtay** · 01-19-2010, 05:06 PM

Nav bar is working fine in firefox and IE8, what am i missing in IE6/7 that is causing my nav bar to display like this.

HTML Code:

<div id="nav" >
        <ul id="navbar">
    <li><a class="home" href="/">home</a></li>
    <li><a class="layout" href="layout.php">layout</a></li>
    <li><a class="amenities" href="amenities.php">amenities</a></li>
    <li><a class="photos" href="photos.php">photos</a></li>
    <li><a class="directions" href="directions.php">directions</a></li>
    <li><a class="contact" href="contact.php">contact</a></li>
    <li><a class="attractions" href="attractions.php">attractions</a></li>
</ul>
    </div>

Code:

div#nav{
        height:45px;
        width:940px;
        }
        
        div#nav ul { margin:0;}
        
        div#nav ul li { list-style-type:none;}
        
            div#nav a {
                text-indent:-9999px;
                display:block;
                height:45px;
                float:left;}
                
                    div#nav a.home {
                        background: url(images/nav.jpg) top left;
                        width:136px;
                        
                        }
                    div#nav a.home:hover {background: url(images/nav.jpg) bottom left;}
                    
                    div#nav a.layout {
                        text-indent:-9999px;
                        background: url(images/nav.jpg);
                        background-position:804px top;
                        width:125px;
                        }
                    div#nav a.layout:hover {background: url(images/nav.jpg);
                    background-position:804px bottom;}
                    
                    div#nav a.amenities {
                        text-indent:-9999px;
                        background: url(images/nav.jpg);
                        background-position:679px top;
                        width:138px;
                        }
                    div#nav a.amenities:hover {background: url(images/nav.jpg);
                    background-position:679px bottom;}
                    
                    div#nav a.photos {
                        text-indent:-9999px;
                        background: url(images/nav.jpg);
                        background-position:540px top;
                        width:131px;
                        }
                    div#nav a.photos:hover {background: url(images/nav.jpg);
                    background-position:540px bottom;}
                    
                    div#nav a.directions {
                        text-indent:-9999px;
                        background: url(images/nav.jpg);
                        background-position:412px top;
                        width:132px;
                        }
                    div#nav a.directions:hover {background: url(images/nav.jpg);
                    background-position:412px bottom;}
                    
                    div#nav a.contact {
                        text-indent:-9999px;
                        background: url(images/nav.jpg);
                        background-position:278px top;
                        width:139px;
                        }
                    div#nav a.contact:hover {background: url(images/nav.jpg);
                    background-position:278px bottom;}
                    
                    div#nav a.attractions {
                        text-indent:-9999px;
                        background: url(images/nav.jpg);
                        background-position:139px top;
                        width:139px;
                        }
                    div#nav a.attractions:hover {
                        background: url(images/nav.jpg);
                        background-position:139px bottom;}

**mattbtay** · 01-19-2010, 05:29 PM

JK i fixed it. I had the left float applied to div#nav a rather than to the div#nav li...oops!