Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox anchor underline won't go away.

1:49 pm on Jul 1, 2007 (gmt 0)

10+ Year Member

I am using a:hover styling to create a 'popup' message for my command buttons on a form. In IE I can get rid of the underline in the popped up text but in Firefox the underlines won't go away, even though the actual anchor text doesn't show an anchor.

Here are the styles:

div#links a span {display: none;
text-decoration : none;


div#links a:hover span {
display: block;
position: absolute; top: 10px; right: 10px; width: 300px;
padding: 5px; margin: 10px; z-index: 100;
color: blue; background: #FFFFCC;
text-decoration : none;
font: 12px Verdana, sans-serif; text-align: left;

and the HTML code:

<div id="links">
<a href='/help.html'>The Anchor<span>The popup text</span></a>";

The popup text is a very nice way of giving command specific help but it looks really ugly with the underline. Firefox does support p:hover which pops up without the underline but IE does not support that so I suppose I could change the code based on the browser but that is a bit of a kludge.

12:09 pm on Jul 2, 2007 (gmt 0)

5+ Year Member


I'm not too sure if I understand your question, and the code you supplied is a bit flaky, but try this cross browser solutions ;)

#links a {position:relative; border-bottom:1px dotted #0C4DC4; text-decoration:none}
#links a:hover {border-bottom:1px dotted #A11B0C}
#links a span {display:none; border:none;}
#links a:hover span {border:1px solid #fff; padding:3px; display:block; position:absolute; top:1em; left:0; background:#C5DDF4; color:#6B5450;width:210px; display:block}

<div id="links">
<a href="/help.html">The Anchor<span>The popup text</span></a> and some inline text

hope this helps!

1:17 pm on Jul 3, 2007 (gmt 0)

10+ Year Member

Thanks very much,

It almost worked, just a little problem with it positioning wrong I got it to work fine now.

I forgot to put in my original post that all the a tags were enclosed in a 'containing block' so that the absolute top and right attributes set the display location to the right of where the command buttons were.

div.cmdbox {
position: relative; top: 10px; left: 10px;
display: block;
width: 900px;
height: 200 px;
padding:0 300px 0 0 ;
border-style : solid;
text-decoration : none;

what it need was the styles

#links a {border-bottom:1px dotted #0C4DC4; text-decoration:none}
#links a:hover {border-bottom:1px dotted #A11B0C}

that you gave me, but I had to remove the

'position:relative;' from

#links a {position:relative; border-bottom:1px dotted #0C4DC4; text-decoration:none}

as that caused the a block to become the 'containing block' for the div#links a span.

From 'brainjar'

The containing block of an absolutely positioned element is defined a little differently than it is for other elements. The containing block for an absolutely positioned element is established by its closest, positioned ancestor. That is, the nearest element outside it that has a position of absolute, relative or fixed. If there is no such ancestor element, the initial containing block (the browser window) is used.

Took me quite a while to find that out.

My other

div#links a span
div#links a:hover span

elements worked fine.