homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
h1 link without text decoration
georgeek

10+ Year Member



 
Msg#: 3387682 posted 1:12 pm on Jul 6, 2007 (gmt 0)

I have this in my style sheet:

h1 a {
text-decoration:none;
}

h1 a:visited {
text-decoration:none;
}

h1 a:hover {
text-decoration:none;
}

h1 a:active {
text-decoration:none;
}

But with the following html:

<h1><a href="http://www.example.com/">anytext</a></h1>

text decoration is still the same as for other links on the page.

What am I doing wrong please?

[edited by: SuzyUK at 9:00 pm (utc) on July 7, 2007]
[edit reason] pls use example.com [/edit]

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3387682 posted 3:19 pm on Jul 6, 2007 (gmt 0)

There doesn't look to be anything wrong with what you have there, but it sounds as if your other link styles are overriding your h1 link styles, or your h1 styles are not overriding your regular link styles.

In what order have you defined your link styles? Presumably your other link styles are defined earlier in your stylesheet? What rules (specificity) have you given your other styles?

ytswy

10+ Year Member



 
Msg#: 3387682 posted 3:28 pm on Jul 6, 2007 (gmt 0)

Works ok for me in Camino and Safari - maybe you should try h1 a:link rather than just h1 a for the first style? Get a bit more specifity.

georgeek

10+ Year Member



 
Msg#: 3387682 posted 3:29 pm on Jul 6, 2007 (gmt 0)

Thank you penders.

Yes this is what comes first in the style sheet:

a {
text-decoration:none;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#0074B8;}
a:visited {color:#AAAAFF;}
a:hover {background-color:#FFFFFF;}

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3387682 posted 3:32 pm on Jul 6, 2007 (gmt 0)

Change this:

h1 a {
text-decoration:none;
}

to this:

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

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3387682 posted 3:37 pm on Jul 6, 2007 (gmt 0)

Maybe try:

a.none {
text-decoration: none;
}

<h1><a href="http://www.example.com/" class="none">anytext</a></h1>

Marshall

[edited by: SuzyUK at 9:00 pm (utc) on July 7, 2007]
[edit reason] pls use example.com [/edit]

georgeek

10+ Year Member



 
Msg#: 3387682 posted 3:38 pm on Jul 6, 2007 (gmt 0)

ytswy & Fotiman thank you.

I made the change to:

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

and there was no difference in operation.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3387682 posted 3:57 pm on Jul 6, 2007 (gmt 0)

How are you including your stylesheet? Are you sure it's actually being included (other styles are also shown)?

georgeek

10+ Year Member



 
Msg#: 3387682 posted 4:05 pm on Jul 6, 2007 (gmt 0)

Fotiman yes the style sheet has lots in it and everything else in it works ok.

I am going to take a break and then set up some basic tests tomorrow because I am obviously doing something so stupid I can't see it :)

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3387682 posted 4:43 pm on Jul 6, 2007 (gmt 0)

In that case, I suggest getting Firefox (if you don't already have it) and installing the Firebug extension (if you don't already have that). Then inspect your link to see which styles are being applied to it. This can be helpful to discover those pesky places where you have the specificity wrong, etc.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3387682 posted 10:24 pm on Jul 6, 2007 (gmt 0)

text-decoration:none;

...text decoration is still the same as for other links on the page.

Hang on a mo... you appear to be setting text-decoration:none on all normal links AND on all h1 links (ie. the same)... so why should they not be the same? How are you expecting them to be different?

Are there no other anchor styles defined?

georgeek

10+ Year Member



 
Msg#: 3387682 posted 10:27 am on Jul 7, 2007 (gmt 0)

penders - I want the H1 links to look like plain text under all circumstances including hover. An unusual requirement I know :)

At the moment links are defined in the style sheet like so:

a {
text-decoration:none;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#0074B8;}
a:visited {color:#AAAAFF;}
a:hover {background-color:#FFFFFF;}

Quadrille

WebmasterWorld Senior Member quadrille us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3387682 posted 12:26 pm on Jul 7, 2007 (gmt 0)

Try:

<a href="http://www.example.com/"><h1>anytext</h1></a>

The code closest to the 'subject' overrides code further away.

[edited by: SuzyUK at 9:01 pm (utc) on July 7, 2007]

georgeek

10+ Year Member



 
Msg#: 3387682 posted 1:29 pm on Jul 7, 2007 (gmt 0)

Thank you Quadrille I just tried that and it does not work :(

Quadrille

WebmasterWorld Senior Member quadrille us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3387682 posted 1:47 pm on Jul 7, 2007 (gmt 0)

Dang! Then you'll need a special class for H1+link - or, if it's that important, make everything nodecor and a special class for those WITH underline. On refection, no!

But why would you want an H1 to be a link?

H1 is the key heading for the current page - surely you want readers to read that before moving on?

Give us some backgound - there may be a better way to achieve whatever you are after.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3387682 posted 1:56 pm on Jul 7, 2007 (gmt 0)

As I suggested before:

a.none {
text-decoration: none;
}

<h1><a href="http://www.example.com/" class="none">anytext</a></h1>

Marshall

[edited by: SuzyUK at 9:02 pm (utc) on July 7, 2007]

encyclo

WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3387682 posted 6:19 pm on Jul 7, 2007 (gmt 0)

There is nothing wrong with your code as posted above, there should be no need for a separate
class. If I understand correctly, the following is exactly what you posted, and it works as expected in Firefox, Konqueror, Opera and IE6:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test template</title>
<style type="text/css">
a {
text-decoration:none;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#0074B8;}
a:visited {color:#AAAAFF;}
a:hover {background-color:#FFFFFF;}
h1 a {
text-decoration:none;
}
h1 a:visited {
text-decoration:none;
}
h1 a:hover {
text-decoration:none;
}
h1 a:active {
text-decoration:none;
}
</style>
</head>
<body>
<h1><a href="http://www.example.com/">anytext</a></h1>
</body>
</html>

I want the H1 links to look like plain text under all circumstances including hover

To clarify the above, you're just talking about the underline under the link, not any other styling?

  • What browsers are giving problems?
  • Do your CSS and HTML both validate with the HTML validator [validator.w3.org] and CSS validator [jigsaw.w3.org]?
  • borntobeweb

    5+ Year Member



     
    Msg#: 3387682 posted 8:51 pm on Jul 7, 2007 (gmt 0)

    georgeek, you mentioned you have other stuff in your stylesheet so this may be your problem: if your <h1> tag is within a <div>, and you have defined styles for <a> tags within that div, the "h1 a" selector won't override that. So, borrowing encyclo's code, you'll see that "anytext y" is still underlined in the html file below (because there's a rule for ".y a" but not for ".y h1 a":

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test template</title>
    <style type="text/css">
    .x a, .y a {
    text-decoration: underline;
    }
    h1 a, .x h1 a {
    text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div class="x">
    <h1><a href="http://www.example.com/">anytext x</a></h1>
    </div>
    <div class="y">
    <h1><a href="http://www.example.com/">anytext y</a></h1>
    </div>
    <h1><a href="http://www.example.com/">anytext</a></h1>
    </body>
    </html>

    penders

    WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



     
    Msg#: 3387682 posted 10:44 pm on Jul 7, 2007 (gmt 0)

    penders - I want the H1 links to look like plain text under all circumstances including hover. An unusual requirement I know :)

    But that was my point, they do :) - at least as far as text-decoration is concerned, which is afterall the only style you are setting on your H1 links. Are you implying the colour is not the same?

    As encyclo points out, the code you've posted works as expected - there is no text-decoration (ie. no underline/overline/line-through) on H1 links, normal links or plain text (as far as the styles you've given). However, the colour of your H1 links could be different to your 'plain text' as you have not defined a color for your H1 links and so will inherit the color from your normal links - which is no doubt different from your 'plain text'?!

    georgeek

    10+ Year Member



     
    Msg#: 3387682 posted 7:10 am on Jul 8, 2007 (gmt 0)

    Thank you all, I am begining to see the light :)

    Using the borntobeweb code example above how would I

    a:hover {text-decoration: background: red}

    for class y but not for class x?

    Marshall

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 3387682 posted 9:39 am on Jul 8, 2007 (gmt 0)

    .y h1 a:hover {
    }

    Marshall

    georgeek

    10+ Year Member



     
    Msg#: 3387682 posted 8:26 am on Jul 9, 2007 (gmt 0)

    That all works fine now :)

    Thank you for your help everyone.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved