Forum Moderators: not2easy
I added
A:first-letter { color: white; } and sometimes it works and sometimes not. I only define these colours once, overriding some things, font styles mainly in some places, but no other first-letter or colours anywhere.
Now, this works in some places, but not others. The code I have relating to links in these sections...
A { color: silver; font-weight: bold; text-decoration: none; }
A:first-letter{color: white;}
A:hover { color: white; }#topnav A {
margin-left: 20px;
font-family: "Verdana", sans-serif;
font-size: 13px;
line-height: 22px;
}#catlist #links A {
display: block;
margin-bottom: 5px;
width: 130px; height: 20px;
font-family: "Verdana", sans-serif;
font-size: 12px; line-height: 20px;
font-variant: small-caps;
text-align: center;
}#help A { display: block; font-size: 1.5em;}
#help .pop_in A { margin-top: 7px;font-size: 0.7em; }
It's working here:
<body>
<div id='mainwrapper'>
...<div id='catlist'>
......<div id='back'></div>
.........<div id='links'>
.........<a ...>Text</a>
.........<a ...>Text</a><body>
<div id='mainwrapper'>
...<div id='help' class='pagewrapper'>
......<div class='content'></div>
......<a ...>Text</a>
......<a ...>Text</a>
......<div class='pop_in'>
.........<a ...>Text</a>
.........<a ...>Text</a>
But it does not work here:
<body>
<div id='topnav'>
...<a ...>home</a>
...<a ...>home</a><body>
<div id='mainwrapper'>
...<div id='home' class='pagewrapper'>
......<div class='content'>
......<h1><a ...>Text</a></h1><body>
<div id='mainwrapper'>
...<div id='contact' class='pagewrapper'>
......<div class='content'>
......<p class='bigcaption'><a ...>Text</a></p>
Even if I add:
#topnav A:first-letter { color: white; } My links in that section still don't have any white!
I'm very frustrated with this one. I'm assuming some elements override the first-letter selector, and some don't.
A { color: silver; font-weight: bold; text-decoration: none; }
A:first-letter { color: white; }
A:hover { color: white; }#topnav {
height: 22px;
background: black;
}#topnav A {
margin-left: 20px;
font-family: "Verdana", sans-serif;
font-size: 13px;
line-height: 22px;
}
#topnav A:hover { color: white; } /* IE6 */<div id='topnav'>
<a href='/home.shtml'>home</a>
<a href='/about.shtml'>about</a>
<a href='/shop/shop.shtml'>online shop</a>
<a href='/checkout.shtml'>checkout</a>
<a href='/help.shtml'>help</a>
<a href='/contact.shtml'>contact us</a>
</div>
I had to add the
#topnav A:hoverso IE6 would even do that.
You said 'a::first-letter', double colon? Is that what's wrong? I am setting a font colour only in 1 other place:
#mainwrapper .pagewrapper { color: white; } If not I'll have to try to replicate it offline.
The :first-letter thing only applies to block level elements. Some of my links, left have nav bar for eg, use block level <a> tags, while others (top nav bar) are just inline.
The :first-letter pseudo-element must select the first letter of the first line of a block
Looks like it’s designed to work on generated line boxes, not inline elements.
this has been appearing from time to time on WebmasterWorld, if there is no charset defined, which I think WebmasterWorld doesn't have, then the browser will try to choose a default and sometimes it's not the best one.
at the minute in FF, I'm not seeing the "diamonds" and it's showing as rendering with ISO-8859-1
encyclo is the master with Character encoding.. perhaps he'll come along and point us to the thread which explains this better than I can..
[edited by: SuzyUK at 6:53 pm (utc) on May 8, 2007]
A:first-letter { color: white; }
A:hover { color: white; }
to:
A:hover { color: white; }
A:first-letter { color: white;
and IE will get it right. Couldn't find anything about this in the specs though so I assume IE is just being picky. In any case, it makes sense right?
(CSS3 makes it more obvious by reserving ‘:’ for pseudoclasses and ‘::’ for pseudoelements)
Fotiman, it's possibly your browser or its default character encoding?this has been appearing from time to time on WebmasterWorld, if there is no charset defined, which I think WebmasterWorld doesn't have, then the browser will try to choose a default and sometimes it's not the best one.
at the minute in FF, I'm not seeing the "diamonds" and it's showing as rendering with ISO-8859-1
The document contains characters that do not exist to the specified charset. The document can not be checked.
This is only on the pages with those question marks.
Because that’s what the spec says?
Still why? Don't inline elements have letters? And yes I read the spec page, hence my last post and saw the <p><span> example. But still why? Stupid W3C strikes again.
Robin, I'm kinda disappointed you didn't spot this the first time round!
Fotiman,
Single quotes are fine on IE7, and FF2 on WinXP. Although they are a bit drunk looking. There's no charset <meta> defined. Anyone snoop the headers?
Oh, sorry, I’m totally used to adding them with Alt+Shift+] on my Mac
Don't fruit computers come with an apostrophe key? I thought they were supposed to be advanced? ;)
As for curly quotes, an apostrophe is meant to be curly :) Or at least when I was at school it was. But hey, if it's causing people problems I'll bow to popular will.
:first-letterPost script: yes, apostrophes and quotation marks are meant to be curly, like filled-in 6s, 9s, 66s and 99s. What you are referring to is a prime and a double-prime, correctly used as feet and inches (5'9" = five feet, nine inches,) and abundantly incorrectly used as apostrophes and quotation marks.
There are many articles on the web if you are interested, just search for typography, and maybe more relevant to you, typography on the web.
@Robin_reala
All of your single quote's are coming through as a weird question mark in a diamond. Are you somehow pasting in some rich text that's using some font not available to everyone?
Those single quote's/apostrophe's look like ‘ and ’ to me (?) - and if you display this page using a Unicode (UTF-8) character encoding you get?-marks where the characters should be(?)
Post script: yes, apostrophes and quotation marks are meant to be curly, like filled-in 6s, 9s, 66s and 99s. What you are referring to is a prime and a double-prime, correctly used as feet and inches (5'9" = five feet, nine inches,) and abundantly incorrectly used as apostrophes and quotation marks.
May be if you were to write an apostrophe it would be curly, often in print it would be curly, and indeed in other fonts (Bangle, Bart, Bimini to name but three) it IS curly, but I guess generally on screen, for the sake of clarity, it isn't in Verdana, Arial... etc. (?) Although the apostrophe is looking like the prime character in Verdana/Arial, it is an entirely different character (U+2032) and in Verdana is angled.
I believe the reasoning behind only applying :first-letter to block-level elements was that, in the traditional report-writing/document-writing days (which is what all the structural elements are based on,) an enlarged first-letter was only ever applied to the start of a block of text: the first letter of the first block of each chapter.
I'm inclined to agree, however don't you think it's short sighted of them to assume that nobody would want to use them for anything else, and that they actually had to go out of their way to specify that it would only apply to block level!
Infact, the example on the official spec page is a newspaper type paragraph. They have something line:
<p><span>The first few</span>words are caps</p>
The <span> uses text-transform caps, but p:first-letter still applies to the first 'T'.
Anyway, discussions about tyopgraphy and curly apotrophies (sp?) aside, thanks for that btw Setek, quite interesting, I've fixed my problem.
I added
float: left;to #topnav A. As I have no other content in that section, just a row of links it made no difference to layout, but did make the first-letter work.
As for having to re-specify hover for IE6, as it's consistent, I can only assume that adding a further style for A, makes it ignore any previous A:hover. It does seem to inherit A:first-letter though.
Anyone care to give this a test?
I added float: left; to #topnav A. As I have no other content in that section, just a row of links it made no difference to layout, but did make the first-letter work.
As for having to re-specify hover for IE6, as it's consistent, I can only assume that adding a further style for A, makes it ignore any previous A:hover. It does seem to inherit A:first-letter though.
I'd say whatever works, IT IS a Specificity problem, but the problem is IE6's only (a bug) I found some research by Ingo Chao on the matter:
The presence of the pseudo-element manipulates the specificity – debugger's horror. In general, a workaround by using !important just to bring IE6 back to order cannot be recommended, as !important itself is buggy in IE6.
so respecifying as you have done is one way, or getting more specific with the first letter rule does it too as far as I can see:
#topnav a:first-letter {color: white;}either way giving IE6 a helpful nudge seems to be the answer ;)
Suzy
The strange thing is that IE6 still maintains the A:first-letter, and I only have to respecify A:hover.
