Firefox doesn't seem to like background image in the A element

[Saz]

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:

 
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:

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!

[Saz]

Thanks for that, but you've lost me totally.

Any chance you can you explain in a little more detail? I don't really want to take this code and use it, not understanding why it works.

I'm a pain, I know. Sorry.

[drhowarddrfine]

What he's saying is this: A.menu:LINK A ? .menu class is improper syntax. Also, you can only use an id name once per page but you use it more than once. That is why you can't get it to work right.

[Saz]

Thanks guys. I understand a bit better now. Didn't realise you could only use a particular DIV once per page. Told you I was new to this!!!!!!

I'll go change my style sheet now and html now and give this a go. Fortunately I used an 'include' for the menu so I only have to change one text file!

[Saz]

Yay! It works. There were a few little bits that needed tweaking though.

The left margin was way too big, so I set a negative left-hand margin to the 'navigation li' div which did the trick for IE, but the margin in Firefox was much bigger and the top margin was bigger too so the top of the top button wasn't level with the comments box on the right. Also Firefox didn't seem to like the 100% width and wasn't showing the whole of the button. Adding this line sorted most of it out, but the top button still isn't lined up properly:

html>body #navigation li{min-width:111px;margin-top:0px;margin-bottom:10px;margin-left:-30px;}

I think I'll have to nudge the comment box down for Firefox as the page isn't balanced properly otherwise.

Thanks for the help.

[Saz]

I already have the margin and padding set to 0 in the body. Is that not the same?

[Saz]

Oh right. Ok, thanks.

[Saz]

Hmmm. Done that and it's fine (though I had to add a left margin value), only now I have another problem in FireFox. The HR's are now aligned to the left instead of centred.

[Paul O'B]

Hi Saz,

To center block level elements in good browsers you need to use margin:auto on a fixed width element.

HR {
background:#a81c9a;    
color : #A81C9A;
width : 75%;
margin:auto;
border:none;
}

Firefox uses the background-color to color the hr while ie uses color.

With your partial doctype you will be working in quirks mode in ie which means that the box model hacks in the code will be wrong. You need to use a full doctype and code in standards mode and then just cater for ie5 and 5.5. with the box model hacks (if you are worried about them). In this way ie6 uses the correct box model and doesn't need any hacks.

Full doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[Saz]

Thanks Paul. That DOCTYPE thing is new to me. I've just been going with what EditPlus includes by default. Probably doesn't help that I'm using a well old version of the program!!!!

[Saz]

I have FF version 1.5.0.7 and the site's ok in that. The font is a bit smaller and the border around the comments box thinner, but for me they're acceptable differences. Can you tell me what's out in IE7 and OP as I don't have them on my system.

[Paul O'B]

Hi,

You have a horizontal scrollbar in ie7 because you have made your #comments element wider than the parent #right.

You also need ot remove the 100% height from #outer as that will break firefox.

#outer{
	min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    /*height:100%;*/
	margin-left:126px;
	margin-right:170px;
	margin-bottom:-52px;
	color: #000000;
}
* html #outer{height:100%;margin-left:123px;margin-right:167px;}/* ie 3 pixel jog*/
#comments{
	float:right;
	width:150px;
	height:225px;
	border:2px solid #DFA3D9;
	padding:3px 3px 3px 3px;
	margin-top:10px;
    margin-right:5px;
	margin-left:5px;
}

#comments is now 170px which is the same as its parent.

[Saz]

Ahhh, I see what I've done I think. I have the comments box set to 150px with a left margin of 10px and a right margin of 5px. That's well within the 170px of the right div. But then I have the border and the 3px padding each side. I take it that all adds to the overall width?

[vgarcia]

Ahhh, I see what I've done I think. I have the comments box set to 150px with a left margin of 10px and a right margin of 5px. That's well within the 170px of the right div. But then I have the border and the 3px padding each side. I take it that all adds to the overall width?

Yes, that would make 173px if you have a 1px border. Try removing a few pixels of margin or padding to get to 170.

[Saz]

Done. Now it looks sweet. Thanks guys.