Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE6: floats in DL, extra space bug - killing me!

5:52 am on Jan 30, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 13, 2005
votes: 0

Problem: IE6 is adding extra vertical spacing between floated items in a definition list. All is fine in FF, Opera, IE7, etc. Only IE6 is choking (I'm not concerning myself with IE5.x or below). I'm not sure if the extra "space" is margin or not, but it breaks the layout by forcing a large separation between the dt and the dd (see code, easier than my explanation).

Ok, first off the obvious: both the markup and CSS validate. The widths, padding, and margins all add up. The markup is clean, and the CSS is relatively straight-forward. Yet IE6 still chokes.

I've researched for hours, and I'm leaning towards this error being caused by the floats and IE6's god-awful support. I am tempted to believe this is a "hasLayout" issue, but the typical solutions of which I'm aware (e.g., adding "height: 1%" or "display:inline" to the floated elements in my IE6-only CSS file) haven't worked.

I've created a minimal test case, code copied in below. This includes some basic body styles and formatting, but mostly this is just the code in question.. I can supply a URL if that would help (sticky me).

Basically, I'm trying everything, but getting nowhere. ANY IDEAS?


body {
font: 76%/1.2 "Trebuchet MS", Helvetica, Verdana, sans-serif;
color: #323232;
background: #cadff0 ;
margin: 100px;

* {margin: 0; padding: 0;}
a img {border: none;}

dl {
width: 311px;
background: #ccc ;
padding: 15px 0px 15px 0px;

dl dt {
float: right;
width: 186px;
padding: 0 15px 0 0;
margin: -2px 0 0 0;
color: #f60;
font-size: 1.1em;
font-weight: bold;

dl dd {
width: 186px;
padding: 0 15px 0 0px;
margin: 0 0 0 110px;
letter-spacing: -.5px;
line-height: 1.1;

dl dd.img {
float: left;
width: 79px;
margin: 0 16px 0 0;
padding: 0 0 0 15px;

dl dd.link {
line-height: 1.3;

<dt>Featured Destination</dt>
<dd class="img"><a href="#" title="Featured link"><img src="/img/featdest-portlet.jpg" width="79" height="79" alt="featured destination portlet image" /></a></dd>
<dd>Lorem ipsum dolor sit amet teur nonummy lorenzino. Interdum vous videt, est ubi peccat. Si veteres ita miratur laudatque.</dd>
<dd class="link"><a href="#"> Learn More</a></dd>

12:24 pm on Jan 30, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Dec 25, 2003
votes: 0

Short answer: IE's broken float model.

Add "dd {float: right;}" and remove "dd {margin: 0 0 0 110px;}" (the "dl" from "dl dd" isn't needed as ALL "dd"s (and "dt"s) are descendants of a "dl"). That will fix it for IE but cause a problem for other browsers as now the dl is empty except for floats which means height=0 (leaving only the 30px of padding). To get the height back you have four choices:

  1. "dl {position: fixed}" which you probably don't want (and which IE doesn't understand);
  2. "dl {position: absolute}" which is better, but introduces other problem which you are better off avoiding;
  3. "dl {float: left /* or right */;}" which is a possibility; it had problems, though usually less than"position: absolute;" and
  4. the Clearing Hack:
    dl:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    which is probably your best choice; IE ignores it, but doesn't need it (because it's broken the right way), while Gecko, Presto (Opera), and KHTML (Konqueror and Safari) understand it.

For more informantion see:

5:53 pm on Jan 30, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

While there is a float bug in there, I think you also need to look at your widths and padding

I also wouldn't quite do it like that, my first thought is that should be no need for the right float at all (not even on the dt) which should then remove the float bug? But I need to run some checks as I just scanned the code and gotta go out for a bit

check the width/padding thing,
content width + padding = actual width

will look properly later if someone else doesn't get here first ;)


7:24 pm on Jan 30, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 13, 2005
votes: 0

Add "dd {float: right;}" and remove "dd {margin: 0 0 0 110px;}"

mep00: thanks, that worked perfectly! I knew this had something to do with IE's broken float model, but after much tweaking I couldn't find what turned out to be a rather simple fix - and yet again I'm much appreciative for the forum community.

I was considering other options but they all basically involved changing the semantics of the markup, such as putting the image first in the list as the 'dt' which would simplify the floats. But that didn't sit well w/me b/c the headline is the "term" and should be the 'dt', followed by the image and text as the 'dd' elements which describe that headline.

So now I get to keep my semantic markup and still get the desired appearance! GREAT :)