20 replies [Last post]
ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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!

Life's a b*tch and then you die!

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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?

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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>&nbsp;</p>
<span class="firstletter">T</span>his is simply
changing the first letter usng a span class
<p>&nbsp;</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>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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. Evil

Life's a b*tch and then you die!

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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!.

Life's a b*tch and then you die!

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

Combining Pseudo CSS classes not working in IE or F Fox

that doesn't seem to work for me Sad

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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 Wink

It works with FF_Mac, even though the moving text effect sucks!

Life's a b*tch and then you die!

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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>

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

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.

Life's a b*tch and then you die!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Combining Pseudo CSS classes not working in IE or F Fox

And your doctype's incomplete Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

ballinasloe
Offline
Regular
Last seen: 17 years 22 weeks ago
Joined: 2005-04-28
Posts: 18
Points: 0

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

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Combining Pseudo CSS classes not working in IE or F Fox

Yes, very good Chris Wink

Life's a b*tch and then you die!