ie8 playing funny with list-style-position: inside

Question

Ok,

So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet.

This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty.

ie8 bug http://www.rocketspark.co.nz/bug_images/ie8_list.png

When I remove the a tag from the li then it jumps back up.

Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css?

Any insights would be much appreciated.

As asked here is some code

<div id="sub_nav">
<ul>
...    
<li><a class="active_page" href="#">Liposculpture</a>
<ul>
<li><a href="#">What is Liposculpture?</a></li>
<li><a href="#">About Liposculpture surgery</a></li>
<li><a href="#" class="active_sub">After Liposculpture surgery</a></li>
<li><a href="#">Post Op Instructions</a></li>
<li><a href="#">Liposculpture Side Effects</a></li>
<li><a href="#">Liposuction Introduction to</a></li>
<li><a href="#">Tumescent Liposculpture</a></li>
</ul>
</li>
...
</ul>
</div>

For the CSS I will try and show it best I can

#sub_nav li {
    width: 200px;
    padding:4px 0;
    border-bottom: 1px #CCC solid;
}

#sub_nav li a {
    text-decoration: none;
    color:#555;
    padding:7px 15px 7px 15px;
    display: block;
}

#sub_nav li ul li {
    list-style-position: inside;
    list-style-type: disc;
    font: 11px Arial;
    padding-left:15px;
    color:#FFF;
    border-bottom: none;
}

#sub_nav li ul li a {
    padding:0;
    margin:0;
    text-indent: 0;
}

Hope this helps

Mmmm... it looks like IE8 is having problems when calculating the width of the "a" (displayed as block) and pushing it down to a new line. The first thing I would try would be adding a width to the "a" element, to see if that's the problem. Is there any URL to see the problem ( ok, I could create one with your code, but I'm feeling lazy ;D ) — salgiza, May 12 '10 at 16:17
It seems you were indeed correct! I can't believe I didn't pick up on this earlier. It was indeed the display block that was affecting it. I change the width and that it make the "a" smaller but didn't fix the problem. So I just set the display:inline (must of inherited block). Thanks for that! — LeeR, May 13 '10 at 02:52
@salgiza Had the same problem and your answer helped. Thank you. You should consider providing a real answer bellow instead of a comment so that the OP could accept it. — jonjbar, Aug 24 '11 at 09:56
Try whit this: http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working — pwelti, Jul 16 '13 at 16:31

score 3 · Answer 1 · edited Jul 08 '12 at 17:57

3

change

#sub_nav li a {
    text-decoration: none;
    color:#555;
    padding:7px 15px 7px 15px;
    display: block;
}

to

#sub_nav li a {
    text-decoration: none;
    color:#555;
    padding:7px 15px 7px 15px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

edited Jul 08 '12 at 17:57

highlycaffeinated

19,729
9
60
91

answered Jul 08 '12 at 15:04

isour 2.0

31
3

score 0 · Answer 2 · answered Jun 04 '12 at 22:43

@salgiza posted the answer in the comments above... "it looks like IE8 is having problems when calculating the width of the "a" (displayed as block) and pushing it down to a new line. The first thing I would try would be adding a width to the "a" element, to see if that's the problem."

ie8 playing funny with list-style-position: inside

2 Answers2

Linked