Can't Get Rid of Unwanted Margin

The following code is driving me nuts. The desired result is the left green "bar" div flush to the "nav" table above it. I see the correct layout in IE7 and Opera 9.27, but in both Firefox 3.03 and Safari 3.12 there is a margin of about 10px between the two. I can't find a solution that doesn't then break the layout in IE. Both the HTML and the CSS validate okay. Any comments are appreciated. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
div.main {
height: 100%;
margin-right: 1px;
}
table.nav {
padding: 0px;
margin: 0px;
width: 100%;
border: 1px #006 solid;
}
td.bluebar {
margin: 0px;
background-color: #006;
height: 25px;
width: 100%;
}
div.container {
width: 100%;
height: 100%;
}
div.quick {
float: left;
width: 200px;
}
dt {
font-weight: bold;
float: left;
width: 150px;
text-align: right;
}
dd {
margin: 0 0 0 160px;
padding: 0 0 10px 0;
}
div.bar {
background-color: green;
width: 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="nav">
<tr>
<td class="bluebar" colspan="6"></td>
</tr>
</table>
<div class="container">
<div class="quick">
<div class="bar">
Links Here </div>
</div>
<div class="main">
<dl>
<dt>Definition</dt>
<dd>Some text here</dd>
</dl>
</div>
</div>
</body>
</html>

Can't Get Rid of Unwanted Margin

May be connected with float in <dt>?

jdkuehne

Fotiman

jdkuehne

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week