Hi!
I am experimenting with layouts and there's one problem I am stuck with badly.
I want the main parts of the page to be fixed width, eg. 800px, but want a border or background colour around the menu that fills the whole width of the page.
I like having a piece of border to show which page you're on, and also as hover when mousing :) over the menu.
And that works fine with Firefox even if the border that shows where I am is outside the menu containing div.
But it does not work in IE6.
Strange enough, when adding comments to the width determination in the navigation div, the borders show up also in IE6, so I don't know why they don't when setting a fixed width.
(I left the comments in the example below, so you see what I mean, but for the result I want you'd have to uncomment.)
Does anyone have a hint on how to fix it for IE6 (maybe the higher ones are affected too)?
Sorry to bother you with that, but I tried so long to get around the problem hat I can't think anymore.
Cheers,
Dominique
test01.htm
<!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=iso-8859-1" />
<title>test page</title>
<link href="test01.css" rel="stylesheet" type="text/css" />
</head>
<body id="home">
<div id="header">
<h1>home page</h1>
</div> <!-- #header -->
<div id="testbox">
<div id="navigation">
<ul>
<li class="navhome"><a href="#">home</a></li>
<li class="navteam"><a href="#">team</a></li>
<li class="navproducts"><a href="#">products</a></li>
<li class="navservice"><a href="#">service</a></li>
<li class="navcontact"><a href="#">contact</a></li>
</ul>
</div> <!-- #navigation -->
</div>
<div id="content_wrapper">
<div id="maintext">
<h1>main text</h1>
<p>Consectetuer adipiscing elit. Sed gravida iaculis risus. Maecenas lectus eros, eleifend <a href="#">bibendum</a>, lobortis eget, consequat quis, tortor. Quisque lacinia euismod nunc. Suspendisse lobortis, massa a sollicitudin ultricies, eros felis eleifend risus, imperdiet vulputate est ligula at augue. Duis vitae massa. <a href="#" target="_blank" class="ext">Duis vehicula</a> purus id lacus. Morbi nibh. Sed dolor felis, accumsan nec, luctus vitae, adipiscing eu, nibh. <a href="#">Cras mi sem</a>, tempor et, congue eget, tristique a, arcu. Sed mattis dui id mauris. Donec non elit ac metus congue commodo. Aenean nec mi. Sed elit. Vestibulum dui.</p>
</div><!-- #maintext -->
</div><!-- #content_wrapper -->
<div id="footer">footer</div><!-- #footer -->
</body>
</html>test01.css
html {
height: 100.5%;
font-size: 62.5%;
}
body {
text-align: left;
font: 1.2em/1.8em Verdana, sans-serif;
}
* {margin: 0px; padding: 0px; border: 0px;}
h1 {
font-size: 2.2em;
border-bottom: 1px dashed #666;
padding-bottom: 0.3em;
font-weight: normal;
}
div#header {
width: 800px;
margin-left: auto;
margin-right: auto;
height: 50px;
padding-top: 15px;
border: 1px solid;
}
div#header h1 {border: 1px solid; margin-left: 80px;}
div#testbox {
margin: 0px;
padding: 15px;
border-top: 3px solid;
border-bottom: 3px solid;
}
div#navigation {
/* width: 800px;
margin-left: auto;
margin-right: auto; */
border: 1px solid;
}
div#navigation li {
display: inline;
margin-left: 25px;
padding: 0px;
}
div#navigation a {
color: #000;
text-decoration: none;
margin: 0px;
padding: 12px 8px; 12px 8px;
line-height: 2.2em;
}
div#navigation a:hover,
body#home li.navhome a,
body#team li.navteam a,
body#products li.navproducts a,
body#service li.navservice a,
body#contact li.navcontact a {
border-bottom: 4px solid #000;
}
div#content_wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
border: 1px solid;
}
div#maintext {
margin: 0px 80px;
background: #FFF;
border: 1px solid;
}
div#footer {
padding: 2px auto 4px auto;
text-align: center;
background: #EEE;
}