Weird css problem in Firefox

My site works well in all browsers except for Firefix. When you hover over a link it shifts everything down. I am using cufon text replacement so I am using border-bottom instead of text-decoration underline for the hover underline. My site is http://glumbouploads.com

Hi,

I can’t access the page at the moment:

Software error:

HTML::Template->new() : Cannot open included file text-link-ads.html : file not found. at Modules/HTML/Template.pm line 666.

For help, please send mail to the webmaster (root@localhost), giving this error message and the time and date of the error.

If you are adding a border-bottom on hover then that will cause a shift in the layout. You don’t really want to affect the flow at all when hovering as browsers are not required to reflow the document although most do.

Depending on your situation you could perhaps add a border by default in the current background color (or transparent if ie6 support isn’t needed) and then just change the border-color on hover and not create a reflow.

Clear your cookies from our domains. Anyways, why does this problem only affect FF?

Because browsers interpret presentation in different ways when the standards are ambiguous (and, sadly, also when they are not). I would suggest Paul’s method, too.

Hi,

It’s not helped by being in a table either which is why others are probably not reflowing becauise all cells would have to be changed.

You could add padding-bottom to the anchor and then take it away when the border is added.

e.g.


#footer table{border-collapse:collapse}/* kill extra space*/

#footer a{padding-bottom:1px}
#footer a:hover{padding-bottom:0}

When the border gets added the padding is taken away resulting in no impact to the flow.