Hi,

I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly?

See page layout here

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" xml:lang="en" lang="en">
<head>
<title>This is really beginning to annoy me!</title>
<meta http-equiv="expires" content="-1" />
<meta name="robots" content="no-index" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>
<div id="ContentBox">
<div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div>
<div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div>
<div id="leftSide">
Quick Navigation
<form><p></p></form>
<img src=""  border=0 alt="" />
<ul class="prodsnav">
<li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li>
<li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li>
</ul>
</div>
<div id="centerSide">Center column</div>
<div id="rightSide">righthand column</div>
</div>
</body>
</html>
...the CSS
Code:
body {
	margin:0px 0px; 
	padding:0px;
	text-align:center;
	background-color: #fff;

	font-family: arial, sans serif;
	font-size: x-small;
	font-style: normal;
	font-weight: 400;
}

#ContentBox {
	width:810px;
	height: 100%;
	margin:0 auto;
	text-align:left;
	padding:0px;
	border: 1px solid #c2dacd;
	background-color:#fff;
	vertical-align: top;
}

#leftSide {
	width: 166px;
	height: 99%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #003399;
	
	margin: 0;
	padding-top: 24px;
	display: inline;
	vertical-align: top;
	background-color: #f00;
}

#centerSide {
	width: 450px;
	height: 99%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #003399;
	margin: 0px;
	padding: 0px;
	display: inline;
	vertical-align: top;
	background-color: #0f0;
}

#rightSide {
	width: 177px;
	height: 99%;
	border: 0;
	margin: 0px;
	padding: 0px;
	display: inline;
	vertical-align: top;
	background-color: #00f;
}


div.logo {
	width: 100%;
	height: 50px;
	background-color: #c2dacd;
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	vertical-align: left;
	display: block;
}

#mainmenu {
  height: 28px;
  width: auto;  
  vertical-align: top;
  padding: 0px;
  display: inline;
  border: 0;
  font-size: 1px;
  background-color: #0f0;
} 

div.blulinetop {
  width: 100%;
  height: 2px;
  border: 0;
  background-color: #003399;
  margin-top: 2px;
  margin-bottom: 2px; 
  font-size: 1px;
  vertical-align: top;
}

div.blulinebot {
  width: 100%;
  height: 2px;
  border: 0;
  background-color: #003399;
  margin-top: 0;
  margin-bottom: 0; 
  font-size: 1px;
  vertical-align: top;
}

/* products nav */
ul.prodsnav {
	display: block;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	list-style-type: none;
}

li.prodsnav {
  padding: 4px;
  margin-top: 0;
  margin-right: 2px;
  margin-bottom: 2px;
  margin-left: 2px;

  height: 18px;
  width: 165px;

  border-right-color: #999;
  border-right-style: solid;
  border-right-width: 1px;

  border-bottom-color: #999;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

img.prodNav{
	display: inline;
}


What to do?
un-Wizeone today