Getting rid of text decoration?

**Ciced** · Jan 13, 2002, 14:52

I've been using a JavaScript to make some links fade to a colour on mouseover but I want to get rid of the underline on the link.

Normally I would use CSS but the JS file is taking up the class slot.

So is there a way of getting rid of the underline in the JS file?

**UTGraeme** · Jan 13, 2002, 15:49

you could just put this in the head tag:

Code:

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

**Ciced** · Jan 13, 2002, 16:14

I have a nav table that I don't want the decoration and is using the fade class.
And I have a table class that I want the decoration still there.

If I put that in a:hover then all the links won't have the decoration.

**brokenvoice** · Jan 13, 2002, 18:01

Ok, I'm not 100% certain this will work, but I am 97%. I'm too tired to code up a toy version to test it. But give this a try:

First put your nav table in a div and give that div a unique id:

Code:

<div id="navtable">
    <table...>
    </table>
</div>

Then in your JS file (with the fade functions) you want to type:

Code:

window.onload = function(e)
{
    var navDiv = document.getElementById("navtable");
    navDiv.style.textDecoration = "none";
}

It should work, give it a try anyway.

BTW, this will only work in browsers that support DOM level 1 (IE5+, NS6.x, Opera5+ etc.). You could probably get it to work in other browsers by using document.all and document.layers and all that, but I only work with standard code. This ought to get you started though.

**Ciced** · Jan 14, 2002, 01:38

nope.

**Maelstrom** · Jan 14, 2002, 02:49

Originally posted by Ciced
nope.

Do you have a link...This is an incredibly easy trick and all of the above should have worked. Do you have something we can look at it. ??

**Ciced** · Jan 14, 2002, 12:28

http://68.39.178.147/gamers-online/news.php
That's the site so you can view the source.

http://68.39.178.147/gamers-online/fade.js
That's the fade script.

Any help appreciated.

**Maelstrom** · Jan 14, 2002, 18:55

Originally posted by Ciced
http://68.39.178.147/gamers-online/news.php
That's the site so you can view the source.

http://68.39.178.147/gamers-online/fade.js
That's the fade script.

Any help appreciated.

I like the fade but it really has nothing to do with this unless it has some css built in.

Here is your code

Code:

<style type="text/css">
<!--
a:link { font-family: Verdana, Arial; font-size: 12px;}
a:hover { font-family: Verdana, Arial; font-size: 12px; color:#FFFFFF;}
A:visited { font-family: Verdana, Arial; font-size: 12px;}

Change it to this

Code:

<style type="text/css">
<!--
a {
   text-decoration:none;
}
a:link { 
   font-family: Verdana, Arial;   
   font-size: 12px;
}
a:hover { 
    font-family: Verdana, Arial; 
    font-size: 12px; color:#FFFFFF;
}
a:visited { 
    font-family: Verdana, Arial; 
    font-size: 12px;
}

The indents have nothing to do with it working. Its just easier to view.

From what I could see you had to have your links 'classed' fade. So you have a 'font' class which was doing nothing. The above should make all <a> tags with no underline.

BTw I like the look of the site.

**Ciced** · Jan 15, 2002, 04:15

I was going to do that but I need the news part to have the underline on links.
The font one was just an experiment I tried but forgot to delete it and thanks for the compliment.

Maybe I should repost this in CSS help and find out if there is anyway of reapplying the text decoration?

**Maelstrom** · Jan 15, 2002, 05:32

Originally posted by Ciced
I was going to do that but I need the news part to have the underline on links.
The font one was just an experiment I tried but forgot to delete it and thanks for the compliment.

Maybe I should repost this in CSS help and find out if there is anyway of reapplying the text decoration?

I have a feeling you will get the same help there. Although since you need two different types of links try

a{
text-decoration: none;
}
a.news{
test-decoration: underline;
}

Then in any links you want with an underline put

<a class="news" href="">link</a>

**Ciced** · Jan 15, 2002, 06:05

I was hoping I wouldn't have to do that but It's not a problem. Thanks for the help.

BTW what does the a do in the a.news

**oblig** · Jan 15, 2002, 06:36

It specifies that the class is a link (<A>), and can only be used for links.

**Ciced** · Jan 15, 2002, 09:19

Thanks.

BTW I seem to having some CSS bug.
http://68.39.178.147/gamers-online/news.php
It says I have an error at where the --> is which closes the CSS styles which leads me to think that I messed up the CSS somewhere. But I can't find it.

**Maelstrom** · Jan 15, 2002, 10:57

Originally posted by Ciced
Thanks.

BTW I seem to having some CSS bug.
http://68.39.178.147/gamers-online/news.php
It says I have an error at where the --> is which closes the CSS styles which leads me to think that I messed up the CSS somewhere. But I can't find it.

I didn't find any bad css errors. But somewhere you may want to look on css for tutorials is

www.w3schools.com

They have an excellent tutorial on css2 AND a built in quiz as well as an excellent reference. It will explain everything about css. Best of luck and I am happy to see it working now

**Ciced** · Jan 15, 2002, 11:30

Thanks for the link. I'll take a peek now.

But now I have another problem.

When you have already clicked the link it underlines becuase of the a:visited style. So I put a text-decoration:none in the visted stlyle but now all the visited links on the news page dissapear aswell.

Is it possible to do the nounderline stlye in JS because I think that's the only way?

User Tag List

Thread: Getting rid of text decoration?

Thread Tools

Display

Getting rid of text decoration?

Bookmarks

Bookmarks

Posting Permissions