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>