Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    Vexing issue with alignment of DT and DD tags

    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 that demonstrates the problem.

    And the code to the page....
    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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).

    Edit:
    Yep, just tested:
    Code:
    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)
    Last edited by rmedek; 05-31-2007 at 06:03 PM.

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Oops, sorry…I said "float: none" would do the trick but I typed "clear: none" in the code. Fixed.

  • #5
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    No…

    …adding "float: none" to the <dd> worked for me (IE 6 and 7).
    The example code above is correct. Just to make sure:

    Code:
    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
    Attached Thumbnails Attached Thumbnails Vexing issue with alignment of DT and DD tags-screenshot_1.jpg  
    Last edited by rmedek; 05-31-2007 at 07:07 PM.

  • #7
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Ooohhh ok I get ya now, thanks for being patient with me

    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.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I have no idea.

    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.

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Recently, aspekt9 was having a similar issue. 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

    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)
    Code:
    <!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>
    Quote Originally Posted by Fumigator View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •