Css problem with unordered lists (as usual with IE)
I am using unordered lists that nest some divs to show the desired result on the screen. I am using css to style them and they seem to look great on chrome and firefox. But IE (8) seems to have a problem that I could not find.
I am using 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> • <a href="#">make private</a> • <a href="#">hide</a href="#"> • <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> • <a href="#">move</a> • <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 in IE alt text http://haberhavadis.com/IE.jpg
The colors yellow and red were used to show what's going wrong. The yellow part is unwanted.
Can anyone point me in the right direction?
Hello
a source to share
It looks like IE8 rendering in IE7 document mode, which can be launched in several ways.
(Updated after OP commented that DOCTYPE is not being used.)
Omitting DOCTYPE will cause your page to be rendered in Quirks mode. See What Happens in Quirks Mode? You can certainly do that, but this answer will be based on adding a DOCTYPE to make the page render in standards mode. You can decide for yourself if you want to go this route (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 using a validator to catch any markup errors.
Now that we render in standard mode, we can use the W3C box model , in which the item width
element is included border
and padding
but not margin
.
Going to standard will only take care of what you see 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 into standards mode), one simple fix ...
#lnx_1 {width: 968px;}
Width 968px
is 980px (width .ur_container
) - 2px (1px border on each side of .bx_grp
) - 10px (5px padding on each side of .ur_container ul.bx_lnx
) = 968px .
See this page for more information on this IE list item bug fix.
When going to standards mode, another change is required:
.bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; }
The part is color: fff
invalid without the pound sign; change it tocolor: #fff
As for <span class="bx_lnx_options">
which is one line lower than you want, going into standards mode will contain it on the first line in IE8, but not IE7. Changing the order of the source will fix this ...
<span class="bx_lnx_options"><a href="#">edit</a> • <a href="#">move</a> • <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 to understand why this is happening.
a source to share