Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
list background image problem
01-12-2011, 09:50 AM
Post: #1
list background image problem
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>

Web Designers Directory | Advertise Web Design Business | Website Design
Find all posts by this user
Quote this message in a reply
01-15-2012, 03:23 AM
Post: #2
RE: list background image problem
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.

cash for old carstow truck services perth|salvage cars perth
Visit this user's website Find all posts by this user
Quote this message in a reply
01-18-2012, 08:00 PM
Post: #3
RE: list background image problem
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.

Hair Transplant Pakistan
Find all posts by this user
Quote this message in a reply
09-08-2012, 10:06 PM
Post: #4
RE: list background image problem
Do you have a link as it's hard to debug without images etc?

Magento Development India
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 2 Guest(s)