IE7 <li> bullet or number shown outside of div

Question

I'm having issues with the IE7 list element bugs. The bullets (or numerals) of and are being shown outside of the margin. How do I fix this for IE? From what I've read this seems to be a problem when specifying the height/width in an IE7 li. Images can be found here:

Firefox:

IE7:

I have a stylesheet with the Meyer reset.

#create_request li {
    display: list-item;
    width: 313px;
    height: 23px;
    background-color: #E3E3E3;
    list-style: decimal;
    list-style-position: inside;
    padding-left: 25px;
    padding-top: 5px;
}

#create_request li.alternate {
    background-color: white;

}

#create_left li:hover {
    width: 356px;
    background: url('/images/list_add.png') 100% 100% no-repeat;
    background-color: #B0B0B0;
    cursor: pointer;
}

Answer 1

From what I've read this seems to be a problem when specifying the height/width in an IE7 li.

That's correct. Set the width on <ol> instead of the <li> and use line-height instead of height on the <li> .

#create_request ol {
    width: 313px;
}

#create_request li {
    line-height: 23px;
    ...
}

Answer 2

IE can do some weird things with padding/margin. I would recommend having a separate .css file for IE:

<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

And then just add either padding-left or margin-left to bump it back in place.

Answer 3

1) try display: block; instead of display: list-item;

2) try using margin (even margin-left:0;)

3) CSS hack for IE7 is also available

*+html #create_request li{

     ..... some style corrections here will work for IE7  .....

}