:first-letter Support in Firefox?
I am trying to use the :first-letter CSS pseudo-class selector. If I include the CSS in the HTML doc in between the <style> tags then I get the desired effect.
When I include the CSS in an external style sheet (which I normally do) the :first-letter selector doesn't get applied.
See below:
Working HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First-Letter Test</title>
<style>
h2:first-letter { font-size: 200%; background-color: gold; }
</style>
</head>
<body>
<h2>First letter test</h2>
</body>
</html>
When I remove the same exact CSS from the <style> tags and add it to an external style sheet it does not apply the style at all.
See below:
Not Working HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First-Letter Test</title>
<link rel="stylesheet" href="first-letter-test2.css" />
</head>
<body>
<h2>First letter test</h2>
</body>
</html>
Not Working CSS (external file) :
h2:first-letter { font-size: 200%; background-color: gold; }
This is working in Webkit fine but it only works in Firefox if I add it to the style tags in the HTML doc.
Any ideas? Is this a bug or is am I missing something?
Modified by cor-el
Chosen solution
You can create a new profile as a test to check if your current profile is causing the problems.
See "Basic Troubleshooting: Make a new profile":
If the new profile works then you can transfer some files from the old profile to that new profile, but be careful not to copy corrupted files.
See:
Read this answer in context 👍 0All Replies (8)
hello, both variants work for me when i create two html-testfiles (i'm on windows but that shouldn't make any difference) - maybe try to clear the cache in firefox...
Thank you for your quick reply!
I just cleared the cache and restarted Firefox and still having the same problem.
Works for me here as well with the above posted code.
Does it work if you place other code in that CSS file?
Are both files saved with the same encoding (UTF-8)?
I just re-saved all files to make sure they were all encoded as UTF-8. Still the same issue.
I added more code to the CSS file as below:
h2 { font-family: helvetica, sans-serif; font-size: 2em; }
h2:first-letter { font-family: Georgia, serif; font-style: bold; font-size: 200%; background-color: gold; }
Still having the same issue. When I add it to the HTML in the <style> tags I get the Serif first letter with background color and the rest of the letters are Sans-Serif as expected...but when just added to the external style sheet I just get the entire text rendered as the Sans-Serif font since its not applying the :first-letter styling.
In Firebug, when I highlight the H2 element, I can see both style properties listed (the h2:first-letter and the h2) but when I try to turn on/off/change the h2:first-letter property nothing happens. When I turn on/off/change the h2 property I can see the changes being made as expected.
I can add the style both in the HTML <style> tag and add it to the external style sheet and it renders fine in both Webkit and Firefox, but I'd rather not have to place the code in two places.
Just reinstalled Firefox 12 and still having the same issue.
just reinstalling might not have reset all settings - please also try in safe mode.
Chosen Solution
You can create a new profile as a test to check if your current profile is causing the problems.
See "Basic Troubleshooting: Make a new profile":
If the new profile works then you can transfer some files from the old profile to that new profile, but be careful not to copy corrupted files.
See:
Thanks so much, that worked perfectly!!!!