Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts

    text display anomoly

    I have a little piece of text in HTML code which - thanks to a large external .js routine that I can't change - is always underlined because it is a link.

    But I want to make only the first part of this text a link and "unlink" the remaining text.

    Code:
    <a href="#">Messages<span style='color:black;font-style:italic;text-decoration:none;cursor:default'> (enrolled only)</span></a>
    To simulate the overall link, I have added the <a href="#">...</a> tag.

    The problem is that it displays well in IE, but in the other browsers, the text-decoration: none in the span is effectively ignored.

    How can I make it display exactly as in does in IE in FF, Chrome, and Safari etc?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The trick is to remove the text-decoration for the a tag and only apply it when required. Using your example this becomes:

    Code:
    <a href="#" style="text-decoration:none"><span style="text-decoration:underline">Messages</span><span style='color:black;font-style:italic;cursor:default'> (enrolled only)</span></a>

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    You can use inline CSS for the link or add the CSS style for the link as an id on an external CSS. Additionally...

    You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

    * link - this is a link that has not been used, nor is a mouse pointer hovering over it
    * visited - this is a link that has been used before, but has no mouse on it
    * hover - this is a link currently has a mouse pointer hovering over it/on it
    * active - this is a link that is in the process of being clicked

    Using CSS you can make a different look for each one of these states:
    Code:
    a:link {
    color:#006;
    text-decoration:none;
    cursor:pointer;
    }
    
    a:visited {
    color:#369;
    }
    
    a:hover {
    color:#f60;
    text-decoration:underline;
    }
    
    a:focus {
    outline: none; /* remove the dotted outline added by Firefox */
    }
    
    a:active {
    color:#fc9;
    cursor:wait;
    }
    
    a:link {color: #090;}
    a:visited {color: #999;}
    a:hover {color: #333;}
    a:focus {color: #333;}
    a:active {color: #090;}
    Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

    Pseudo Classes

    You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

    You can do this in the following fashion:

    Code:
    #pseudo_content a:link {color: #090;}
    #pseudo_content a:visited {color: #999;}
    #pseudo_content a:hover {color: #333;}
    #pseudo_content a:focus {color: #333;}
    #pseudo_content a:active {color: #090;}
    Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

    Then for the links in a column you could use the following:

    Code:
    #pseudo_column a:link {color: #090;}
    #pseudo_column a:visited {color: #999;}
    #pseudo_column a:hover {color: #333;}
    #pseudo_column a:focus {color: #333;}
    #pseudo_column a:active {color: #090;}
    Once again, this assumes the name of the column division, just change the name to match yours.

    This same method can be accomplished by declaring a class instead of an id.

    Code:
    a.pseudo_column:link {color: #090;}
    a.pseudo_column:visited {color: #999;}
    a.pseudo_column:hover {color: #333;}
    a.pseudo_column:focus {color: #333;}
    a.pseudo_column:active {color: #090;}
    Though in this case you will need to add a class to each link

    Code:
    <a class="pseudo_column" href="" title="">some link text</a>
    But, there is still yet an easier way

    Code:
    .pseudo_column a:link {color: #090;}
    .pseudo_column a:visited {color: #999;}
    .pseudo_column a:hover {color: #333;}
    .pseudo_column a:focus {color: #333;}
    .pseudo_column a:active {color: #090;}
    Then in the (X)HTML file

    Code:
    <div class="pseudo_column">
    <a href="" title="Link Description">Link Text Description</a>
    </div>
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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