css problem with unordered lists (as usual with IE)_问答_开发者

I am using un-ordered lists that nests some divs to show the desired output on screen. I am using css to style them and they seem to look perfect on chrome and firefox. But in IE(8) it looks there is a problem which I was unable to locate.

I am using the below CSS

    <style type="text/css">
        .ur_container {width:980px; padding: 0; margin: 0;}
        .ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; }
        .ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; }

        .bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;}
        .bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;}
        .bx_grp_title {float: left; font: bold 11px Arial; padding:5px;}
        .bx_grp_options {float: right; font: 10px Arial; padding: 5px;}
        .bx_grp_options a{color: #125B93; text-decoration: none; }          

        .bx_lnx {padding:0px; background-color: red;}
        .bx_lnx_header {font:11px Arial; color:#333;}
        .bx_lnx_title {float: left;}
        .bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }
        .bx_lnx_options {float: right;}
        .bx_lnx_options a {color: #258CF4; text-decoration: none;}
        .bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; }
        .bx_lnx_notes {}
        .bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;}
        .bx_lnx_tags {}
        .bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;}
    </style>

Against the following HTML

<div class="ur_container">
    <ul 开发者_如何转开发class="bx_grp" id="grp_1">
        <li>
            <div class="bx_grp_header">
                <span class="bx_grp_title">Personal File</span>
                <span class="bx_grp_options"><a href="#">rename</a> &bull; <a href="#">make private</a> &bull; <a href="#">hide</a href="#"> &bull; <a href="#">delete</a></span>   
                <div style="clear: both;"></div>
            </div>      
        </li>
        <li>
            <ul class="bx_lnx" id="lnx_1">
                <li>
                    <div class="bx_lnx_header">
                        <span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>
                        <span class="bx_lnx_options"><a href="#">edit</a> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span>
                    </div>
                </li>
                <li class="bx_lnx_url">http://www.google.com</li>
                <li class="bx_lnx_notes"><span>search google for this</span></li>
                <li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li>
            </ul>       
        </li>
    </ul>
</div>

Which produces this output in Chrome and Fireworks alt text http://haberhavadis.com/chff.jpg

and the following in IE alt text http://haberhavadis.com/IE.jpg

The yellow and red colors was used in order to show that is being going wrong. The yellow part is the undesired one.

Can anyone point me in the right direction please ?

Regards

~~This looks like IE8 rendering in IE7 document mode, which can be triggered a number of ways.~~

(Updated after OP commented that no DOCTYPE is being used.)

Omitting a DOCTYPE will cause your page to render in Quirks mode. See What happens in Quirks Mode? You are certainly free to do this, but this answer will be based on adding a DOCTYPE so the page will render in Standards mode. You can decide for yourself if you want to go this way (see Choosing the right doctype for your HTML documents.)

I would suggest either HTML 4.01 Strict...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

...or even HTML 5...

<!DOCTYPE html>

...and the use of a validator to catch any markup errors.

Now that we are rendering in Standards mode, we can use the W3C box model in which the width of an element is inclusive of the border, and padding, but not the margin.

Going to Standards mode alone will take care of the the gap you are seeing in IE8, but you will still see it in IE7 (even in Standards mode--it's a browser bug). Since you are using a fixed width (and assuming ~~you are rendering in standards mode~~ you go the Standards mode route), one easy fix is...

#lnx_1 {width: 968px;}

The width of 968px comes from 980px (width of .ur_container) - 2px (1px of border on each side from .bx_grp) - 10px (5px padding on each side from .ur_container ul.bx_lnx) = 968px.

See this page for more information on this particular IE list item bug fix.

Another change is required when going to Standards mode:

.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }

The color: fff portion is invalid without the pound sign; change it to color: #fff

As for <span class="bx_lnx_options"> being one line lower than you want, changing to Standards mode will put keep it on the first line in IE8, but not in IE7. Changing the source order would fix this...

<span class="bx_lnx_options"><a href="#">edit</a> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span>
<span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span>

See this answer for insight into why this happens.