I'm experimenting with converting a site from a table layout to CSS.
I'm floating three DIVs in a row for the top of a website (a logo,
navigation buttons and a email list signup box). The DIVs have a grey
background.
When I view the page in Firefox, I get what I hoped for: there is a
solid grey rectangle at the top of the website. When I view the page in
Internet Explorer 6 (WinXP), there is a gap between two right hand DIVs
(i.e. a vetical bar with the page's background color).
What's going on? How do I get IE to play ball?
I've written a simplified test case; see the HTML below, or
http://home.exetel.com.au/tas/boxgap/test01.html
Thanks,
Tasman
p.s. I notice Firefox has vertical space before the text in the first
two DIVs, and no vertical space before the text in the third DIV. Does
anyone know why this is?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test02</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body {
background-color:#ffcc00;
}
div#logo {
float:left;
height:91px;
width:135px;
background-color:#e0d2be;
}
div#sitemenu {
float:left;
height:91px;
width:407px;
background-color:#e0d2be;
}
div#emailjoin {
height:91px;
background-color:#e0d2be;
}
</style>
</head>
<body>
<div id="logo">
<p>logo</p>
</div>
<div id="sitemenu">
<p>site menu</p>
</div>
<div id="emailjoin">
<p>join our emailing list</p>
</div>
</body>
</html>
