Rickard wrote:... I don't want to remove the margin, i want it to be there in all browsers.
(lol) Sorry, it wasn't clear ;)
I was on the right track though. It's perfect on Windows in Opera 7, IE 6, IE 5.5 SP2, IE 5.01 SP2 and Firefox =)
I used h2 to remove the whitespace in IE then added a margin to the list, removed the useless float code and finally added a height to the list to correct the display in Mozilla. If this were the final code, I would optimize it further: Swap the heading div for a <h1> tag and remove the container div.
Edit: Added float: left back to ul#navlist li a ? It probably shouldn't affect the display too much, but IE 5.01 SP2 refuses to draw a right border without it. IE 5.5 SP2 and IE 6 will draw the right border with or without it, just like Firefox and Opera 7.
Here's the stylesheet:
<style type="text/css"><!--
#container { text-align: left; margin: 0 auto; padding: 0 25px; width: 665px; voice-family: inherit }
html>body #container { width: 665px }
ul#navlist { background-color: #006595; list-style-type: none; margin: 5px 0 20px; padding: 0;
width: 100%; height: 1.2em }
ul#navlist li { display: inline }
ul#navlist li a { color: #ffffff; text-decoration: none; float: left; border-right: 5px solid #ffffff }
ul#navlist li a:hover { background-color: #003e5b }
#header { color: #ff0000; background: #333333; padding: 0 }
#main { background: #6ca9c6; margin: 0; padding: 0 }
h2 { margin: 0 }
--></style>
Here's the body:
<div id="container">
<div id="header">
Test test
</div>
<ul id="navlist">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
<div id="main">
<h2>What the???</h2>
<p>Integer ac felis sit amet ligula ullamcorper cursus. <a
href="#">Aliquam</a> et ligula. Fusce eros purus, aliquam ut, accumsan
nonummy, euismod id, nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>