By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

first-letter won't work in anchor

P: n/a
I am trying to get "first-letter" to work inline withing an anchor. Actually
I have not been able to get it to work within an <a> tag whether inline,
linked, or embedded. Using IE6 service pack 1.

<html>
<head>
<style type="text/css">
h5 {background-color: red; padding-left: 5px}
a {color: white; font-size: 20px; text-decoration: none}
</style>
</head>

<body>

<h5 style="first-letter{color:brown}">
<a href="const.htm">Antiques</a></h5>

</body
</html>

TIA, ps****@nospam.eatel.net
<remove ".nospam" to email me>
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Patrick wrote:
I am trying to get "first-letter" to work inline withing an anchor. Actually
I have not been able to get it to work within an <a> tag whether inline,
linked, or embedded. Using IE6 service pack 1.
Firstly, it doesn't matter which IE you're using, getting it to work
correctly is difficult — of course, this is no exception.
<h5 style="first-letter{color:brown}">


:first-letter is a pseudo element, which requires a :, or :: for CSS3,
to precede it. There is no point to use the style attribute for this,
simply apply the style within the stylesheet in the header, or a linked
stylesheet. This CSS works for Mozilla 1.7 RC2, and Opera 7.5, but not
IE6 SP1. (Only tested on Windows XP, not Linux or Mac)

h5 a { display: block; }

h5 a:link:first-letter,
h5 a:visited:first-letter,
h5 a:hover:first-letter,
h5 a:focus:first-letter,
h5 a:active:first-letter { color: black; }

a:link { color: red; }
a:visited { color: orange; }
a:hover { color: yellow; }
a:focus { color: green; }
a:active { color: blue; }

And this code works for Mozilla, Opera and IE.

h5 a { display: block; }
h5 a:first-letter { color: black; }
a { color: red; }

However, if you extend it using the various link pseudo classes, it
fails miserably in IE, while working perfectly in Mozilla and Opera. IE
will colour the first letter with the color from the applicable a:link
or a:visited style rule, and color the rest in the default visited
(usually purple) or unvisited (usually blue) link colour.

h5 a { display: block; }
h5 a:first-letter { color: black; }
a:link { color: red; }
a:visited { color: green; }

I haven't done a complete test of every variation, so experement with
it and see what you can find that works best for you.

--
Lachlan Hunt
http://www.lachy.id.au/
la**********@lachy.id.au.update.virus.scanners

Remove .update.virus.scanners to email me,
NO SPAM and NO VIRUSES!!!
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.