Flickering links on hover in Firefox

[medic325]

Without being able to link to the offending page, I'm not sure how to best demonstrate this, so please bare with me.

I'm designing a site that has links with the following CSS:

a {
text-decoration: none;
border-bottom: 1px dotted #000;
color: #000;
}
a:hover {
border-bottom: 0;
background: #000;
color: #fff;
}

For whatever reason, if you hover over the link in a certain spot (appears to be 1px above the border), the background color flickers off and on continuously, at a seizure-inducing rate. Doesn't happen in IE.

Any idea what in the world is causing this? I didn't find much that seemed relevant in the search. Thanks!

[doodlebee]

The code you have here shouldn't be doing that. It has to be something else in your code. Can you please post the full CSS and HTML for us? Then we can see where the conflict lies.

[birdbrain]

Hi there medic325,

and a warm welcome to these forums. ;)

...so please bare with me.

Right, I have removed all my garments and can now see your problem clearly. :o
This looks like a Firefox bug to me.
You might like to check it out at the MozillaZine Forum...

Firefox Bugs [forums.mozillazine.org]

birdbrain

[medic325]

The code you have here shouldn't be doing that. It has to be something else in your code. Can you please post the full CSS and HTML for us? Then we can see where the conflict lies.

Actually, as a test case, I created a page with only one link and the above CSS. It demonstrated the same behavior.

Firefox version is 1.5.0.3.

Weird.

[bedlam]

Any idea what in the world is causing this?

A theory anyhow--

Your first rule specifies a bottom border, right? Then the second rule specifies that, on the hover state, there should be NO border.

If you break down what's happening, I think you'll find that your rules have the effect of moving the link down one pixel on hover.

But, if you're holding the mouse pointer at the absolute uppermost part of the link, and the link moves down one pixel on hover, then when you hover at the very top of the link, your link moves out from under the mouse pointer.

This problem is exacerbated by the fact that, once the mouse pointer is no longer over the link (if you have no longer moved the mouse), the border reappears and moves the link back under the mouse pointer!

This behaviour is, in a way predictable, and it's certainly bug-like, but it's easy to fix. Provided you have a consistently coloured background, you could put a border in a matching colour on the link, or you could use a background image to make your link decoration in the normal state.

-b

[birdbrain]

Hi there medic325,

I have replaced my garments and found a cure. ;)

a {
text-decoration: none;
border-bottom: 1px dotted #000;
color: #000;
}
a:hover {
border-bottom: 0;
padding-bottom:1px;
background: #000;
color: #fff;
}

birdbrain

[medic325]

I have replaced my garments and found a cure. ;)

I find I usually work better while clothed, too. :P So please bear with me... :)

Thanks for the help, everyone. The padding suggestion seems to work. The odd thing is I don't recall ever having this problem before... but, ah, who knows.

[birdbrain]

Hi there medic 325,

I find I usually work better while clothed,too.

For programming this is probably true but there are certain tasks that come to mind.....

;) ;) ;)

birdbrain