SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Getting rid of text decoration?

    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?

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2001
    Location
    Nanaimo, BC, Canada
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could just put this in the head tag:
    Code:
    <style>
    a{text-decoration:none}
    </style>

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope.

  6. #6
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. ??
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  11. #11
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It specifies that the class is a link (<A>), and can only be used for links.

  13. #13
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  15. #15
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •