No replies
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2010-02-20
Posts: 1
Points: 2

I have an issue with IE7 that I cannot figure out. If you look at in IE7 the navigation links are not in the correct place in their container div. The five links are floated to the left and incorporate background-position to create the hover states. My issue is the five floated links drop down 10-15px with each link...and by the 4 link you can no longer see the link itself.

I have attached an image that shows the issue. Here is the html and css that go with it...



#header_bar {background-image: url(../images/header_black_bar.png); background-repeat:repeat-x; height: 35px;}
#header_menu_wrapper {width: 900px; height: 35px; background-color: #099; margin: 0 auto;}

#main_nav {width: 900px; height: 35px;}
#main_nav .menu {border-bottom: none; margin:0; padding:0; list-style-type: none;}

#main_nav .menu .item178 a, #main_nav .menu .item179 a, #main_nav .menu .item180 a, #main_nav .menu .item181 a, #main_nav .menu .item182 a {background-image: url(../images/header_menu.png); background-repeat:no-repeat; background-position: 0 0; display: block; height: 35px; float: left; text-indent: -9999px;}

#main_nav .menu .item178 a {width: 231px; background-position: 0 0;}
#main_nav .menu .item178 a:hover {width: 231px; background-position: 0 -35px;}

#main_nav .menu .item179 a {width: 236px; background-position: -231px 0;}
#main_nav .menu .item179 a:hover {width: 236px; background-position: -231px -35px;}

#main_nav .menu .item180 a {width: 82px; background-position: -467px 0;}
#main_nav .menu .item180 a:hover {width: 82px; background-position: -467px -35px;}

#main_nav .menu .item181 a {width: 158px; background-position: -549px 0;}
#main_nav .menu .item181 a:hover {width: 158px; background-position: -549px -35px;}

#main_nav .menu .item182 a {width: 193px; background-position: -707px 0;}
#main_nav .menu .item182 a:hover {width: 193px; background-position: -707px -35px;}

Please help me figure out what the issue is...or give me some ideas of IE7 hacks that would make this work correctly. Thanks so much!