Thu, 2005-04-28 07:59
Hi,
I am trying to design a menu in CSS that will highlight the first letter of the link on mouse over.
I would have expected this to work for me:
a:link:hover:first-letter {font-weight: bold;}
however, the whole word rtather than the first letter seems to highlight. Has anyone else tried this and found it works or is there a common workaround? Any help would be really helpful, I've spent hours at this. :roll:
[/b]
Thu, 2005-04-28 08:44
#1
Combining Pseudo CSS classes not working in IE or F Fox
It should work, but without seeing the context that the rule works within it's difficult to say why it isn't.
Hugo.
Thu, 2005-04-28 08:45
#2
Combining Pseudo CSS classes not working in IE or F Fox
Your syntax is all wrong and you are trying to combine two pseudo-classes and a pseudo element! You need to separate them out, and learn to validate your code as this should tell you what is wrong. Also, do you realise that not all browsers support :first-letter?
See > http://www.w3schools.com/css/css_pseudo_elements.asp
Edit: If Hugo says it should work then ignore me 'cause he knows his stuff!
Thu, 2005-04-28 08:50
#3
Combining Pseudo CSS classes not working in IE or F Fox
Thanks so much, I will give that a go. I know that not all browsers support this but its it's part of CSS2 so it should be in the future right?
Is there abetter way of achieving this?
Thu, 2005-04-28 09:04
#4
Combining Pseudo CSS classes not working in IE or F Fox
Okay, stiill not having much luck, here's what I've got (forgive me, I'm still only getting to grips with CSS)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First Letter Test - April 28th 2005</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link:hover:first-letter {font-weight: bold;}
p:first-letter{
font-size: 14px;
font-weight: bolder;
}
.firstletter{
font-family: "Palatino Linotype", Verdana, sans-serif;
font-size: 16px;
font-weight: bolder;
color: #75C147;
}
}
.firstletterOver {
font-family: "Palatino Linotype", Verdana, sans-serif;
font-size: 16px;
font-weight: bolder;
color: #303994;
}
a:link:hover:first-letter {font-weight: bold;}
-->
</style>
</head>
<body>
<p>This is a sentence which has a different
first letter using the p tag</p>
<p> </p>
<span class="firstletter">T</span>his is simply
changing the first letter usng a span class
<p> </p>
The folowing are links taht on rollover, will
change their first letter only <a href="hometest.htm">HOME</a>
<a href="contacttest.htm">CONTACT </a>
</body>
</html>
Thu, 2005-04-28 09:51
#5
Combining Pseudo CSS classes not working in IE or F Fox
Whereas it works in theory, I think the problem partly lies with the fact that the first letter is applied to the hover, the hover is in effect the whole anchor text rather than an actual single letter. In effect the first-letter becomes the hover action, if that makes sense.
I cant make this work regardless of combination, I know that you can't combine two pseudo elements unlike the ability to combine two pseudo classes but you can mix pseudo classes and elements, so I can only think that this the problem, although having said that I can't get FF to play along at all.
I will continue playing with it as I get the chance and I may well just be missing a very obvious condition effecting things.
Hugo.
Thu, 2005-04-28 10:05
#6
Combining Pseudo CSS classes not working in IE or F Fox
I too have been playing around with this one. Contrary to what I first thought, I have learnt that you can mix a pseudo-class with a pseudo-element as long as the pseudo-element appears at the end of the selector. I too have tried endless combinations and ideas (and have corrected your extra brace for example), but I am bowing out now as I cannot get it to work on Mac_FF. 
Thu, 2005-04-28 10:05
#7
Combining Pseudo CSS classes not working in IE or F Fox
Thanks Hugo, appreciate this.
I'm having no luck with Fire Fox either.
I was thinking of just formatting the text within a DIV tag and then using Javascript to swap to a swap to a similar word but with the first letter formatted (of that makes sense - i.e. javascript:hide('name_out'); and javascript:show('name_over'); )
seems a little awkward and might be a bit slow for a rollover, suppose my only option at this stage is to use rollover images!
Thu, 2005-04-28 10:07
#8
Combining Pseudo CSS classes not working in IE or F Fox
It's not very neat but you could just wrap the first letters with a <span> and give those a separate class for the hover, although I accept that this will only be a hover on the letter!.
Thu, 2005-04-28 10:14
#9
Combining Pseudo CSS classes not working in IE or F Fox
ya, tried that but really, wanted it to highlight the firstletter when over the word itself,
is there any way that I could use say .firstletter in a span class for the first letter and somehow change this to .firstletterOver when over the word i.e. swap classes
...just an idea
Thu, 2005-04-28 10:20
#10
Combining Pseudo CSS classes not working in IE or F Fox
I would go with Roy's suggestion I think, but you should be able to have a bold hover on the spanned first letter and the normal hover on the rest of the link, thus:
<a href="http://link.com/"><span class="bold">L</span>Link</a>
CSS:
a:link:hover span.bold {font-weight:bold;}
Hugo.
Thu, 2005-04-28 10:38
#11
Combining Pseudo CSS classes not working in IE or F Fox
that doesn't seem to work for me 
Thu, 2005-04-28 10:42
#12
Combining Pseudo CSS classes not working in IE or F Fox
Hugo wrote:
I would go with Roy's suggestion I think, but you should be able to have a bold hover on the spanned first letter and the normal hover on the rest of the link
...who's a clever boy then
It works with FF_Mac, even though the moving text effect sucks!
Thu, 2005-04-28 11:00
#13
Combining Pseudo CSS classes not working in IE or F Fox
Am I missing something? Not getting anything here with IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link:hover span.bold {font-weight:bold;}
-->
</style>
</head>
<body>
<a href="http://link.com/"><span class="bold">L</span>Link</a>
</body>
</html>
Thu, 2005-04-28 11:16
#14
Combining Pseudo CSS classes not working in IE or F Fox
No; that code works in FF but pseudo-elements have always been a bit hit-and-miss in my experience, especially where IE is concerned.
Thu, 2005-04-28 11:50
#15
Combining Pseudo CSS classes not working in IE or F Fox
And your doctype's incomplete 
Thu, 2005-04-28 12:19
#16
Combining Pseudo CSS classes not working in IE or F Fox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
that should do, right?
Thu, 2005-04-28 14:08
#17
Combining Pseudo CSS classes not working in IE or F Fox
I was going to mention the DTD, forgot :roll:
It works for me using an 1.0 xhtml dtd in either transitional or strict ( "Almost standards mode" and "full standards mode" Firefox.)
The only problem is that for whatever reason FF will not accept the use of the double pseudo class and will only work on a:hover span.bold can't quite see why at the moment.
Edit: FF will only work on the link pseudo class if the http is fully defined as http://www. but is fine on internal links.
IE is happy either way, for a change and it is usually the one that has the quirks where links are concerned.
Hugo.
Thu, 2005-04-28 15:43
#18
Combining Pseudo CSS classes not working in IE or F Fox
Maybe I have missed something in reading through this read, so please excuse me if I am way off base.
You can't apply :first-letter to an inline element.
a:link:hover:first-letter { } will work fine if you set display:block on the a element.
take a look here. It uses the following styles on all <a> elements
a {
text-decoration:none;
}
a.inline_block {
display:inline-block;
}
a:hover {
background:#d8cab4;
color:#06c;
}
a:first-letter {
font-weight:bold;
color: black;
}
a:hover:first-letter {
text-decoration:underline;
}
a:visited:hover:first-letter {
color: red;
}
a:link:hover:first-letter {
color: #393;
}
p:first-letter {
color:blue;
font-weight:bold;
font-size: 1.5em;
}
and this additional style for the list links
#menu li a {display:block; padding: 0.2em 1em}
Look for:
- test 1 : first letter is not black or bold, a:first-letter is not applied.
- test 2: first letter is black and bold, a:first-letter is being applied.
hover over the links
- test 1: whole link changes to cyan and receives background, no other effects. neither a:first-letter or a:hover:first-letter are applied.
- test 2: first letter changes to red (visited) or green (link) and is underlined. a:???:hover:first-letter is being applied.
I get the same results in both Firefox (1.02) and Opera (7.51).
from the w3c css 2 spec
Quote:
The :first-letter pseudo-element matches parts of block-level elements only.
and from the w3c css 2.1 candidate spec
Quote:
The :first-letter pseudo-element applies to block, list-item, table-cell, table-caption and inline-block elements.
It seems both Opera and Firefox are following the CSS2 spec.
Fri, 2005-04-29 08:49
#19
Combining Pseudo CSS classes not working in IE or F Fox
that's fantastic,
I presume there's no work-around to get it working in IE aswell?
maybe in the next release!
looks good in F Fox
Fri, 2005-04-29 11:11
#20
Combining Pseudo CSS classes not working in IE or F Fox
Yes, very good Chris