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

Firefox for Mac won't recognize text drop shadow.

more options

I've not changed the CSS governing text-shadow but recently Firefox doesn't recognize some, not all but some, of the shadowing applied to h1, h2 tags. My guess is it is now not specific enough where one time it was ok. I'm certain this is a CSS problem but it makes me wonder why Firefox once recognized every instance that I applied text-shadow. Opera and Safari recognize all, Firefox doesn't.

The url: http://tampabaysnowskiers.com/index.html

I've not changed the CSS governing text-shadow but recently Firefox doesn't recognize some, not all but some, of the shadowing applied to h1, h2 tags. My guess is it is now not specific enough where one time it was ok. I'm certain this is a CSS problem but it makes me wonder why Firefox once recognized every instance that I applied text-shadow. Opera and Safari recognize all, Firefox doesn't. The url: http://tampabaysnowskiers.com/index.html

All Replies (5)

more options

Can you check the headings with Firefox's Inspector to see whether text-shadow is being found and applied, or is being overridden?

If you can right-click, choose Inspect Element (Q). The Inspector should open with the DOM tree expanded to that element and the applicable style rules displayed on the right side. (Screenshot attached)

Or use the menu and then "click to select":

  • "3-bar" menu button > Developer > Inspector
  • (menu bar) Tools menu > Web Developer > Inspector

Anything unexpected?

more options

Thank you for the attempt. I've used Firebug as well to see and the code for the text shadow is not crossed through, implying something else is taking over. With the inspector and firebug I do know how to turn things on and off to see what happens as well as changing values.

I do see that I must clarify: the text shadow works, it's the opacity that doesn't. And again, it works perfectly on some h1, h2 and h3 tags, just not all.

more options

I see that the text-shadow color is set to white (#FFF), so is not really noticeable against the background.

h1, h2, h3 {
	text-shadow: 1px 1px 0 #FFFFFF, 3px 3px 0 rgba(0, 0, 0, 0.1);
}
more options

There are two shadows, one is white and one is a 10% opacity of black. The white is 1px wide and is next to the text. A second shadow is offset by 3px and therefore is only 2px wide. That color is handled by the rgba with 0, 0, 0 being the black and the "a" of rgba is the alpha for the opacity level and .1 is 10% of black. This is the part that is ignored on some of those tags and has been ignored since the last Mozilla update of Firefox. It's a technique thing whereby the white acts as a buffer from the real drop shadow and keeps the text from looking fuzzy and still have a subtle shadow.

more options

It's very subtle. When I zoom the page on Windows, I can definitely see it (screen shot attached, with varying opacity), but I don't have the ability to test on Mac.