Menu
Hi,
I’ve just started working on a new website and I’ve ran into some problem with IE6. It adds padding to divs, when it shouldn’t be there and alot more.
I’ve looked at the test in Firefox and IE6. It looks alright in Firefox, but not in IE6. There’s a background-color and a border that dosen’t display in IE6.
Here’s the code, I would be so happy if there’s a solution!
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<html>
<head>
<title>Test</title>
<style type=”text/css”>
<!–
body {
margin:0;
padding:0;
width:100%;
background-color:#cccccc;
}
#top {
position:relative;
height:80px;
width: 100%;
background-color:#bb2200;
}
#menu {
position:absolute;
bottom:0px;
width: 80%;
padding-left:10%;
padding-right:10%;
background-color:#002222;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu ul li {
background-color: #dddddd;
float:left;
display: inline;
}
.menuextra{
float:left;
width: 70px;
height:1em;
}
#main {
position:relative;
left:10%;
width:80%;
height: 400px;
background-color:#cccccc;
}
#content {
margin-left:68px;
}
#submenu {
margin-right:68px;
border:2px;
border-top:0;
border-style:solid;
border-color:black;
background-color:#dddddd;
}
#leftcontent {
padding:0;
margin:0;
float:left;
width:300px;
}
#rightcontent {
float:left;
}
#bottom {
position:relative;
height:80px;
width:100%;
background-color:#bb2200;
}
#footer {
position:absolute;
top:0px;
width:80%;
background-color:#002222;
text-align:center;
color:#cccccc;
padding-left:10%;
padding-right:10%;
}
–>
</style>
</head>
<body>
<div id=”top”>
<div id=”menu”>
<div class=”menuextra”></div>
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div id=”main”>
<div id=”content”>
<div id=”submenu”>
more links
</div>
<div id=”leftcontent”>
A bit of text
</div>
<div id=”rightcontent”>
some more text
</div>
</div>
</div>
<div id=”bottom”>
<div id=”footer”>
updated
</div>
</div>
</body>
</html>