Bullet doesn't show up in IE 7 Compatability View

Scenario:

I was working on a project recently that has simple unorderd-list with few list items. When I viewed it in IE8 and FireFox it showed up all fine. But when I changed to IE7 Compatability View the bullets disappeared. I thought it might be a common problem (and still it may be) but I couldn't find it digging the internet. Stumbling upon and trying various sets I finally had it with a single attribute setting.

 

Example:

Here what it looks in IE8 and IE7 Compatability mode. You can download the attached code if you want to see the markup.

IE8       IE7

        IE8                  IE7  Compatability View

Oops..ok that unaligned image is not that problem. I am talking about the bullets disappearing.

Solution:

1: I added list-style-position:inside;  to my li styles and the bullets started showing up. Thist will let the bullet appear along with the text inside the content flow. More here.

Updated:

2: The other solution / explanation I found is here: 

Added padding-left:20px; to the ul style.

3: One other thing you might want to check is style attribute "float" for ul and li. In my other test I had to set float:none for my li.

Check out the attached code if you want to try-it-yourself.

References:

1 Comment

Comments have been disabled for this content.