View Full Version : styling a list with an image as bullet

08-31-2012, 04:55 AM
hey guys,
it's been a while...Cheers

I need a little help guys. I am trying to style a list that uses an image as a bullet. All works fine in Chrome, Firefox and Opera, but IE is not helping at all.

/* styles */


.go-list li{
background-position:left top;
background-position:0 20%;

<ul class="go-list">

The problem is that the image is showing above the text at least 4px off

It aligns properly is I add a break and a second line to the list element.

the image I'm using is 28 wide by 10 high.

Any ideas how I can solve this. See attachment for a visual

08-31-2012, 03:29 PM
Hi mangofreak, good to see you again!

Can you post the whole thing somewhere online.

08-31-2012, 07:27 PM
Hey mangofreak... been a while indeed. :)

I see you've declared the background-position twice. You can delete the 'left top' one and change from the other the 20% to 50%. The 50% should place the image vertically centered. You might need to add overflow: hidden as well to that CSS block, cause there is no height set.

08-31-2012, 09:44 PM
Thanks for the replies guys, Domedia and Gentleone. Yes, I am dealing with a joomla website that is using a bought template. I think the changes I am trying to do are affected by the code of the template. The CSS files has over 3000 lines of code. I have never seen something like it. I guess there is always a first time.

Getting back to my issue. Even if I clean up the code to the basics, I noticed that IE renders the bullet and the text too close together. If I try to separate them adding some padding the whole list moves.

have a look at the following:


09-01-2012, 09:01 AM
cool book: the css pocket guide.

09-01-2012, 09:02 AM
by the way, I used this in IE long ago. have not tried in IE6 - that could be tested using adobe browserlab.

09-04-2012, 03:30 AM
Sorry for the delay. Thanks again for the reply. After lengthy consideration I decided to avoid using list-style-image, because it just makes no sense and doesn't render equally in all browsers. I have opted to use image backgrounds and left the list aside for what is supposed to be used, lists.

Also, what happens if your list has various levels and long sentences that need to wrap around... my head hurts

So, thanks for your help and response.
Cheers to all.

09-04-2012, 05:11 AM
the list image replaces a bullet point. one appears before every list element like a standard bullet disc. nothing different. I am surprised you had a problem rendering list-style-image. I didn't with ie7,8 and many older versions of browsers. maybe it's the way it's rendered. you use about a 15x20 or so size image. really small.

09-04-2012, 05:13 AM
I was going to switch to drupal if I ever do another CMS. joomla was a royal headache to configure.

09-04-2012, 05:27 PM
Well, Joomla is great, I suppose if it is the core joomla and a couple of plugins. The site I'm working on has Joomla, Open Journal System, Open Conference System and Moodle, all with one integrated login, plus nearly 35 plugins, some commercial some free.

My head is about to fall off...but hey, I need to pay the bills so I just keep at it... However, Drupal is the next step as well...