...

View Full Version : Vexing issue with alignment of DT and DD tags



Fumigator
05-31-2007, 07:51 AM
The following code behaves perfectly in FF but becomes vertically misaligned in IE -- the vertical sizing of the <DD> tags does not respect the vertical sizing of the <DT> tags. I cannot figure out why. Does someone have any ideas for a workaround or an address for the guy who wrote IE so I can leave a flaming bag of poo on his doorstep?

Here's a test page (http://www.pudgywebguy.com/csstest.htm) that demonstrates the problem.

And the code to the page....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DL/DT/DD test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
dt {
font-size: 1em;
clear: both;
width: 40%;
float: left;
text-align: right;
margin: 0px 0px 10px 10px;
border-top: 1px solid #ccc;
padding-bottom: 10px;
}

dd {
font-size: 1em;
float: left;
width: 50%;
margin: 0px 0px 10px 10px;
border-top: 1px solid #ccc;
display: inline;
padding-bottom: 10px;
}

</style></head>

<html>
<body>
<div>

<dl>
<dt>
DT number 1<br />
text line 1<br />
text line 2<br />
text line 3<br />
text line 4<br />
text line 5<br />
text line 6<br />
text line 7<br />
text line 8<br />
</dt>
<dd>
DD number 1 should line up vertically with DT number 1<br />
text line 1<br />
text line 2<br />
text line 3<br />
</dd>
<dt>
DT number 2<br />
text line 1<br />
text line 2<br />
text line 3<br />
text line 4<br />
text line 5<br />
text line 6<br />
text line 7<br />
text line 8<br />
</dt>
<dd>
DD number 2 should line up vertically with DT number 2<br />
text line 1<br />
text line 2<br />
text line 3<br />
</dd>
<dt>
DT number 3<br />
text line 1<br />
text line 2<br />
text line 3<br />
text line 4<br />
text line 5<br />
text line 6<br />
text line 7<br />
text line 8<br />
</dt>
<dd>
DD number 3 should line up vertically with DT number 3<br />
text line 1<br />
text line 2<br />
text line 3<br />
</dd>
</dl>

</div>
</body>
</html>

rmedek
05-31-2007, 08:02 AM
It's hard for me to test quickly on IE (Mac user) but the site I'm working on now had a similar problem…adding "float: none" to the <dd> worked for me (IE 6 and 7).


Yep, just tested:


dt, dd {
font-size: 1em;
clear: both;
width: 40%;
float: left;
text-align: right;
margin: 0px 0px 10px 10px;
border-top: 1px solid #ccc;
padding-bottom: 10px; }

dd {
clear: none;
width: 50%;
text-align: left; }

* html dd {
float: none; }

…although you should really use conditional comments 'cause IE 7 has the same issue (not sure if there's a reliable hack for IE 7 yet)

Fumigator
05-31-2007, 05:17 PM
Thanks for the reply,

I tried the CSS you provided and I saw no difference in either browser. FF still aligns properly and IE6 does not (didn't test on IE7).

I don't really understand what that would do anyway; not that I understand much with how IE handles CSS :rolleyes:

rmedek
05-31-2007, 06:02 PM
Oops, sorry…I said "float: none" would do the trick but I typed "clear: none" in the code. Fixed.

Fumigator
05-31-2007, 06:48 PM
So "clear: none" on the <dd> worked for you? It doesn't align for me in IE6. I'd show a screenshot but I'm at work and can't upload the image.

rmedek
05-31-2007, 06:53 PM
No…


…adding "float: none" to the <dd> worked for me (IE 6 and 7).

The example code above is correct. Just to make sure:


dt, dd {
font-size: 1em;
clear: both;
width: 40%;
float: left;
text-align: right;
margin: 0px 0px 10px 10px;
border-top: 1px solid #ccc;
padding-bottom: 10px; }

dd {
clear: none;
width: 50%;
text-align: left; }

* html dd {
float: none; }

http://littlethinky.com/examples/test/1417.php

Fumigator
05-31-2007, 07:24 PM
Ooohhh ok I get ya now, thanks for being patient with me :D

I don't suppose you could explain why on earth this works? It makes no sense to me. Then again, I don't understand a lot of IE behaviors so I guess I should just add this one to the list.

rmedek
05-31-2007, 07:48 PM
I have no idea. :D

When I ran into the issue it looked as if the dls were being rendered as if all the dts were in a virtual container, and all the dds were in a virtual container, and those containers were being floated left. I tried float: none on a whim and it worked.

koyama
06-02-2007, 08:04 AM
Recently, aspekt9 was having a similar issue (http://www.codingforums.com/showthread.php?p=569102#post569102). Although the original page is gone, I assure you that it was the same bug. It was with a definition list that rmedek created for him originally :D

I didn't know what the problem was, but later I realized that simultaneous floating and clearing can lead to floats being incorrectly laid out in IE6 and IE7 at least.

Example. Notice that the yellow floats are positioned too high up in IE6 and IE7. It is as if IE has 'forgotten' about the blue floats just because they have clear: both. (Any value other than clear: none leads to the buggy rendering)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>CF 115272</title>
<style type="text/css">
body {font-family: sans-serif;}
#wrap {
width: 450px;
height: 600px;
border: 5px solid green;
}
.blue {
float:left;
clear:both;
width:100px;
height: 100px;
border: 5px solid blue;
background: lightblue;
}
.red {
float: left;
width: 50px;
height: 50px;
border: 5px solid darkred;
background: red;
}
.yellow {
float: left;
width: 80px;
height: 80px;
border: 5px solid orange;
background: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div class="red"></div>
<div class="blue">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="blue">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="blue">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
</div>
</body>
</html>

I don't suppose you could explain why on earth this works?
It looks like another IE bug exploit. The floats seem to be pulling down the non-floated elements in IE. I think I will take a look at it later.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum