Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

:first-letter Support in Firefox?

  • 8 odgovori
  • 3 ima ovaj problem
  • 161 views
  • Posljednji odgovor poslao abacus822

more options

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?

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 :<br /> <br /> <pre><nowiki><!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></nowiki></pre> 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 :<br /> <br /> <pre><nowiki><!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></nowiki></pre> Not Working CSS (external file) :<br /> <br /> <pre><nowiki>h2:first-letter { font-size: 200%; background-color: gold; } </nowiki></pre> 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?

Izmjenjeno od strane cor-el

Izabrano rješenje

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:

Pročitajte ovaj odgovor sa objašnjenjem 👍 0

All Replies (8)

more options

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

more options

Thank you for your quick reply!

I just cleared the cache and restarted Firefox and still having the same problem.

more options

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)?

more options

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.

more options

Just reinstalled Firefox 12 and still having the same issue.

more options

just reinstalling might not have reset all settings - please also try in safe mode.

more options

Odabrano rješenje

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:

more options

Thanks so much, that worked perfectly!!!!