Hi guys, long time no post!!!!

Thanks to Paul O'Brian's column layouts (cheers Paul ) I've finally scrapped tables and switched to using css to control everything.

Anyways, I'm creating a site for a friend, nothing fancy, just something that she can showcase her hand-made stationary on. You can see a bare-bones version of it here (no content or anything, just the basic layout: http://www.postfive.com/mandy

Everything's fine in both IE and Firefox with the exception of the rollovers (oh and Firefox doesn't want to colour the HR's but I'm not worried about that for the moment).

I will admit, it's a pretty weird combination of DIVs that I've used to place the menu, but this is all new to me and if I find something that works I go with it!!

There's a 'navigation' div which is essentially a borderless box which I've used to set the margin from the header and to the left so it matches the position of the Customer Comments box on the right.

Within that box there are a series of 'menu' divs (one for each button) which is the same height and width as the button with bottom margin to space them out.

Then, within each of the 'menu' divs is the link. The CSS looks like this:
Code:
 
A.menu:LINK {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_out.gif); background-repeat : no-repeat; }
A.menu:VISITED {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_out.gif); background-repeat : no-repeat; }
A.menu:HOVER {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_over.gif); background-repeat : no-repeat; }
A.menu:ACTIVE {width:111px; height: 28px; padding-left:5px; padding-top:5px; color : #FFFFFF; font-weight : bold; text-decoration : none; font-size : 10pt; background-image : url(images/button_over.gif); background-repeat : no-repeat; }
This works great in IE, but in Firefox it only shows as much background as there is text, not the whole image.

If you look at the site in Firefox at the moment, the menu simply displays the rollover image, achieved by adding this:
Code:
html>body #menu{padding-top:5px;padding-left:3px; background-image:url(images/button_over.gif); background-repeat:no-repeat;}
The padding is there because for some reason the text and background of the link wasn't lining up with the background image in the 'menu' div!

It's not the best solution, but it'll do for now until I can find a way to get Firefox to show the button images in the links.

I've tried searching here and on the web in general but haven't been able to find anything. Can anybody help me with this?

Oh, and please excuse the pinkness of the site. It's Mandy's favourite colour!