Sent by Thierry Koblentz on 21 July 2008 21:09
> -----Original Message-----
> From: [EMAIL-REMOVED] [EMAIL-REMOVED]-
> discuss.org] On Behalf Of Neil Lee
> Sent: Monday, July 21, 2008 12:04 PM
> To: CSS Discuss
> Subject: [css-d] [help needed] <dt> / <dd> with multiple lines in IE
>
> Hi folks -
>
> I'm working on getting a design working in Windows IE and I've come up
> against an issue I can't seem to work around.
>
> I have a definition list where the <dt> and <dd> are inlined and
> floated left to put them at the same level. This is working well as
> long as both elements are no longer than one line of text. As soon as
> there are 2 or more lines of text, Windows Internet Explorer 6 and 7
> do not handle the linebreaks correctly, where as Firefox and Safari do.
>
> Safari - Firefox (correct behaviour):
> http://homepage.mac.com/neilio/screenshots/safari-firefox.png
>
> Internet Explorer 7:
> http://homepage.mac.com/neilio/screenshots/ie.png
>
> Here's the sample HTML I'm using:
>
> <div id="searchresults">
> ... snip ...
> <div class="results">
> <dl>
> <dt>Hester How High School</dt>
> <dd>142 Queen Street East <span>(0.1km)</span></dd>
> <dt>St. Charles Elementary</dt>
> <dd>66 Dundas Street East <span>(1.1km)</span></dd>
> <dt>Central Tech</dt>
> <dd>94 Greenwood Avenue <span>(1.5km)</span></dd>
> <dt>Centennial Technical College</dt>
> <dd>412 Adams Street <span>(2.1km)</span></dd>
> </dl>
> </div>
> </div>
>
> And here's the pertinent CSS:
>
> #searchresults {
> height: 340px;
> overflow-y: scroll;
> float: left;
> width: 364px;
> border-bottom: 1px solid #e3ddc0;
> padding: 0 2px;
> }
>
> #searchresults dl {
> float: left;
> }
>
> #searchresults dt {
> float: left;
> width: 140px;
> clear: left;
> margin-bottom: 2px;
> }
>
> #searchresults dd {
> float: left;
> margin-bottom: 2px;
> width: 205px;
> }
>
> Is there any way to "fix" this so that IE handles the multiple lines
> of text correctly instead of bunching the <dd> together?
Hi Neil,
Did you try this?
#searchresults dd {
float: left;
margin-bottom: 2px;
width: 205px;
*float: none;
* margin-left: 150px;
*width: auto;
}
--
Regards,
Thierry | http://www.TJKDesign.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
