CODEWITHSUNDEEP
cssfirefox
Matthew Croft
Matthew Croft

Reputation: 71

CSS 'text-shadow' is not working in Firefox

I am attempting to add the text-shadow property to a CSS style sheet, and it does work for Internet Explorer, Chrome, Opera, and Safari, but I cannot get it to show up in Firefox, even if I use -moz-text-shadow property.

I am running version 43.0.4. Is this is a known problem and is there is a hack? Below is the CSS that controls the h1 to which I am trying to apply a text-shadow.

/* =Headings
-------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: 700;
    line-height: 1.0em;
    word-wrap: break-word;
}

h1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 2.625em; /* = 42px */
     -moz-text-shadow: 0 0 3px 2px #000;
    text-shadow: 0 0 3px 2px #000;
}

h2 {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    font-size: 2.250em; /* = 36px */
}

h3 {
    margin-top: 0.857em;
    margin-bottom: 0.857em;
    font-size: 1.875em; /* = 30px */
}

h4 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1.500em; /* = 24px */
}

h5 {
    margin-top: 1.125em;
    margin-bottom: 1.125em;
    font-size: 1.125em; /* = 18px */
}

h6 {
    margin-top: 1.285em;
    margin-bottom: 1.285em;
    font-size: 1.000em; /* = 16px */
}

Upvotes: 0

Views: 1738

Answers (2)

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

Your code is incorrect and shouldn't work in any browser. text-shadow takes a maximum of 4 values (offset-x, offset-y, blur-radius, and color) but you are entering 5 (like if it was a box-shadow that allows 5). If you remove the last value before the color, it will work fine:

h1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 2.625em; /* = 42px */
     -moz-text-shadow: 0 0 3px #000;
    text-shadow: 0 0 3px #000;
}

Upvotes: 1

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17954

The text-shadow CSS property is defined like this:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

So you have:

text-shadow: 0 0 3px 2px #000;

Which will have:

h-shadow: 0
v-shadow: 0
blur-radius: 3px
color: 2px!!!

So just try to remove the 2px value and everything will be ok.

Upvotes: 2

Related Questions