PDA

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


mangofreak
08-31-2012, 03: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{
margin-left:10px;
padding:0;
list-style-type:none;

}
.go-list li{
background:url(../images/gobullt1.gif);
background-repeat:no-repeat;
background-position:left top;
background-position:0 20%;
background-color:transparent;
padding-left:35px;
list-style-type:none;
display:block;}

<ul class="go-list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>


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

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

Can you post the whole thing somewhere online.

gentleone
08-31-2012, 06: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.

mangofreak
08-31-2012, 08: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:

http://jcacreative.com/test/list-test.html

jmichae3
09-01-2012, 08:01 AM
cool book: the css pocket guide.
p.172
list-style-image:url(blah);

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

mangofreak
09-04-2012, 02: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.

jmichae3
09-04-2012, 04: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.

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

mangofreak
09-04-2012, 04: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...