Welcome to WebmasterWorld Guest from 54.80.115.140
Forum Moderators: not2easy
CSS:
body
{
margin:0;
padding:0;
}
#header
{
margin:0;
padding:0px;
padding-top:5px;
width:700px;
}
#homecontent
{
margin:0;
padding:0;
width:780px;
font:Arial, Helvetica, sans-serif;
}
#firstcolumn
{
padding:0;
margin:0;
float:left;
width:400px;
}
#secondcolumn
{
margin:0;
padding:0;
padding-top:10px;
float:left;
width:360px;
}
ul.poopbar
{
margin:0;
padding:10px;
width:265px;
display:block;
list-style:none;
list-style-type:none;
}
ul.poopbar li.first
{
margin:0;
padding:0;
padding-top:10px;
float:left;
clear:both;
display:block;
list-style:none;
list-style-type:none;
width:60px;
}
ul.poopbar li.second
{
margin:0;
padding-left:0px;
padding-top:15px;
border:0;
display:block;
float:right;
list-style:none;
list-style-type:none;
width:200px;
}
a.navbar, a.navbar:visited
{
color:#96580a;
text-decoration:none;
}
a.navbar:hover
{
color:#96580a;
text-decoration:underline;
}
Markup:
<!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>Willis and Wiley</title>
<link rel="stylesheet" type="text/css" href="css/williswileystyles.css" />
</head>
<body>
<div id="header">
<img src="images/williswileylogo2.gif" width="501" height="110" alt="Willis and Wiley Logo"><hr /></div>
<div id="homecontent">
<div id="firstcolumn">
<ul class="poopbar">
<li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">About Willis and Wiley</a></li></ul>
<ul class="poopbar"><li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">Willis's Journal</a></li></ul>
<ul class="poopbar"><li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">Wiley's Journal</a></li></ul>
<ul class="poopbar"><li class="first"><img src="images/poop2.gif" width="46" height="29" /></li>
<li class="second"><a href="" class="navbar">The Humans</a></li></ul>
</div>
<div id="secondcolumn">main content will go here
</div>
</div>
</body>
</html>
The whole deal with lists is that we are supposed to let the browser use their own discretion when rendering them.
And, yes, IE takes whitespace and line breaks way too seriously It's driven me absolutely batty in the past.
Actually IE6 doesn't see the list-item closing tags at all. It sees a lot of whitespace and renders that - until, on the next line a new list item starts.
ul.poopbar
{
margin:0;
padding:10px; [change this to padding:10px 10px 0; instead]
width:265px;
display:block;
list-style:none;
list-style-type:none;
}
as you probably already know, padding:10px means that you have 10px of top padding, 10px of side padding and 10px of bottom padding.
when two paddings butt onto one another, firefox displays it correctly by merging the two paddings together (to make just one lot of 10px padding) but IE 6.0 honours both amounts, making 10px + 10px = 20px.
at least, that's what i think is happening. but i'm probably talking rubbish!