On a pretty basic page (starting from a Dreamweaver one column elastic template), I am trying to put a CSS driven menu, based on one of the tutorials on Lynda.com. When I preview in browsers, the menu jumps up when rolled over, which is very distracting. you can take a look at http://www.gallerycommunications.com/fmp/index-fmp.html Will appreciate any insights anyone has to offer.
here the html CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Frontier Markets Partners home page</title>
<link href="css/fmp-oneColElsCtr.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Frontier Markets Partners" />
<meta name="keywords" content="emerging markets, Africa, " />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="header"> <!--header div contains top navigation -->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">OVERVIEW</a></li>
<li><a href="#">OUR TEAM</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CAPABILITIES</a></li>
<li><a href="#">CASE STUDIES</a></li>
<li><a href="#">BLOG</a></li>
<li class="bordernone"><a href="#">CONTACT US</a></li>
</ul>
</div> <!-- end header div -->
<div id="mainContent">
<img src="images/fmp_logo-1052x600.gif" width="1052" height="600" alt="Frontier Markets Partners logo" />
</div> <!-- end #mainContent -->
<div id="footer">
</div> <!-- end footer div-->
<!-- end #container --></div>
</body>
</html>
Here's the CSS I'm trying
@charset "UTF-8";
/* Frontier Markets Partners site main CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #b5a586;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColElsCtr #container {
width: auto;
background: #b5a586;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px ;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 20px;
}
.oneColElsCtr #mainContent {
padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
/*background-color: #b5a586; */
background: url(.../images/fmp_logo-1052x600.gif) no-repeat left top;
}
#header {
left: 0;
top: 0;
height: 40px;
position: relative;
padding: 40px;
background-color: #b5a586;
}
/* main navigation styles */
#header ul{
margin-left: auto;
margin-right: auto;
padding: 0;
position: absolute;
bottom: 0;
width: 860px;
list-style: none;
display: block;
}
#header ul li {
float: left;
}
#header ul a {
padding: 0 1.1em;
font-size: 14px;
line-height: 1.5em;
text-decoration: none;
color: #000;
float: left;
display: block;
}
#header ul a.first{
background: none;
}
#header ul a:hover {
color: #fff;
height: 80px;
}
/* end top navigation menu styles */
