+- Web Design Forum HTML CSS JavaScript PHP Graphic Design SEO forum (http://www.webdesignforum.com.au)
+-- Forum: Web and Graphic Design (/forumdisplay.php?fid=1)
+--- Forum: Graphic Design (/forumdisplay.php?fid=5)
+--- Thread: list background image problem (/showthread.php?tid=114)
list background image problem - justinOrel - 01-12-2011 09:50 AM
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>
RE: list background image problem - displaybanner - 01-15-2012 03:23 AM
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.
RE: list background image problem - hairtransplant - 01-18-2012 08:00 PM
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.
RE: list background image problem - lennonrowen - 09-08-2012 10:06 PM
Do you have a link as it's hard to debug without images etc?