Welcome to WebmasterWorld Guest from 35.171.45.91

Forum Moderators: not2easy

Message Too Old, No Replies

Can't Get Rid of Unwanted Margin

May be connected with float in <dt>?

     
4:52 pm on Oct 14, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


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>

6:19 pm on Oct 14, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


The dl has a default margin. What you're seeing is called "collapsed margins".

The fix for your example above is quite simple. Add this style rule:

dl { margin-top: 0; }

6:28 pm on Oct 14, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts:76
votes: 0


Thanks Fotiman, that worked perfectly. I guess I've not run into that particular issue before. :)