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

CSS Forum

    
h1 link without text decoration
georgeek




msg:3387684
 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




msg:3387784
 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




msg:3387797
 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




msg:3387802
 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




msg:3387803
 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




msg:3387811
 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




msg:3387814
 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




msg:3387836
 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




msg:3387842
 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




msg:3387876
 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




msg:3388133
 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




msg:3388347
 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




msg:3388362
 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




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

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

Quadrille




msg:3388384
 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




msg:3388392
 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




msg:3388478
 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




    msg:3388557
     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




    msg:3388599
     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




    msg:3388758
     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




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

    .y h1 a:hover {
    }

    Marshall

    georgeek




    msg:3389314
     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