Menu buttons not centering in IE

HTML & CSS
1

The menu buttons center horizontally in Firefox, Opera, and even IE 9(IE 9 ONLY when the html file is viewed locally on my computer). When the html file is uploaded to the ftp and viewed online the buttons are off centered in IE.

Also, the top and bottom 3px margins disappear when the html is viewed non locally (on the internet) in IE 9.

I couldn’t get the buttons to horizontally align with “margin: 0 auto” so I added the 140px from left value in this line:
#mainMenu ul { position: absolute; bottom: 0px; left: 140px; margin: 0 auto; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
 


<head>


<title>Home Page</title>




<meta name="keywords" content="home"/> 
<meta name="description" content="home"/>
<meta http-equiv="content-language" content="en-us"/>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
<meta name="generator" content="Bluefish 2.0.2" />
<meta name="progid" content="frontpage.editor.document"/>
<meta name="microsofttheme" content="expeditn 001, default"/>


<style type="text/css">


 
body { color:white; background: #000 ;
       font-family: Georgia, serif;  margin: 0; padding: 0;  }


     

 	  
 	 
#darkredblock {text-align:center; font-size: 1em;
    font-family: helvetica, sans-serif;  
    background-color: #790000;
    padding: 5px 22px;
    border: 8px solid #000;
    margin: 0 auto;
    width: 884px;
   
 	}	
 	 
 	
 #redblock {text-align:center; font-size: 1em;
    background-color: #ff0000;
    padding: 0px 0px;
    border: 4px solid #000;
    margin: 0 auto;
    }
    
    

#mainMenu {
   position: relative; 
   margin: 3px auto;
   padding: 0;
   width: 843px; height: 259px;
   background-image: url(http://farm7.static.flickr.com/6165/6170053554_b65e1c2abd_b.jpg);
   
   background-repeat: no-repeat;
   border: 5px solid #000000;
   } 
   
  


#mainMenu ul {  position: absolute; bottom: 0px; left: 140px;  margin: 0 auto;   }
     
     
   
  

.menu li { padding: 0; margin: 0 auto; border: 0; list-style: none; 
           float: left; margin-right: 10px; }
           
 .menu li a:link, .menu li a:visited { display:block; height: 40px;  }         

.home    { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
.home a  { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); }
 
.videos   { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
.videos a   {background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); }

 
.commentary   { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
.commentary a   {background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); }
 	
.extra   { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
.extra a  {background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); } 	

.menu li a:hover  {background: none;}
  
 .menu li span  {display: none;}  
    	
 	
      

</style>
</head>


<body>



 
<div id="darkredblock">
<div id="redblock">

 

 <div id="mainMenu">
     
   <ul class="menu">
        <li class="home"><a href="http://www.google.com"><span>home</span></a> </li>
        <li class="videos"><a href="http://www.google.com"><span>videos</span></a> </li>
        <li class="commentary"><a href="http://www.google.com"><span>commentary</span></a> </li>
        <li class="extra"><a href="http://www.google.com"><span>extra</span></a> </li>
   </ul> <!-- end menu UL --> 
  
</div> <!-- end mainMenu -->











 </div><!-- END redblock-->
 </div><!-- END darkredblock-->
 



</body>
</html>
2

Hi,

It 99% likely that you are looking at your online version in compatability view or you have corrupted the doctype in the online version (or you have a free host placing code above the doctype).

The reason for the differnce bewteen compatability view is that you slip into old IE and in old IE uls have a default left margin which you have set to zero but you have not set left padding to zero which is why some browsers show the menu more towards the centre.

If you remove the left padding.


#mainMenu ul {
padding:0;
}

Now all browsers show your menu off centred. Therefore you can just adjust your absolute positioning to make them all look the same (assuming that you weren’t looking for an automatic centering routine as we would need to change the code to use inline-block instead).

The problem with the margin in compatability mode is the old ie haslayout problem and you need haslayout here:


#redblock {
	zoom:1.0;
}

Read the css faq (see my sig) on haslayout if you are not sure why that is needed.

3

Thanks, Paul. What you have suggested works. I added the padding and the zoom, then also increased the “left” in the ‘#mainMenu ul’ from 140px to 180px to compensate for the added code.

I need to review what you wrote in your post more and read the css faq in your sig before commenting further. Thanks.