homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:3236803
 5:52 am on Jan 30, 2007 (gmt 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?

CSS:

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;
}

HTML
<body>
<dl>
<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>
</dl>
</body>

 

mep00




msg:3237063
 12:24 pm on Jan 30, 2007 (gmt 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:
[positioniseverything.net...]
and
[positioniseverything.net...]

SuzyUK




msg:3237391
 5:53 pm on Jan 30, 2007 (gmt 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 ;)

Suzy

luispunchy




msg:3237493
 7:24 pm on Jan 30, 2007 (gmt 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 :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved