> -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > 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 PROTECTED] 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/