Styling definition lists - IE clear:both bug
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 definit开发者_运维技巧ion</dd>
</dl>
</div>
</body>
</html>
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.*
Try adding position to your elements, absolute for the dl and relative for the dt. It might work..
If the problem you're having is that some elements seem to "float upwards", then here's an unpleasant hack you can try: put a <div> with "clear: both" between the close of a <dd> and the next <dt>. I know that sounds stupid, and of course it's broken HTML, but it's the only thing I've found that puts a "barrier" in the markup to keep stuff from floating upwards.
This should work, I have added some background colours so you can see what is happening. You will have to add a class to every first dd and play around with the various 'width' to fit your design.
<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 { background-color:orange;width: 400px; }
.aligned dt {background-color:grey;clear:both;float: left; margin: 0 0 0.5em 0; width:150px}
.aligned dd {background-color:olive;clear:left;float: left; margin: 0 0 0.5em 150px; width: 190px; }
.aligned dd.first {clear: none;margin-left:0}
</style>
</head>
<body>
<div id="main">
<dl class="aligned">
<dt>First title</dt>
<dd class="first">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 class="first">3.0 definition</dd>
<dt>Fourth title - very long to test wrapping</dt>
<dt>Fifth title</dt>
<dt>Sixth title</dt>
<dd class="first">6.0 definition</dd>
</dl>
</div>
</body>
I think the better solution here is about changing html structure. If you make different dl.aligned blocks - instead of just one - it's quite simple to achieve what you want.
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
This works in IE7, untested in IE6. Adjust as needed. Adapted from here.
<!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>
<!--[if lt IE 8]>
<style type="text/css">
.aligned dt { float: left; clear: left; margin: 0 0 0.5em 0; width: 100px; }
.aligned dd { clear: none; float: none; margin: 0 0 0 100px; width: 190px; }
.aligned dt:after { content: ":"; }
</style>
<![endif]-->
</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>
I would say that the whole code is broken. As @NickPyett said in the comment, it should be formatted as a table.
No hacks required and everything is displayed as desired.
th {
text-align: left;
}<table>
<tr>
<th scope="rowgroup" rowspan="3">First title</th>
<td>1.1 definition</td>
</tr>
<tr>
<td>1.2 definition - very long to test wrapping</td>
</tr>
<tr>
<td>1.3 definition</td>
</tr>
<tr>
<th scope="row">Second title</th>
<td> </td>
</tr>
<tr>
<th scope="row">Third title</th>
<td>3.0 definition</td>
</tr>
<tr>
<th scope="row">Fourth title - very long to test wrapping</th>
<td> </td>
</tr>
<tr>
<th scope="row">Fifth title</th>
<td> </td>
</tr>
<tr>
<th scope="row">Sixth title</th>
<td>6.0 definition</td>
</tr>
</table>
加载中,请稍侯......
精彩评论