homepage Welcome to WebmasterWorld Guest from 54.167.238.60
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Firefox anchor underline won't go away.
charlier




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

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>";
</div>

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.

 

4hero




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

Hi,

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
</div>

hope this helps!

charlier




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved