list background image problem

[justinOrel]

Hi Folks,

I'm trying to get a UL to stretch the width of the page, 40 pixels high, with a transparent background. It works fine in IE7, but FF has a mind of its own.

Can anyone please help?

Ive attached the view in each browser.

Code is below, any help much appreciated.

#navigation {
width:720px;
background-color:transparent;
height:38px;
display:block;
}
#navigation li {
list-style: none;
background-color:transparent;
float: left;
}
#navigation a {
text-decoration: none;
background-color:transparent;
color: #FFFFFF;
float: left;
background-image: url(images/tabs-right.jpg);
background-position: right top;
font-size: 100%;
font-weight: bold;
text-transform: uppercase;
}
#navigation a span {
background-position: left top;
background-image: url(images/tabs-left.jpg);
background-repeat: no-repeat;
float: left;
cursor: pointer;
padding-top: 12px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 15px;
background-color:transparent;
}
#navigation a:hover, #navigation .current a {
background-position: right -50px;
color: #000000;
}
#navigation a:hover span, #navigation .current a span {
background-position: left -50px;
border-bottom: 0;
}
<div id="header">
<h1><span>Monster Metals</span></h1>

<ul id="navigation">
<li> <a href="index.php"


> <span>Home</span> </a> </li>
<li
> <a href="faq.php" > <span>FAQ</span></a> </li>

<li > <a href="products.php" > <span> Products</span> </a> </li>


<li > <a href="contact.php" class='current'> <span>Contact</span> </a> </li>
</ul>
<br style="clear:both;" />

</div>

[displaybanner]

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.

[hairtransplant]

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.

[lennonrowen]

Do you have a link as it's hard to debug without images etc?