CSS List background image bullets - Cross browser problem

[bradgreens]

Hi guys,

I am working on a web site for a company and have found my self hung up on some CSS Background-image Bullets
Note that I've disabled the links and the images for privacy reasons, I'm just concerned about the bullets.

They can be seen here...
Untitled Document



In Internet Explorer, the bullets are fine (I intend to shift them up a pixel or two), however, in FireFox, the bullets don't hang anywhere close to where I'd like them too. Which would be adjacent to the first line of however many lines may exist.

I've tried a few different approaches and can't get close. Here's the CSS controlling those blue bullets.

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(../images/lmm_blue-bullet.jpg);
background-repeat: no-repeat;
background-position: 12px left;
margin-left:12px;
padding: 4px 25px 0px 8px;
}

This code comes through a linked style sheet.

Thoughts? It seems to be a background-position problem, but not sure how to handle it. Anyone know a good FireFox CSS resource?

Thanks for any advice.

[PR Design]

Try Firebug. Tinker with your source and see what's what.

[bradgreens]

Thanks PR

The debugger doesn't read the ul li {background-position: 12px left} whatsoever. Whether linked or as an internal style sheet (didn't bother with inline, that would be too inefficient).

I'm going to look further into Firefox list items, and mostly consider detecting the browser and having two style sheets to select for the appropriate browser...

If anyone knows a more obvious or simpler way to handle positioning those custom bullets in Firefox, please let me know – Currently my intention is to detect for Firefox, and have a new CSS background-image with 12 white pixels above the blue dot.

[LeadMagnet]

I've come across that problem before. Your solution seems to be the best way.

[PR Design]

I've got a similar set up, but mine works fine: Services :: PR Design Web Team - Web Design, Devlopment & Maintenance In West Yorkshire

Dunno if you wanna take a look around the source. Up to you.

[Marc]

Try this:

ul li {
background: url(../images/lmm_blue-bullet.jpg) 0 11px no-repeat;
margin-left:12px;
padding: 4px 25px 0px 8px;
}

That should solve your problem.

[bradgreens]

I will do that as soon as I get home today, just curious, is their something about the shorthand CSS that FireFox likes more? Maybe I should pickup a new book, I haven't written styles for about 2 years.

[bradgreens]

It worked, looks like I should just catch up on writing cleaner CSS. Thanks

[Marc]

Originally Posted by bradgreens

It worked, looks like I should just catch up on writing cleaner CSS. Thanks

No probs, i think it was just down to your positioning.