UL Horizontal menu wierndness IE6, Safari, IE7

[benkenobi77]

have a UL horizontal menu with sprites for the images and it works fine in IE8 (all IE testing done using IETester) and Firefox but IE 6 & 7 make the buttons do a weird stair-step up the page starting with the first one being about 10 pixels to high into the header – can’t figure it out but it’s the closest i can get to what i can’t. Also Safari pushes the menu up into the header about 10 pixels (like the IE stuff but the buttons are inline. I’m a newbie so if it’s obvious what i’m doing – be nice, please. any help would be GREATLY GREATLY appreciated.

MY HTML:

Code:

MY CSS:

Code:

@charset “utf-8”;

img, div { behavior: url(iepngfix.htc)}

body {
background-image: url(../images/repeat.gif);
margin: 0;
padding: 0;
background-color: #6C6C6C;}

#page_wrap {
width: 100%;
backkground: black;
margin: 0 auto;}

#top_content {
margin: 0 auto;
height: 300px;
width: 80%;}

#header {
margin: 0 auto;
height: 300px;
width: 950px;
background: url(../images/header2.jpg) no-repeat center top;}

#fish_logo {position: relative; z-index: 3; width: 183px; height: 270px;
margin-left: 15px; margin-top: 8px;}

#menu {
display: inline;
margin: 0 auto;
list-style: none;}

li{
margin-top: -65px;
margin-left: 148px;}

li a{
display: block;
float:left;
width: 123px;
height: 41px;}

li#home a {background: url(../images/home_bg.jpg) 0px 0px no-repeat;}
li#home a:hover {background-position: 0 -41px;}
li#home a:active {background-position: 0 -82px;}

li#about a {background: url(../images/about_bg.jpg) 0px 0px no-repeat;}
li#about a:hover {background-position: 0 -41px;}
li#about a:active {background-position: 0 -82px;}

li#quotes a {background: url(../images/quotes_bg.jpg) 0px 0px no-repeat;}
li#quotes a:hover {background-position: 0 -41px;}
li#quotes a:active {background-position: 0 -82px;}

li#specs a {background: url(../images/specs_bg.jpg) 0px 0px no-repeat;}
li#specs a:hover {background-position: 0 -41px;}
li#specs a:active {background-position: 0 -82px;}

li#faq a {background: url(../images/faq_bg.jpg) 0px 0px no-repeat;}
li#faq a:hover {background-position: 0 -41px;}
li#faq a:active {background-position: 0 -82px;}

li#home a {background: url(../images/home_bg.jpg) 0px 0px no-repeat;}
li#home a:hover {background-position: 0 -41px;}
li#home a:active {background-position: 0 -82px;}

li#contact a {background: url(../images/contact_bg.jpg) 0px 0px no-repeat;}
li#contact a:hover {background-position: 0 -41px;}
li#contact a:active {background-position: 0 -82px;}

#middle_content {}

#center_area {}

#text_area {}

#bottom_content {}

#image_swap {}

#footer {}

here is the problem:

[attachment=0]ie6_ie7_problem.jpg[/attachment]

[koewnet]

Could it be a reversed menu stepdown? Check out Chris’ article about it.

[benkenobi77]

that did it – thank you so much!

[Author]

Posts