Forum Moderators: not2easy
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>
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:
dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}For more informantion see:
[positioniseverything.net...]
and
[positioniseverything.net...]
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
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 :)
