CODEWITHSUNDEEP
csslistinternet-explorer-7internet-explorer-6definition
BobJIII
BobJIII

Reputation: 37

IE7 Definition List - Alignment Issue

I'm having an alignment issue with this definition list in Internet Explorer 7 (also Internet explorer 5.5 and 6 but I'll be happy if I can get it working in ie7.)

Screenshot:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .details dt {
            clear: left;
            float: left;
            width:100px;
            margin: 0;
            font-family:verdana;
            font-size:10px;
            font-weight: bold;
        }
        .details dd {
            float: left;
            margin: 0;
            font-family:verdana;
            font-size:10px;
        }
    </style>
</head>
<body>
    <dl class="details">
        <dt>Country:</dt>
        <dd>Canada</dd>

        <dt>State:</dt>
        <dd>Alberta</dd>
        <dt>City:</dt>
        <dd>Calgary</dd>
        <dt>District:</dt>
        <dd>Downtown</dd>

        <dt>Street:</dt>
        <dd>Main St</dd>
    </dl>
</body>
</html>

Upvotes: 1

Views: 646

Answers (1)

user194076
user194076

Reputation: 9017

Remove clear:left and add width to dl. working example:

http://jsfiddle.net/sFxcE/1/

code: 

<head>
            <style type="text/css">
            .details dt {

            float: left;
            width:100px;
            margin: 0;
            font-family:verdana;
            font-size:10px;
            font-weight: bold;
            }

            .details dd {
            float: left;
            margin: 0;
            font-family:verdana;
            font-size:10px;
            }
            .details
             {
             width:200px;
             }


            </style>


            </head>

            <body>

            <dl class="details">
            <dt>Country:</dt>
            <dd>Canada</dd>

            <dt>State:</dt>
            <dd>Alberta</dd>
            <dt>City:</dt>
            <dd>Calgary</dd>
            <dt>District:</dt>
            <dd>Downtown</dd>

            <dt>Street:</dt>
            <dd>Main St</dd>
            </dl>


            </body>
            </html>

Upvotes: 2

Related Questions