For some reason my links will not work... I'm working on a new design for someone.
I've absolutely positioned the menu, can that cause the problem? I originally thought that it might be because the logo is a transparent PNG, however it happens in both FF and IE.
I'd imagine it is an obvious error, but any help is appreciated.
Snapshot attached as it is on my local machine.
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>
<title> new document </title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ieonly.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<ul id="mainlevel-mainmenu">
<li><a href="#">Products</a></li>
<li><a href="#">Easy Pay</a></li>
<li><a href="#">Technology & Environment</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Support</a></li>
</ul>
<div class="moduletable-logo">
</div> <!-- .moduletable-logo -->
</div> <!-- #header -->
<div id="mainbody"></div> <!-- #footer -->
<div id="footer"></div> <!-- #footer -->
</div> <!-- #container -->
</body>
</html>
CSS:
Code:
#header {
position: relative;
width: 100%;
height: 125px;
background: #505050 url(../images/bg-header.gif) repeat-x left top;
}
#header .moduletable-logo {
position: absolute;
width: 100%;
height: 125px;
background: transparent url(../images/logo.png) no-repeat center center;
}
#header ul#mainlevel-mainmenu {
position: absolute;
left: 0;
bottom: 8px;
margin: 0;
padding: 0;
border-top: 1px solid #545454;
list-style: none inside none;
text-transform: uppercase;
}
#header ul#mainlevel-mainmenu li {
display: inline;
margin: 0 10px 0 3px;
padding: 0;
line-height: 1.6em;
font-size: .9em;
line-height: 1.6em;
}
#header ul#mainlevel-mainmenu li a {
width: 100%;
text-decoration: none;
color: white;
background: red;
}
|
