Welcome to WebmasterWorld Guest from 3.227.254.12

This page requires javascript to function properly. It seems that your browser does not have Javascript enabled. Please enable Javascript and press the Reload/Refresh button on your browser.

Forum Moderators: not2easy

Message Too Old, No Replies

h1 link without text decoration

Preferred Member

joined:Nov 19, 2002
posts:423
votes: 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]

Senior Member

penders is a WebmasterWorld Top Contributor of All Time

joined:July 3, 2006
posts: 3147
votes: 3

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

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

Preferred Member

joined:June 25, 2002
posts:466
votes: 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

3:29 pm on July 6, 2007 (gmt 0)

Preferred Member

joined:Nov 19, 2002
posts:423
votes: 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

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

Senior Member from US

fotiman is a WebmasterWorld Top Contributor of All Time

joined:Oct 17, 2005
posts:5021
votes: 26

Change this:

h1 a {
text-decoration:none;
}

to this:

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

Marshall

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

Senior Member from US

joined:Sept 4, 2001
posts:2295
votes: 97

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

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

Preferred Member

joined:Nov 19, 2002
posts:423
votes: 0

ytswy & Fotiman thank you.

I made the change to:

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

and there was no difference in operation.

Fotiman

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

Senior Member from US

joined:Oct 17, 2005
posts:5021
votes: 26

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

georgeek

4:05 pm on July 6, 2007 (gmt 0)

Preferred Member

joined:Nov 19, 2002
posts:423
votes: 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

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

Senior Member from US

joined:Oct 17, 2005
posts:5021
votes: 26

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

10:24 pm on July 6, 2007 (gmt 0)

Senior Member

joined:July 3, 2006
posts:3147
votes: 3

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:27 am on July 7, 2007 (gmt 0)

Preferred Member

joined:Nov 19, 2002
posts:423
votes: 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

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

Senior Member

quadrille is a WebmasterWorld Top Contributor of All Time

joined:Feb 22, 2002
posts:3455
votes: 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

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

Preferred Member

joined:Nov 19, 2002
posts:423
votes: 0

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

Quadrille

1:47 pm on July 7, 2007 (gmt 0)

Senior Member

joined:Feb 22, 2002
posts:3455
votes: 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

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

Senior Member from US

joined:Sept 4, 2001
posts:2295
votes: 97

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

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

Senior Member from CA

encyclo is a WebmasterWorld Top Contributor of All Time

joined:Aug 31, 2003
posts:9074
votes: 6

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

8:51 pm on July 7, 2007 (gmt 0)

Junior Member

joined:Mar 31, 2007
posts:85
votes: 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

10:44 pm on July 7, 2007 (gmt 0)

Senior Member

joined:July 3, 2006
posts: 3147
votes: 3

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