Forums

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:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"
\"http://www.w3.org/TR/html4/strict.dtd\">

<head>
	<meta http-equiv=\"Content-Type\" 
content=\"text/html; charset=UTF-8\" />
	<title>** welcome to Dorado Press **</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"css/main_style.css\"/>

</head>

<body>
	<div id = \"page_wrap\">

	<!--TOP THIRD-->
    	<div id = \"top_content\">
			<!--HEADER WITH BLUE BGT, YELLOW BOX AND TRANSPARENT TEXT AND OVERLAY OF FISH LOGO-->			
		  <div id = \"header\">
           <div id = \"fish_logo\"><img src=\"images/dp_fish.png\" alt=\"\"/></div>
          	<!--SPRITE LIST MENU ROLLOVERS/DISJOINTED ROLLOVERS FOR BOTTOM-->			
			<!--<div id=\"menu_container\"> -->
       	  <ul id = \"menu\">
				<li id=\"home\"><a href=\"#\"></a></li>
			    <li id=\"about\"><a href=\"#\"></a></li>
			    <li id=\"quotes\"><a href=\"#\"></a></li>
			    <li id=\"specs\"><a href=\"#\"></a></li>
			    <li id=\"faq\"><a href=\"#\"></a></li>
                <li id=\"contact\"><a href=\"#\"></a></li>
				</ul>
        	<!--</div>-->
               
		  </div>
		
            
		</div>
	
		<div id = \"middle_content\"></div>
			<div id = \"center_area\">
				<div id = \"text_area\"></div>
		</div>
				
		
		<div id = \"bottom_content\">
			<div id = \"image_swap\"></div>
			<div id = \"footer\"></div>
		</div>




</div>




</body>

</html>

MY CSS:

@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!

treehouse : what would you like to learn today?

Forums

UL Horizontal menu wierndness IE6, Safari, IE7