Click to See Complete Forum and Search --> : menu bg images not showing up


CodeMama
08-10-2009, 12:00 PM
can't seem to get my bg images to show up for my menu:

my css:
.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: url("inc/bluetab.gif") top left repeat-x; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{
color: #2d2b2b;
}

.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.bluetabs li.selected {

}

.bluetabs li.selected a { /*selected main tab style */
background-image: url("inc/bluetabactive.gif");
border-bottom-color: white;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}


and my html menu:
<!---tabbed menu--->
<div id="bluemenu" class="bluetabs">
<ul>
<li class="bluetabs"><a href="browse.php" onclick="return false">Browse Restaurants</a></li>
<li class="bluetabs"><a href="search.php" onclick="return false">Search Inspections</a></li>
<li class="bluetabs"><a href="restaurants.php?show=all" onclick="return false">Recent Inspections</a></li>
<li class="bluetabs"><a href="http://www.news-leader.com/apps/pbcs.dll/section?Category=DATA" onclick="return false">Back to Data-Leader</a></li>
</ul>
</div>

infinityspiral
08-11-2009, 11:49 PM
Try this:
.bluetabs li a{
display:block;
line-height:20px;
text-decoration: none;
padding: 0 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: url("inc/bluetab.gif") top left repeat-x; /*THEME CHANGE HERE*/
}

It might just be that the link is still inline, which may/may not show the background. If this works you can adjust the line-height to be appropriate I just put a placeholder numbe in there to get you started.

ptejada
08-12-2009, 04:38 PM
Try to add the image to <li> tags

.bluetabs li {
background: url("inc/bluetab.gif") top left repeat-x; /*THEME CHANGE HERE*/
}