Click to See Complete Forum and Search --> : Problems with background image for li tag in Explorer


wastlinger
05-08-2005, 07:26 AM
I use the following css code for bullet lists:

ul {
font-size: 0.8em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;

}

li {
margin: 5px;
padding-left: 20px;
background-image: url(http://dev.casac.co.uk/img/bullet.gif) ;
background-repeat: no-repeat;
background-position: 0px 2px;
}

It works fine in firefox, but I am having problems in Explorer. The following page:
http://dev.casac.co.uk/?cl=section&op=display_section_area&sid=26

should show seven bullet points using the background image (a white square with a black border with a black dot in the middle).

I have validated the CSS and the HTML. CSS validates, HTML does except for some entity reference issues caused by hyperlinks.

Why is this happening. Any help would be much appreciated. Thanks in advance.

BonRouge
05-08-2005, 07:52 AM
li {
position:relative;
}

Your validation errors are caused by the ampersands in the urls - you should be able to fix it by replacing '&' with '&'.

I hope this helps.

wastlinger
05-08-2005, 07:57 AM
The problem I am trying to fix is getting explorer to display the background images as the bullet points. Do you have any idea what might be causing this problem?

BonRouge
05-08-2005, 08:00 AM
Did you add the code I posted above?

wastlinger
05-08-2005, 08:17 AM
Yes. I got the code from somewhere else:

http://css.maxdesign.com.au/listamatic/vertical05.htm

So the code is fairly robust and I have used it elsewhere without any problems. See:
http://www.casac.co.uk/?cl=section&op=display_section_area&sid=5

I am pretty sure that the problem lies elsewhere. I just cannot think of any other possible reasons for it not working. I have spent quite a lot time trying to work it out but have pretty much exhausted my limited knowledge.

BonRouge
05-08-2005, 08:23 AM
Look at this in IE : http://bonrouge.com/test/casac.htm

Do you see what I see?

wastlinger
05-08-2005, 08:31 AM
That is what I see in firefox and is the desired effect.

When I view it in explorer 6 I see the following:
http://dev.casac.co.uk/screenshot.jpg

Note the missing bullet points

BonRouge
05-08-2005, 08:41 AM
That's what I see on your site in IE too, but when I look at your page on my server (after I added the code I posted above) I see this : http://bonrouge.com/test/casac.jpg

wastlinger
05-08-2005, 08:55 AM
THanks for your patience. Your code has made the difference and results in the desired effect. I am not quite sure why it works without the extra positioning on the other site but thanks again and for perservering in spite of my stubborness.

BonRouge
05-08-2005, 08:56 AM
No probs.