본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

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

모든 댓글 (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.