Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: not2easy

Message Too Old, No Replies

h1 link without text decoration

   
1:12 pm on Jul 6, 2007 (gmt 0)

10+ Year Member



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]

3:19 pm on Jul 6, 2007 (gmt 0)

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



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?

3:28 pm on Jul 6, 2007 (gmt 0)

10+ Year Member



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.
3:29 pm on Jul 6, 2007 (gmt 0)

10+ Year Member



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;}

3:32 pm on Jul 6, 2007 (gmt 0)

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



Change this:

h1 a {
text-decoration:none;
}

to this:

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

3:37 pm on Jul 6, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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]

3:38 pm on Jul 6, 2007 (gmt 0)

10+ Year Member



ytswy & Fotiman thank you.

I made the change to:

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

and there was no difference in operation.

3:57 pm on Jul 6, 2007 (gmt 0)

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



How are you including your stylesheet? Are you sure it's actually being included (other styles are also shown)?
4:05 pm on Jul 6, 2007 (gmt 0)

10+ Year Member



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 :)

4:43 pm on Jul 6, 2007 (gmt 0)

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



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.
10:24 pm on Jul 6, 2007 (gmt 0)

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



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?

10:27 am on Jul 7, 2007 (gmt 0)

10+ Year Member



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;}

12:26 pm on Jul 7, 2007 (gmt 0)

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



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]

1:29 pm on Jul 7, 2007 (gmt 0)

10+ Year Member



Thank you Quadrille I just tried that and it does not work :(
1:47 pm on Jul 7, 2007 (gmt 0)

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



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.

1:56 pm on Jul 7, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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]

6:19 pm on Jul 7, 2007 (gmt 0)

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



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]?
  • 8:51 pm on Jul 7, 2007 (gmt 0)

    5+ Year Member



    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>
    10:44 pm on Jul 7, 2007 (gmt 0)

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



    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'?!

    7:10 am on Jul 8, 2007 (gmt 0)

    10+ Year Member



    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?

    9:39 am on Jul 8, 2007 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    .y h1 a:hover {
    }

    Marshall

    8:26 am on Jul 9, 2007 (gmt 0)

    10+ Year Member



    That all works fine now :)

    Thank you for your help everyone.