Menu
I'm trying to style a definition list properly. So far I've got the style that I wanted in Firefox 3.5 and IE 8 but I couldn't get IE6 and IE7 to behave properly... I've already tried any kind of hack and trickery I could possibly think of.
It seems like the "clear:both" on the dt doesn't work in IE<=7...
Below is the "test page" that I'm using. The markup of the definition list is built on purpose: I wanna test different scenarios such as multiple definitions or empty one.
Check it in Firefox > 3.5 to see how it should look like.
Cheers!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 62.5%; }
* { margin: 0; padding: 0; }
#main { font-size: 1.4em; }
dt { font-weight: bold; }
hr { clear: both; }
dl.aligned { width: 300px; }
.aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; }
.aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; }
</style>
</head>
<body>
<div id="main">
<dl class="aligned">
<dt>First title</dt>
<dd>1.1 definition</dd>
<dd>1.2 definition - very long to test wrapping</dd>
<dd>1.3 definition</dd>
<dt>Second title</dt>
<dd></dd>
<dd></dd>
<dt>Third title</dt>
<dd>3.0 definition</dd>
<dt>Fourth title - very long to test wrapping</dt>
<dt>Fifth title</dt>
<dt>Sixth title</dt>
<dd>6.0 definition</dd>
</dl>
</div>
</body>
</html>
499
Have you tried the clear fix?
I usually use this fix for all my projects so i just created a separate stylesheet just for it:
/* float clearing for IE6 */
* html .clear {
height: 1%;
overflow: visible; }
/* float clearing for IE7 */
*+html .clear {
min-height: 1%; }
/* float clearing for everyone else */
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden; }
save that as clear.css and include it in your markup(or you can just include it in your stylesheet). Then to use, just add a clear class to the parent container of your floating elements, in this case, your dl.
e.g.
<dl class"clear">
For those who have come across this looking for a solution, I have something that works for single <dt>/<dd> pairs (presuming the width of the two elements adds up to the full width of the <dl>.
Use the css mentioned above for all browers but IE7. For IE7, use something like the following:
.ie7 #home .news dt,
.ie7 #home .news dd {
float: none;
display: inline;
zoom: 1;
vertical-align: top;
}
Note: I'm using conditional comments to target IE7 this way. Use whatever your favourite method of targeting IE7 is to send it these rules. I'm aware that this falls apart horribly if you add multiple <dd> elements in, which is why I noted that it only works for pairs of elements.*
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
