Remove Underlines

[TCH-Thomas]

Im looking for a script to remove the underlines on the links in Netscape, Mozilla, Firefox and so on.

So far i have been using this

><STYLE> 
<!-- 
a:hover {color: #FFFFFF}
U {text-decoration: none} 
--> 
</STYLE>

But it only removes the underlines in I.E.

 

Anyone having any suggestions?

[kaseytraeger]

Thomas,

 

What you are trying to do in your CSS code is to remove the underline property from the <u> tag. It kind of defeats the purpose, and may not even be allowed because the core definition/behavior of the <u> tag is to underline text. IE is very buggy and doesn't always follow CSS rules correctly, which may explain why it's obliging by removing the underlines for you. Truly standards-compliant browsers may not allow a base element like <u> to be redefined in this way.

 

However, the good news is that because you are only concerned with removing the underline on hyperlinks, you just tell CSS to remove underline from all anchor links, not from the <u> tag. To do that, you only need one line of CSS properties.

><style>
<!--
a { text-decoration: none; }
// -->
</style>

I believe that should work with all anchor links. However, you could also try this:

><style>
<!--
a, a:link, a:hover, a:active, a:visited { text-decoration: none;}
//-->
</style>

 

Good luck!

[TCH-Thomas]

Thanks Kasey

However, those 2 didnt work for me. Might be that i use CuteSite builder.

[kaseytraeger]

Thomas,

 

Will you please post what page(s) you're working with and a URL to your style sheet? I'll take a look at it and see what's going on.

[TCH-Thomas]

Thanks for the offer Kasey. If you wanna have a look, a good example is my site.

However there is no css-files/urls for me to publish.

CSB is a WYSIWYG-program in which i can insert scripts like above but it does not contain any "outside" css files (in lack of words).

[runninghorse]

><style>
<!--
a { text-decoration: none; }
// -->
</style>

Close, but you also have to add the hover decoration, so when the rollover with the mouse occurs, nothing shows up (unless you want it to). Therefore it should be:

><style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>

 

 

Ramsey

[kaseytraeger]

Thomas,

 

Thank you for the link to the page in question. I just downloaded your code and ran a simple test.

 

I modified your code like this:

><STYLE>
<!--
/*a:hover {color: #777777}
U {text-decoration: none}*/
a {
text-decoration: none;}
-->
</STYLE>

and added the following html to the body of your page as a test. I've kept a lot of your html code as reference so you an see where I added mine. Just look for the commented section in your code to find what I did...

><img name='awmMenuPathImg-Tompasworld_sub' id='awmMenuPathImg-Tompasworld_sub' src='./awmmenupath.gif' alt=''><script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='520'; awmAltUrl='';</script><script src='Tompasworld_sub.js' language='JavaScript1.2' type='text/javascript'></script><script type='text/javascript'>awmBuildMenu();</script>

<div>
               <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="75" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0"
>
                   <tR>
                       <tD  VALIGN=TOP HEIGHT= 16  WIDTH="75"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="16" ALIGN="bottom" WIDTH="75" HSPACE="0" VSPACE="0"></tD>
</tR>
</TABLE></div>
<DIV ALIGN="LEFT"></DIV>
<div>

<!-- THOMAS, HERE IS WHAT I ADDED TO TEST THE CSS STYLE RULE -->
<div>
<a href="">Hello world</a>
</div>

<!-- END OF MY TEST -->
               <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="767" BORDERCOLORLIGHT="#BBBBBB" BORDERCOLORDARK="#EEEEEE" FRAME="VOID" RULES="COLS" HSPACE="0" VSPACE="0"
>

 

I'm using Firefox, and this worked like a champ. The link color is still purple but the link is no longer underlined, even in hover, active, or visited states.

[kaseytraeger]

><style>
<!--
a { text-decoration: none; }
// -->
</style>

Close, but you also have to add the hover decoration, so when the rollover with the mouse occurs, nothing shows up (unless you want it to). Therefore it should be:

><style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>

That's odd because it's always worked for me this way. Anyway, I just tried it on Thomas' page, and used the single line CSS rule. It worked just fine, even on the hover state. I tested it in FireFox and IE. Both seemed to display it the way Thomas described. It's odd that you've observed one behavior and I've seen another. I wonder what we're doing that's different from each other?

[TCH-Thomas]

Good news

I tried a combination with the code that runninghorse posted and

><STYLE> 
<!-- 
a:hover {color: #FFFFFF}
U {text-decoration: none} 
--> 
</STYLE>

I am not sure if both are needed but right now it seems to be what CSB needs to not show underlines in either I.E or mozilla.

 

I inserted it on another site (i was working on this one when posting). It is only inserted in right frame for now if you wanna look.

 

Thanks to everyone involved.

Edited May 1, 2004 by Jikrantz

[bellringr]

This is the code I use on my site to remove underlines:

 

<style type="text/css">

a, a:link {text-decoration: none; }

a:hover { color: #D7688E; text-decoration: none }

</style>

[borfast]

Moved to the propper forum.