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(<!-- m --><a class="postlink" href="http://dev.casac.co.uk/img/bullet.gif">http://dev.casac.co.uk/img/bullet.gif</a><!-- m -->) ;
background-repeat: no-repeat;
background-position: 0px 2px;
}
It works fine in firefox, but I am having problems in Explorer. The following page:
<!-- m --><a class="postlink" href="http://dev.casac.co.uk/?cl=section&op=display_section_area&sid=26">http://dev.casac.co.uk/?cl=section&op=d ... rea&sid=26</a><!-- m -->
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.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.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?Did you add the code I posted above?Yes. I got the code from somewhere else:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/vertical05.htm">http://css.maxdesign.com.au/listamatic/vertical05.htm</a><!-- m -->
So the code is fairly robust and I have used it elsewhere without any problems. See:
<!-- m --><a class="postlink" href="http://www.casac.co.uk/?cl=section&op=display_section_area&sid=5">http://www.casac.co.uk/?cl=section&op=d ... area&sid=5</a><!-- m -->
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.Look at this in IE : <!-- m --><a class="postlink" href="http://bonrouge.com/test/casac.htm">http://bonrouge.com/test/casac.htm</a><!-- m -->
Do you see what I see?That is what I see in firefox and is the desired effect.
When I view it in explorer 6 I see the following:
<!-- m --><a class="postlink" href="http://dev.casac.co.uk/screenshot.jpg">http://dev.casac.co.uk/screenshot.jpg</a><!-- m -->
Note the missing bullet pointsThat'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 : <!-- m --><a class="postlink" href="http://bonrouge.com/test/casac.jpgTHanks">http://bonrouge.com/test/casac.jpgTHanks</a><!-- m --> 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.No probs.
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(<!-- m --><a class="postlink" href="http://dev.casac.co.uk/img/bullet.gif">http://dev.casac.co.uk/img/bullet.gif</a><!-- m -->) ;
background-repeat: no-repeat;
background-position: 0px 2px;
}
It works fine in firefox, but I am having problems in Explorer. The following page:
<!-- m --><a class="postlink" href="http://dev.casac.co.uk/?cl=section&op=display_section_area&sid=26">http://dev.casac.co.uk/?cl=section&op=d ... rea&sid=26</a><!-- m -->
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.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.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?Did you add the code I posted above?Yes. I got the code from somewhere else:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/vertical05.htm">http://css.maxdesign.com.au/listamatic/vertical05.htm</a><!-- m -->
So the code is fairly robust and I have used it elsewhere without any problems. See:
<!-- m --><a class="postlink" href="http://www.casac.co.uk/?cl=section&op=display_section_area&sid=5">http://www.casac.co.uk/?cl=section&op=d ... area&sid=5</a><!-- m -->
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.Look at this in IE : <!-- m --><a class="postlink" href="http://bonrouge.com/test/casac.htm">http://bonrouge.com/test/casac.htm</a><!-- m -->
Do you see what I see?That is what I see in firefox and is the desired effect.
When I view it in explorer 6 I see the following:
<!-- m --><a class="postlink" href="http://dev.casac.co.uk/screenshot.jpg">http://dev.casac.co.uk/screenshot.jpg</a><!-- m -->
Note the missing bullet pointsThat'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 : <!-- m --><a class="postlink" href="http://bonrouge.com/test/casac.jpgTHanks">http://bonrouge.com/test/casac.jpgTHanks</a><!-- m --> 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.No probs.