Hi guys,
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>
