SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dl vs ul - IE6/7 issue

    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

    Code HTML4Strict:
    <!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>
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code HTML4Strict:
    <!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. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    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
    The more you learn.... the more you learn there is more to learn.


Bookmarks

Posting Permissions

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