Results 1 to 6 of 6

Thread: Dis-functional text decoration

  1. #1
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default Dis-functional text decoration

    Controlling a link on the page as follows but do not want the link underlined.
    text-decoration: none; will not do the job..! Why and is it possible to get rid of the underline in this situation?

    Maybe if the link underline could be the same color as the text that would be easier on the eye.

    Code:
    .EngineLink { font-family: arial, univers, helvetica; font-size: 8px; color: #f48000; text-decoration: none;}
    Code:
    <SPAN CLASS="EngineLink"><b>Put Script Engine Link Here...!</b></span>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,197 Times in 3,159 Posts
    Blog Entries
    12

    Default

    Code:
    .EngineLink a { font-family: arial, univers, helvetica; font-size: 8px; color: #f48000; text-decoration: none;}
    Links are special in some ways. They have defaults that often override their containers, and depending on what values if any you may have defined for links in general on a page, those too may override styles from a given link's container. But if you (as I just did there) specify the a tag as a child of its container and style it instead, most of the time it will work. Sometimes though you have to be even more specific about it.
    Last edited by jscheuer1; 12-26-2011 at 02:30 PM. Reason: add explanation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks John,

    The result as attached image. There is nothing else on the page that has text underlined...! Does the image throw any additional light on it.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,197 Times in 3,159 Posts
    Blog Entries
    12

    Default

    Is it even an anchor link a tag? It doesn't matter if there are no other things on the page, it matters what the other styles for the page are. And it matters what the served markup is. You could try adding the !important keyword, with or without the a selector:

    Code:
    text-decoration: none !important;
    From your image, it looks like using the a selector isn't even selecting the link. But you can try that part both ways

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Tried that and no luck. Maybe I am just being pickie but the dark line seems to stand out.

    It is part of an old eCard script and I would like to provide a lightly colored link to the script authors website. The page has a .tpl extension so I will put it on the server as a html and give you a link that way. The page is the one that gets delivered as the receiving email. Link at this position.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,197 Times in 3,159 Posts
    Blog Entries
    12

    Default

    It's the markup. The a tag comes before what you showed in your post. Use the original css:

    Code:
    .EngineLink { font-family: arial, univers, helvetica; font-size: 8px; color: #f48000; text-decoration: none;}
    But change the markup from:

    Code:
    <TR><td><TD><center><A HREF="http://www.google.com"><SPAN CLASS="EngineLink"><b>Put Script Engine Link Here...!</b></span></A></center>
    to:

    Code:
    <TR><td><TD><center><A CLASS="EngineLink" HREF="http://www.google.com"><SPAN><b>Put Script Engine Link Here...!</b></span></A></center>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Webiter (12-31-2011)

Tags for this Thread

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
  •