Welcome to WebmasterWorld Guest from 54.81.117.119
Forum Moderators: not2easy
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]
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?
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?
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;}
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.
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?
<!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 - 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'?!