PDA

View Full Version : Removing link underlining



Ubernoober
11-09-2005, 09:28 PM
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
11-09-2005, 10:09 PM
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
11-09-2005, 10:24 PM
Above and Beyond. Thank you very much.....

sleipner
11-10-2005, 03:49 PM
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
02-02-2009, 04:55 AM
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
02-02-2009, 08:15 AM
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
02-02-2009, 08:43 AM
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
02-02-2009, 08:48 AM
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.