Removing link underlining

[Ubernoober]

http://www.dynamicdrive.com/dynamicindex1/popit.htm

Is there any way to remove the link underline, so it just remains a word, yet the menus and stuff still work?

[jscheuer1]

The only links in this script that have underlines are the ones that, when hovered, launch the menus (from the demo HTML):

<a href="#" style="text-decoration:none;" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a><br>
<a href="#" style="text-decoration:none;" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">News sites</a>

Add the red inline style to each of them and they will have no underlines.

Better yet, make a new class in the style section from step1:

.llink {
text-decoration:none;
}

Then all you need to do is add the class attribute to each link:

<a href="#" class="llink" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a><br>
<a href="#" class="llink" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">News sites</a>

[Ubernoober]

Above and Beyond. Thank you very much.....

[sleipner]

also you have to make sure the link does not contain the style="underline" or anything like that in the <a> tag itself if you are using an editor that randomly does that ( as I am )

[tabogal]

Hi, I am having a problem with removing the underline when the mouse hover over it. Can anyone point out what's wrong?? Greatly appreciated...

I use 2 "a" class as one is for all links, another is only for the menu.

A:link, A:visited, A:active
{ text-decoration: none; font-weight: none; font-size: 11pt; color: #330000; font-family: Monotype Corsiva; cursor: crosshair; filter: none;}
A:hover
{ text-decoration: underline; color:#746065; font-size: 11pt; font-family: Monotype Corsiva; background-color: #fefefe; border-bottom:1px solid #746065; cursor:crosshair;}

A.tabfont:link, A.tabfont:visited, A.tabfont:active
{ text-decoration: none; font-weight: none; font-size: 22pt; color: #330000; font-family: Monotype Corsiva; cursor: crosshair; filter: none;}
A.tabfont:hover
{ text-decoration: none; color:#746065; font-size: 22pt; font-family: Monotype Corsiva; background-color: #fefefe; cursor:crosshair;}

<td BGCOLOR="white"><a href="#" class="tabfont" onMouseover="showmenu(event,linkset[0], '90px')" onMouseout="delayhidemenu()">Profile</a><br></td>

[jscheuer1]

I believe the correct order of the pseudo classes is :link :visited :focus :hover : active.* If there is any doubt, use the first method I mentioned:

<a href="#" style="text-decoration:none;" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a><br>
<a href="#" style="text-decoration:none;" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">News sites</a>

Add the red inline style to each of them and they will have no underlines.

* http://reference.sitepoint.com/css/pseudoclasses

[tabogal]

Hi, thx for your help. I've change the order but it doesn't work. I used the method you've mentioned, doesn't work either... What would be the problem??

Here's what I've done:

A.tabfont:link, A.tabfont:visited, A.tabfont:focus
{ text-decoration: none; font-weight: none; font-size: 22pt; color: #330000; font-family: Monotype Corsiva; cursor: crosshair; filter: none;}
A.tabfont:hover
{ text-decoration: none; color:#746065; font-size: 22pt; font-family: Monotype Corsiva; background-color: #fefefe; cursor:crosshair;}
A.tabfont:active
{ text-decoration: none; font-weight: none; font-size: 22pt; color: #330000; font-family: Monotype Corsiva; cursor: crosshair; filter: none;}

<td BGCOLOR="white"><a href="#" class="tabfont" style="text-decoration:none;" onMouseover="showmenu(event,linkset[0], '90px')" onMouseout="delayhidemenu()">Profile</a><br></td>

I believe the correct order of the pseudo classes is :link :visited :focus :hover : active.* If there is any doubt, use the first method I mentioned:



* http://reference.sitepoint.com/css/pseudoclasses

[jscheuer1]

Not a problem here:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
A.tabfont:link, A.tabfont:visited, A.tabfont:focus
{ text-decoration: none; font-weight: none; font-size: 22pt; color: #330000; font-family: Monotype Corsiva; cursor: crosshair; filter: none;}
A.tabfont:hover
{ text-decoration: none; color:#746065; font-size: 22pt; font-family: Monotype Corsiva; background-color: #fefefe; cursor:crosshair;}
A.tabfont:active
{ text-decoration: none; font-weight: none; font-size: 22pt; color: #330000; font-family: Monotype Corsiva; cursor: crosshair; filter: none;}
</style>


</head>
<body>
<td BGCOLOR="white"><a href="#" class="tabfont" style="text-decoration:none;" onMouseover="showmenu(event,linkset[0], '90px')" onMouseout="delayhidemenu()">Profile</a><br></td>
</body>
</html>

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.