[RESOLVED] gap between floating div's [Archive]

Flying Monkey

09-17-2008, 11:53 PM

Hi.
I have a gap appearing between two floating DIVs of about two pixels. I just can't see what's wrong with the markup. Looks good in Dreamweaver but not Mac Firefox and Safari. (see attached screenshot). Thanks in advance for any help.

Here's a link to the live page:
http://www.flyingmonkey.com.au/baw/proto/

HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bikes@work</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="top_bg"><img src="images/bg_top.png" alt="bikes at work top bg" width="800" height="23" /></div>
<div id="page_cont">
<div id="page">
<div id="float_l"><img src="images/logo.jpg" alt="bikes at work logo" /></div>
</div>
</div>


</div>


</body>
</html>

CSS:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Verdana, sans;
color: #666666;
background-image: url(../images/tile_greyWheel.jpg);
margin: 0px;
padding: 0px;
}
#wrapper {
display: block;
width: 800px;
margin: 15px auto 15px auto;
}
img {
margin: 0px;
padding: 0px;
border: none;
}
#top_bg {
display: block;
width: 800px;
margin: 0px;
padding: 0px;
float: left;
}
#page_cont {
background-image: url(../images/bg_content_strip.png);
background-repeat: repeat-y;
width: 800px;
display: block;
float: left;
padding: 0px;
margin: 0px;
overflow: auto;
}
#page {
background-image: url(../images/bg_content.png);
display: block;
padding: 0px 30px 15px 60px;
margin: 0px;
background-repeat: no-repeat;
background-position: top;
}
.float_l {
display: block;
float: left;
}