Bg image not showing

It's fine in FF, but not IE6

[neophyte]

I've got a small background icon that I've hooked to a few <li>'s. Displays as planned in FF, but doesn't display at all in IE6.

Here's the HTML snippet:

<ul>
<li class="signInOptions">Admin Area data includes Guestbook Entries, Read A Chapter contacts, and Email contacts.</li>
</ul>

Here's the CSS:

li.signInOptions {
margin-left: 10px;
padding: 5px 0 5px 20px;
display: block;

font-size: 0.75em;

background: transparent url(../../admin/i/info.jpg) 0 5px no-repeat;
}

If I remove display:block, the icons do show up in IE, but the text in a few of these <li>'s wraps to a second line and I don't want that; I want to preserve a flush-left left indent on both lines. Not only that, but even though they do show up in IE, the padding isn't retained and two of the three bullets are cut in half. Only in IE (of course).

Any ideas how I can fix this in IE - or what I may be doing woring?

Neophyte

[D_Blackwell]

With the code as is, I dont' see a problem with the image in IE, or with the padding.?

For the line break, is there a specified width to the container that holds the <ul>?

I'm not seeing a problem with the bullets in IE, but they don't show up at all in Firefox or Opera with display: block on the <li>. Move display: block; to ul {display: block;}

My own follow up question:
Moving display: block; repairs the list-item bullets in FF and Opera. Changing the li to li {display: block list-item;} also works. Is it ok to declare multiple value for display?

[Moby_Dim]

This is difficult to resolve not knowing the size of the image itself I suppose. Btw did you try to play with "list-style-image" and "list-style-type" properties before this? Hope you'll find easier solution with these.

[createErrorMsg]

Have you set list-style-type in the UL to none? if not, you may be getting conflict between the BG image and the marker box used to display the bullet.

In Firefox, padding is used to clear the space for the bullet. Since backgrounds display in padding space, this could explain why the BG image displays okay in Firefox.

IE, on the other hand, uses margins to clear the space for the marker box. Since BG images do not display in an element's margins, it could explain why the image is partially cut off in IE.

If you haven't already, you might want to try zeroing out all the margins and padding on the list, then add them in only as needed. This is generally a good idea when dealing with any sort of list, since they are handled so differently on different browsers and platforms. Remember that both the UL and the LIs come with default margins and padding, so...

ul, li{margin0;padding0;}

...is a good start to any list styling project.

cEM

[neophyte]

Thanks to everyone who chimed-in on this issue.

Found that setting the width on the <li>'s which had bg images fixed the display issue in IE.

Neophyte.