firefox not showing links properly

hi, i'm still struglling with this... my site is https://secure.vault5.com/thenoblesavage-co-uk/shop/

the links n rollovers work fine in IE but firefox severley messes with them!! i have posted my css file below, and was hoping someone may be able to explain in english where i could change the code so that it works in all browsers.... thanks in advance... this forum has saved me before and i rely upon the wise now!

BODY { color: #ffc; font: 11px Verdana, Arial, sans-serif; background-image: none; margin: 0 0 10px; padding: 0; }

.centershop { color: maroon; background-color: #ffc; padding: 0; margin: 0 auto; position: relative; text-align: left; width: 750px !important; }

TD.main, P.main { font-size: 18px; font-family: "Zapf Chancery", "Comic Sans MS", cursive; font-weight: 500; line-height: 1.5; background-color: #ffc; }

A { color: maroon; font-size: 14px; font-family: "Zapf Chancery", "Comic Sans MS", cursive; line-height: 16px; text-decoration: none; }

A:hover { color: #ffb062; font-family: "Zapf Chancery", "Comic Sans MS", cursive; text-decoration: none; }

FORM { background-color: #ffc; display: inline; }
.banners { font-family: "Zapf Chancery", "Comic Sans MS", cursive; padding: 15px; }

/HEADER CSS/

TABLE.header { color: maroon; font-family: "Zapf Chancery", "Comic Sans MS", cursive; background-image: url(../images/anotherbanner1.gif); background-repeat: no-repeat; background-color: #ffc; background-position: center bottom; border-right: 1px solid #9a9a9a; border-left: 1px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; }

TABLE.headerNavigation { background-image: url(../images/tile_back.jpg); border-right: 1px solid #9a9a9a; border-left: 1px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; width: 100% !important; }

TD.headerNavigation { position: relative; vertical-align: middle; font-family: Verdana, Arial, sans-serif; font-weight: bold; color:fuchsia; letter-spacing:1px; padding: 5px; }

TD.breadCrumb { font-weight: bold; color: maroon; font-family: "Zapf Chancery", "Comic Sans MS", cursive; padding: 3px; border-bottom: 1px dotted #9a9a9a; }

TD.headerNavigation A, TD.headerNavigation A:visited, td.footertop a { font-weight: bold; color: yellow; font-family: "Zapf Chancery", "Comic Sans MS", cursive; }

TD.headerNavigation A:hover, td.footertop a:hover { color: #a8cfff; font-family: "Zapf Chancery", "Comic Sans MS", cursive; }

TR.headerError {
background: #ff0000;
}

TD.headerError {
font-family: Verdana, Arial, sans-serif;
background: #ff0000;
color: #ffffff;
font-weight : bold;
text-align : center;
}

TR.headerInfo { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }

TD.headerInfo { font-family: Verdana, Arial, sans-serif; color: yellow; font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-align: center; }

/SIDEBOX CSS/

.column_left, .column_right, .column_single { font-family: "Zapf Chancery", "Comic Sans MS", cursive; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; padding: 2px; }

.boxText { color: yellow; font-size: 11px; line-height: 125%; }
.leftbox, .rightbox, .centerbox, .singlebox { font-size: 11px; background: #ffc; margin-bottom: 15px; border: solid 1px gray; outline-color: #ffc; }

.leftboxheading, .rightboxheading, .centerboxheading, .singleboxheading {
/background-color: #abbbd3;/
font-size: 15px; font-weight: bold; color: yellow; padding: 3px 3px 3px 5px; height: 20px; }

td.leftboxheading a, td.rightboxheading a, td.centerboxheading a, td.singleboxheading a { color: #ffffff; }

TR.leftboxheading, TR.rightboxheading, TR.centerboxheading, TR.singleboxheading { background-image: url(../images/tile_back.jpg); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }

.leftboxcontent, .rightboxcontent, .centerboxcontent, .singleboxcontent {
line-height: 125%;
padding: 4px;
border-top: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a;
}

.leftboxfooter, .rightboxfooter, .centerboxfooter, .singleboxfooter {
background-image: url(../images/tile_back.jpg);
margin-bottom: 15px;
}

.plainBox, .plainbox-description { font-family: Verdana, Arial, sans-serif; font-size: 11px; background: #ffc; padding: 0; border-style: none; }
.plainBoxHeading, TD.tableHeading {
font-size: 12px;
font-weight: bold;
padding: 11px 5px 5px;
}
.productListing-heading {
font-size: 10px;
font-weight: bold;
color: yellow;
padding: 3px;
height: 20px;
}

TD.productListing-heading{
background-image: url(../images/tile_back.jpg);
}

TD.productlisting {
border:1px solid #9a9a9a;
}

TD.productListing-data {
font-size: 10px;
padding: 5px;
}

/center main section
-----------------------------------/
TD.pageHeading, DIV.pageHeading, h1 { font-size: 18px; font-weight: 500; color: maroon; font-family: "Zapf Chancery", "Comic Sans MS", cursive; padding-top: 0; }

.center_column { padding: 8px; }
.main_page{ width: 100% !important; border-right: 1px solid #9a9a9a; border-left: 1px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; padding: 5px; }

/* footer
--------------*/

TABLE.footer { text-align: center; font-size: 10px; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; border-right: 1px solid #9a9a9a; border-left: 1px solid #9a9a9a; border-bottom: 1px solid #9a9a9a; }

TR.footertop {
background: #abbbd3;
background-image: url(../images/tile_back.jpg);
font-size: 11px;
}

TD.footertop, TD.footerbottom {
padding: 5px;
}

/miscellaneous areas
-------------------------------------/
TD.cartBox {
background: #ffc;
font-size: 10px;
padding: 3px;
border: dotted 1px #ffb062;
}

TR.productListing-odd, TR.upcomingProducts-odd {
background: #ffc;
}

TR.productListing-even, TR.upcomingProducts-even, .productsNotifications {
background: #ffc;
}

TD.productListing-data-description-odd {
background: #ffc;
font-size: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
border-bottom: 1px solid #9a9a9a;
}

TD.productListing-data-description-even {
background: #ffc;
font-size: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
border-bottom: 1px solid #9a9a9a;
}

td.pageresults a {
color: #428dff;
}

td.pageresults a:hover {
background: #FFFF33;
}

SPAN.newItemInCart {
color: #ff0000;
font-weight: bold;
}

TD.smallText, SPAN.smallText, P.smallText, td.pageresults{
font-size: 10px;
}

TD.fieldKey {
font-size: 12px;
font-weight: bold;
}

TD.fieldValue {
font-size: 12px;
}

CHECKBOX, INPUT, RADIO, SELECT {
font-size: 11px;
}

TEXTAREA {
width: 100%;
font-size: 11px;
}

.greetUser {
font-size: 12px;
padding-top: 0;
padding-bottom: 0;
}

SPAN.greetUser {
color: #f0a480;
font-weight: bold;
}

SPAN.markProductOutOfStock {
color: #c76170;
font: bold 12px Verdana, Arial, sans-serif;
}

span.normalprice {
text-decoration: line-through;
}

SPAN.productSpecialPrice, SPAN.productSalePrice, .stockWarning, span.coming {
color: #ff0000;
}

span.productSpecialPriceSale {
color: #ff0000;
text-decoration: line-through;
}

SPAN.productPriceDiscount, .inputRequirement {
font-size: 10px;
color: #FF0000;
}
.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
.moduleRowSelected { background-color: #E9F4FC; }

/* message box */

.messageBox {}
.messageStackError, .messageStackWarning, errorBox {
background-color: #ff0000;
color: #ffffff;
font-size: 10px;
padding: 4px;
border: 1px solid #9a9a9a;
}
.messageStackSuccess { background-color: #b3ffa8; padding: 2px; border: 1px solid #9a9a9a; }
.messageStackCaution { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffff00; }

/* checkout totals */
TD.ot-subtotal-Text, TD.ot-cod-fee-Text, TD.ot-total-Text, TD.ot-group-pricing-Text, TD.ot-gv-Text, TD.ot-loworderfee-Text, TD.ot-shipping-Text, TD.ot-subtotal-Text, TD.ot-tax-Text, TD.ot-coupon-Text {
font-weight: bold;
}
TD.ot-total-Amount {
font-weight: bold;
border-top: 1px solid #9a9a9a;
}
TD.ot-subtotal-Amount, TD.ot-cod-fee-Amount, TD.ot-group-pricing-Amount, TD.ot-gv-Amount, TD.ot-loworderfee-Amount, TD.ot-shipping-Amount, TD.ot-subtotal-Amount, TD.ot-tax-Amount, TD.ot-coupon-Amount {}

/* product_info attribute comments */

.ProductInfoComments, TD.ProductInfoComments, SPAN.ProductInfoComments {
color: #ff0000;
font-size: 10px;
text-align : left;
font-weight: bold;
padding-top: 6px;
padding-bottom: 6px;
border-top: 1px solid #9a9a9a;
}

/* General alert span class */
TD.alert, SPAN.alert {
color: #FF0000;
font-weight: bold;
}

/* General alert span class */
TD.alertBlack, SPAN.alertBlack {
color: #000000;
font-weight: bold;
}

/* popup tables */
TABLE.popupattributeqty, TABLE.popupcouponhelp, TABLE.popupcvvhelp, TABLE.popupimage, TABLE.popupimageadditional, TABLE.popupsearchhelp, TABLE.popupshippingestimator, TABLE.popupinfoshoppingcart {
background-color: #ffffff;
margin: 6px;
padding: 6px;
font: 11px Verdana, Arial, sans-serif;
}

/* categories_description */
TABLE.categoriesdescription {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
background: #D0D0D0;
border:1px solid #9a9a9a;
}

TD.categoriesdescription {
font-size: 11px;
line-height: 1px;
}

/* categories box parent and child categories */
A.category-top {
color: maroon;
text-decoration: none;
padding: 10px;
}
A.category-links { color: gray; text-decoration: none; }
A.category-subs, A.category-products {
color: #FF0000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}

/* attribute images table /
TABLE.products-attributes-images {
/ width: 100%; /
/ border: 1px solid #9a9a9a; */
float: left;
padding: 2px;
}

Strange!
When I click on hats in Categories, I get Mens Hoodies
Even I would like to know the cause of this!
San

Firstly, no need to post all that CSS. It cloggs up the forum and I doubt anybody will ever look at it, as it's much easier to see what's happening by digging through the live site.

The only rollover issue that I can see is with the categories sidebox and in fact it#s Internet Explorer that's getting it wrong. OK, I know that it doesn't look that way to you, but Firefox and Opera are correctly interpreting your CSS, IE (not unusually) is screwing up.

The "problem" from your perspective, is that by styling a.category-top you are making a very specific statement that overrides styling for all links with class category-top even when in hover state. If you make this a little more general by changing it to .category-top a, then your default hover state styling will not be overridden, i.e. you will get the effect you want.

superprg:

Strange!
When I click on hats in Categories, I get Mens Hoodies
Even I would like to know the cause of this!
SanThis is happening because of the
padding: 10px;in the a.category-top styling. This is adding padding above and below which is ignored by the browsers for layout purposes (as these links are inline), but not when calculating their size, so they have whopping great vertical overlaps and when you hover, the browsers are not always sure which one you're actually hovering over. This should be changed to> padding-left: 10px;