CSS Nav Bar - Firefox Issue 1

[cdogstu99]

I have a CSS hover menu on my page here....

http://www.theauctionassistant.com

and in Explorer it looks fine but in Firefox when you over over the menu boxes only half of the box fills with color.....

here's my css code.

.section { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; font-weight: bold}
.bodyhdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: blue}
.bodytxt { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 100%; color: #333333; font-weight: normal}



A.highlight:link {color:#000000; text-decoration:none;}
A.highlight:visited {color:#000000; text-decoration:none;}
A.highlight:active {color:#000000; text-decoration:none;}
A.highlight:hover {color:#145B9C; text-decoration:none;}


a:{text-decoration:none}

img.menu1
{
background: transparent;
}
a.menu1
{
background: transparent;
}
a:hover.menu1
{
background: #2AFA01;
}

img.menu2
{
background: transparent;
}
a.menu2
{
background: transparent;
}
a:hover.menu2
{
background: #FBF805;
}

img.menu3
{
background: transparent;
}
a.menu3
{
background: transparent;
}
a:hover.menu3
{
background: #FDBE37;
}

img.menu4
{
background: transparent;
}
a.menu4
{
background: transparent;
}
a:hover.menu4
{
background: #2AFA01;
}

img.menu5
{
background: transparent;
}
a.menu5
{
background: transparent;
}
a:hover.menu5
{
background: #FBF805;
}

img.menu6
{
background: transparent;
}
a.menu6
{
background: transparent;
}
a:hover.menu6
{
background: #FDBE37;
}

.footer {color:gray; font-family:arial; font-size:10px;}
Back to top

 

[rpgfan3233]

I might have found the problem. Read the following article on CSS rollovers:

http://www.uoguelph.ca/~stuartr/articles/cssrollovers.shtml

Also, you might consider an image-replacement technique such as this:

http://wellstyled.com/css-nopreload-rollovers.html

 

[Vragabond]

a:hover.menu1
{ 
background: #FBF805;
}

is incorrect syntax. That may or may not be your problem. First you need to put the element name (a), then classname (menu1) and then pseudo class state (hover). Of course, you can omit some if you deem them unneccesary. Try this for size:

a.menu1:hover
{ 
background: #FBF805;
}

 

[cdogstu99]

Thanks guys. Vrag, tried your method first and that didn't solve it. Rpg, i tried one of your methods and still it doesn't work...here's what i did..maybe you see a problem...


.menu1 a { display:block; width:54px; background-color: #FFFFFF}
.menu1 a:hover { background-color: #2AFA01}

.menu2 a { display:block; width:90px; background-color: #FFFFFF}
.menu2 a:hover { background-color: #FBF805}

.menu3 a { display:block; width:69px; background-color: #FFFFFF}
.menu3 a:hover { background-color: #FDBE37}

.menu4 a { display:block; width:80px; background-color: #FFFFFF}
.menu4 a:hover { background-color: #2AFA01}

.menu5 a { display:block; width:80px; background-color: #FFFFFF}
.menu5 a:hover { background-color: #FBF805}

.menu6 a { display:block; width:80px; background-color: #FFFFFF}
.menu6 a:hover { background-color: #FDBE37}


and here's my html:
<table width=720 align="center" cellspacing="4" cellpadding="4" border="0">
<tr>
<td align="center"> <img src="

http://www.theauctionassistant.com/images/auction_logo.gif"

align="center" alt="The Auction Assistant"></td>
<td valign="bottom" align="left"> <a href="index.html" class="menu1"><IMG SRC="

http://www.theauctionassistant.com/images/menu_01.gif"

border="0" ALT="The Auction Assistant"></a>

<a class="menu2" href="about_us.html"><IMG SRC="

http://www.theauctionassistant.com/images/menu_02.gif"

border="0" ALT="How it Works?"></a>

<a class="menu3" href="what_sells.html"><IMG SRC="

http://www.theauctionassistant.com/images/menu_03.gif"

border="0" ALT="What Sells on Ebay"></a>

<a class="menu4" href="our_auctions.html"><IMG SRC="

http://www.theauctionassistant.com/images/menu_04.gif"

border="0" ALT="Our Auctions"></a>

<a class="menu5" href="pricing.html"><IMG SRC="

http://www.theauctionassistant.com/images/menu_05.gif"

border="0" ALT="The Auction Assistant Pricing"></a>

<a class="menu6" href="contact.html"><IMG SRC="

http://www.theauctionassistant.com/images/menu_06.gif"

border="0" ALT="Contact The Auction Assistant"></a> </div></td>
</tr></table>

 

[rpgfan3233]

Try this -

CSS:

td#menu a {
float: left;
display: block;
background-color: #fff;
}

td#menu a.menu1 { width: 54px; }
td#menu a.menu1:hover, td#menu a.menu4:hover { background-color: #2afa01; }

td#menu a.menu2 { width: 90px; }
td#menu a.menu2:hover, td#menu a.menu5:hover { background-color: #fbf805; }

td#menu a.menu3 { width: 69px; }
td#menu a.menu3:hover, td#menu a.menu6:hover { background-color: #fdbe37; }

td#menu a.menu4, td#menu a.menu5, td#menu a.menu6 { width: 80px; }

<!-- /* skipping some code */ -->

<td valign="bottom" id="menu" align="left"> <a href="index.html" class="menu1"><IMG SRC="[URL unfurl="true"]http://www.theauctionassistant.com/images/menu_01.gif"[/URL] border="0" ALT="The Auction Assistant"></a>
        
            <a class="menu2" href="about_us.html"><IMG SRC="[URL unfurl="true"]http://www.theauctionassistant.com/images/menu_02.gif"[/URL] border="0" ALT="How it Works?"></a>
    
            <a class="menu3" href="what_sells.html"><IMG SRC="[URL unfurl="true"]http://www.theauctionassistant.com/images/menu_03.gif"[/URL] border="0" ALT="What Sells on Ebay"></a>
          
            <a class="menu4" href="our_auctions.html"><IMG SRC="[URL unfurl="true"]http://www.theauctionassistant.com/images/menu_04.gif"[/URL] border="0" ALT="Our Auctions"></a>
        
            <a class="menu5" href="pricing.html"><IMG SRC="[URL unfurl="true"]http://www.theauctionassistant.com/images/menu_05.gif"[/URL] border="0" ALT="The Auction Assistant Pricing"></a>
        
            <a class="menu6" href="contact.html"><IMG SRC="[URL unfurl="true"]http://www.theauctionassistant.com/images/menu_06.gif"[/URL] border="0"  ALT="Contact The Auction Assistant"></a></td>

That should work.

 

[cdogstu99]

rpg ...worked perfectly ..thanx for the help ....

 

[rpgfan3233]

No problem.