Dl vs ul - IE6/7 issue

HTML & CSS
1

Hi all

I’m aware of the importance of valid markup and beleve the <dl> approach I have below fits the job just nicely.
the only problem is IE 6/7 the border on the <dd> doesn’t stretch the full width like in current browsers.

My question is: Should I sacrifice using proper html and use a <ul> or dose anybody know of a CSS solution to fix the IE problem so I can use a <dl> element?

My test html/css to demonstrate, sorry no testing page to view.
Thanks in advance :cool:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
ul.layout {overflow:hidden;width:500px;list-style:none;padding:0;margin:0;}
ul.layout li {height:70px;border-bottom:1px solid #333; padding:1em 0 }
ul.layout img {width:90px;height:70px;float:left;border:1px solid #CCC;margin-right:10px}
ul.layout p {display:inline;padding:0;margin:0;}
ul.layout em {display:block}

dl.clubs {width: 550px}
dl.clubs dt {clear:left }
dl.clubs dt img {width:90px;height:70px;float:left;border:1px solid #CCC;margin-right:10px}
dl.clubs dd { height: 70px;margin: 0 0 1em;padding: 0;border-bottom: 1px dashed #333; }
</style>

</head>

<body>

<p>ul</p>

<ul class="layout">

    <li>
    <img src="http://www.sitepoint.com/forums/images/test.jpg" width="90" height="70" />
    <p>title<em>Preview followed by live coverage of Thursday's game between England and Germany</em></p>
    </li>

</ul>

<p>dl</p>

<dl class="clubs">

    <dt><img src="http://www.sitepoint.com/forums/images/test.gif"><a href="">club 001</a></dt>
    <dd>Preview followed by live coverage of Thursday's game between England and Germany</dd>

</dl>


</body>
</html>
2

the only problem is IE 6/7 the border on the <dd> doesn’t stretch the full width like in current browsers.
Hi,
The IE6/7 problem stems back to the broken float model.
It is the height on the dd that is tripping haslayout in IE6/7. When a haslayout element adjoins a float it does not slide under the float in those browsers.

It acts the same way as an element with overflow:hidden; applied to it does when it adjoins a float in modern browsers. To get IE6/7 working you would need to remove the height (haslayout) from your dd and use a bottom padding to hold it open. That would not be a workable solution though as varying amounts of text will change the height.

The reason your UL method works is because your bottom border is applied to the parent LI rather than the one child with the DL. Applying the bottom border to the parent is really going to be your best way of getting IE6/7 to work.

Here is a test case of an element w/out haslayout and with a bottom border adjoining the float.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
 
<style type="text/css">
body {
    margin: 0;
    padding:0;
}
dl.clubs, div {
    width: 550px;
    margin: 20px;
    padding:0;
    background:#EEF
}
dl.clubs dt {
    clear: left
}
 img {
    float: left;
    width: 90px;
    height: 70px;
    margin-right: 10px;
    border: 1px solid #CCC;
    background: lime;
}

dl.clubs dd {
    min-height: 70px;
    margin: 0;
    border-bottom: 1px dashed #333;
}

/*no haslayout on these test elements for IE*/
div div {
    margin:0;
    width:auto;
}
p {
    border-bottom: 1px dashed #333;
    padding-bottom:40px;
    /*zoom:1;*/
}
</style>
 
</head>
<body>

<dl class="clubs">
    <dt>
        <img src="test.gif" alt="image">
        <a href="#">club 001</a>
    </dt>
    <dd>
        Preview followed by live coverage of Thursday's game between England and Germany
    </dd>
</dl>

<div>
    <div><img src="test.gif" alt="image"></div>
    <p>No "haslayout" on this element: <br>Preview followed by live coverage of Thursday's game between England and Germany</p>
</div>

</body>
</html>
3

To get IE6/7 working you would need to remove the height (haslayout) from your dd and use a bottom padding to hold it open.

I removed the height and added padding:0 0 30px; :slight_smile:

That would not be a workable solution though as varying amounts of text will change the height.
I have a function in place which only shows a fixed amount of words as a preview text, this works just how I want it… thanks for your time much appreciated :cool: