469,575 Members | 1,190 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,575 developers. It's quick & easy.

first-letter won't work in anchor

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
1 6587
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.

Similar topics

24 posts views Thread by Hung Jung Lu | last post: by
2 posts views Thread by captain_2010 | last post: by
27 posts views Thread by hokiegal99 | last post: by
8 posts views Thread by Robert Gravereaux | last post: by
11 posts views Thread by Jason | last post: by
6 posts views Thread by =?Utf-8?B?UGF1bA==?= | last post: by
4 posts views Thread by Milan Krejci | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.