LI image bullets not showing in IE6

they show fine in all other browsers

[neophyte]

Hello All -

Having a particular problem when using custom (background image) bullets in front of an <li> with IE only.

They show up famously in all other browsers, but not in IE. The padding is there (padding to push the li over to reveal the bullet) but, alas, no bullet.

Example code snippet is as follows:

Note: the .email and .download classes tied to each <li> are the ones specifying the bullets.

HTML:

<ul id="copyLinks">
<li class="email">Click <a href="#">here</a> to make a Tourer product inquiry.</li>
<li class="download">Click <a href="#">here</a> to download the Tourer Specification.</li>
</ul>

CSS:

#copyLinks {
margin: 15px 15px;
}

#copyLinks li {
margin-bottom: 10px;
font-size: 0.7em;
font-weight: bold;
color: white;
padding-left: 25px;
padding-bottom: 2px;
}

#copyLinks li.email {
background-image:url(../c/email_icon.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

#copyLinks li.download {
background-image:url(../c/download_icon.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}

If there's an IE fix for this, please give me a shout.

All help greatly appreciated.

Neophyte

[4css]

try using this: in your li styles. see if it helps you out.

#copyLinks li{ list-style-position: inside; }

Another suggestion so that you can understand lists better is to do a search and study the different sites that show you how to build a list with css. There are tons of them out there.

List a matic is a term to use, a fabulous site for learning how to style all sorts of lists.

Hope this helps.

[doodlebee]

A question - the UL list, is it located within a floated div that's been relatively positioned?

This sounds like the IE bug. (There's a fairly famous IE bug where, if you apply a background image/color to a list element that's located inside a floated element, and that floated div is relatively positioned (possibly so you can absolutely position something witin it), the background will not show up in IE. Sometimes, if you refresh the page it will, but for the most part it's a no-go).

There's several ways around it:

1) add this to your styleshete:

ul, ol, dl {position: relative; }

2) Float the list itself.

3)Declare display: inline; on the list. (Works on <dl>s).

4) Declare any dimension on the lists.

5) Placing a comment tag before the first disappearing element will fix it but subsequent lists will still have problems.

HTH!

[londrum]

i remember having that problem once. i solved it by just changing the URL. for some bizarre reason that seemed to fix it.
so instead of using

../c/email_icon.jpg

try using

/c/email_icon.jpg

of course, that will only work if you are viewing your pages through a server, and c/ is off the root.

[neophyte]

Thanks for everyone who weighed in on this!

DoodleBee, ul {position: relative; } on #copyLinks did the trick!

Thanks!

Neophyte

[jumpenjuhosaphat]

Great, that worked for me too (position:relative). One thing that I found is that in IE 6, the elements -- in my case, a background image and a border -- don't show up when you refresh a page, but when you cover the browser up, for instance, bring another window in front of it, and then you view IE 6 again, the elements will magically appear.