why no text+shading in Firefox?

[Eddy]

Firefox appears to be incapable of revealing the shading behind text -
which appears when text+shading pages are viewed in Internet Explorer
(not that IE should be used as the standard, and I haven't tested
whether other browsers, like Opera, are the same.)

For example, if you look at the following page website:
http://www.davidcade.net

See the two yellow lines saying
"Cheaper HERE than ANYWHERE ELSE, including AMAZON !
With immediate FREE shipping/postage world-wide !"

Now look at those two lines in Internet Explorer. There's black shading
around them.

Can anyone explain - beyond confirming that Firefox can't reproduce
shading behind text?

Is there a way of getting around this by using html?

Thanks.

P.S. If you look at the name "David Cade" at the top of the page, it
has black shading, but you can't select the words "David Cade" because
they are an image. Perhaps, a way around the problem of Firefox not
being able to show shading?

 

[rf]

Firefox appears to be incapable of revealing the shading behind text -
which appears when text+shading pages are viewed in Internet Explorer
(not that IE should be used as the standard, and I haven't tested
whether other browsers, like Opera, are the same.)

If there is a difference between IE and any other browser then bet on IE
being wrong.

For example, if you look at the following page website:
http://www.davidcade.net

AAARRGGGG. No thanks.

So bloody red!

And, BTW I see no difference between FF and IE.

 

[Harlan Messinger]

Firefox appears to be incapable of revealing the shading behind text -
which appears when text+shading pages are viewed in Internet Explorer
(not that IE should be used as the standard, and I haven't tested
whether other browsers, like Opera, are the same.)

For example, if you look at the following page website:
http://www.davidcade.net

See the two yellow lines saying
"Cheaper HERE than ANYWHERE ELSE, including AMAZON !
With immediate FREE shipping/postage world-wide !"

Now look at those two lines in Internet Explorer. There's black shading
around them.

Can anyone explain - beyond confirming that Firefox can't reproduce
shading behind text?

That's correct. Other browsers can't reproduce effects created in IE by
using non-standard Microsoft inventions that the makers of the other
browsers didn't copy from Microsoft.

Is there a way of getting around this by using html?

No. And even in IE it isn't done using HTML.

Thanks.

P.S. If you look at the name "David Cade" at the top of the page, it
has black shading, but you can't select the words "David Cade" because
they are an image. Perhaps, a way around the problem of Firefox not
being able to show shading?

It isn't a "problem" any more than it would be a problem if Microsoft
hadn't implemented it either. It's a cool feature, but hardly a
necessary one.

 

[Eddy]

That's correct. Other browsers can't reproduce effects created in IE by
using non-standard Microsoft inventions that the makers of the other
browsers didn't copy from Microsoft.


No. And even in IE it isn't done using HTML.

It isn't a "problem" any more than it would be a problem if Microsoft
hadn't implemented it either. It's a cool feature, but hardly a
necessary one.

Thanks a lot, Harlan. Your answers are really helpful. Really
appreciate it.

 

[Eddy]

If there is a difference between IE and any other browser then bet on IE
being wrong.


And, BTW I see no difference between FF and IE.

Thanks, RF. You (and Harlan) have pointed to the fact that IE6 is
prepared to faithfully reproduce shading behind text, while IE7 (like
FF) is not! Damned nuisance, I say!

Thanks for your help.

 

[Ari Heino]

Eddy kirjoitti seuraavasti:

Can anyone explain - beyond confirming that Firefox can't reproduce
shading behind text?

Unfortunately (?) Safari is the only browser supporting the text-shadow
property in css2.

There are messy ways to do it in other browsers, too. Check out
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows

 

[richard]

Firefox appears to be incapable of revealing the shading behind text -
which appears when text+shading pages are viewed in Internet Explorer
(not that IE should be used as the standard, and I haven't tested
whether other browsers, like Opera, are the same.)

For example, if you look at the following page website:
http://www.davidcade.net

See the two yellow lines saying
"Cheaper HERE than ANYWHERE ELSE, including AMAZON !
With immediate FREE shipping/postage world-wide !"

Now look at those two lines in Internet Explorer. There's black shading
around them.

Can anyone explain - beyond confirming that Firefox can't reproduce
shading behind text?

Is there a way of getting around this by using html?

Thanks.

P.S. If you look at the name "David Cade" at the top of the page, it
has black shading, but you can't select the words "David Cade" because
they are an image. Perhaps, a way around the problem of Firefox not
being able to show shading?

IE has always been tinkering with non-standard items.
Run your page through the validator at w3.org and you'll probably find
those items are not accepted.

IE also "assumes" too much.
Where the page might work properly in IE as intended, FF shows it
correctly.

http://validator.w3.org/

 

[Jonathan N. Little]

Thanks a lot, Harlan. Your answers are really helpful. Really
appreciate it.

There are ways, but it is kind of messy with absolute positioning and
doubled content...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Shadow</title>

<style type="text/css">
body { background: #804; color: #fadb61; }
div.shadow { font: 1.3em bolder, sans-serif; position: relative; color:
#000; }
div.shadow span { display: block; position: absolute; color: #fadb61;
top: -2px; left: 2px; }
</style>

</head>
<body>
<div class="shadow">
Cheaper HERE than ANYWHERE ELSE, including AMAZON !<br>
With immediate FREE shipping/postage world-wide !
<span>
Cheaper HERE than ANYWHERE ELSE, including AMAZON !<br>
With immediate FREE shipping/postage world-wide !
</span>
</div>
</body>
</html>

 

[Eddy]

IE has always been tinkering with non-standard items.
Run your page through the validator at w3.org and you'll probably find
those items are not accepted.

IE also "assumes" too much.
Where the page might work properly in IE as intended, FF shows it
correctly.

http://validator.w3.org/

Really, interesting, Richard, thanks! Will go look at w3 org.

 

[Eddy]

Eddy kirjoitti seuraavasti:

Unfortunately (?) Safari is the only browser supporting the text-shadow
property in css2.

There are messy ways to do it in other browsers, too. Check out
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows

Thanks, Ari. Interesting info. Thanks for the "messy" help via the
above link!

 

[Eddy]

There are ways, but it is kind of messy with absolute positioning and
doubled content...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Shadow</title>

<style type="text/css">
body { background: #804; color: #fadb61; }
div.shadow { font: 1.3em bolder, sans-serif; position: relative; color:
#000; }
div.shadow span { display: block; position: absolute; color: #fadb61;
top: -2px; left: 2px; }
</style>

</head>
<body>
<div class="shadow">
Cheaper HERE than ANYWHERE ELSE, including AMAZON !<br>
With immediate FREE shipping/postage world-wide !
<span>
Cheaper HERE than ANYWHERE ELSE, including AMAZON !<br>
With immediate FREE shipping/postage world-wide !
</span>
</div>
</body>
</html>

Thanks, Jonathan. Looks like its time to upgrade my web-making program.
If I use this "messy" method, every time I save the page within the
web-making program the program will no doubt eliminate the tweaks!?

 

[Nik Coughlin]

Eddy kirjoitti seuraavasti:

Unfortunately (?) Safari is the only browser supporting the text-shadow
property in css2.

FYI:
text-shadow was dropped from CSS 2.1 but is present in CSS 3. Implemented
by Safari and other Webkit browsers like Chrome (though not the current
build), Konquerer, iCab; Opera since 9.5 and Firefox from 3.1 onwards.

Internet Explorer support (partial) expected some time around 2014

 

[Bergamot]

If I use this "messy" method

Don't. Please. Drop shadows are a non-essential and resorting to doubled
content to simulate the effect is just plain a bad idea.

Remember that CSS is supposed to be optional and a page should make
sense when CSS is disabled. Doubled content won't, especially for anyone
using a screen reader.

 

[cwdjrxyz]

Firefox appears to be incapable of revealing the shading behind text -
which appears when text+shading pages are viewed in Internet Explorer
(not that IE should be used as the standard, and I haven't tested
whether other browsers, like Opera, are the same.)

For example, if you look at the following page website:http://www.davidcade.net

See the two yellow lines saying
"Cheaper HERE than ANYWHERE ELSE, including AMAZON !
With immediate FREE shipping/postage world-wide !"

Now look at those two lines in Internet Explorer.  There's black shading
around them.

Can anyone explain - beyond confirming that Firefox can't reproduce
shading behind text?

Is there a way of getting around this by using html?

Thanks.

P.S.  If you look at the name "David Cade" at the top of the page, it
has black shading, but you can't select the words "David Cade" because
they are an image.  Perhaps, a way around the problem of Firefox not
being able to show shading?

I am replying late and see that others have explained the reason for
shading behind text not showing on most browsers. Since there appears
to be no easy, clean method that works on most browsers using only
html, you might consider making an image instead if you want shaded
text for only a few lines in a fairly small area. There likely are
shaded fonts you can find out of the perhaps thousands that you can
download. The problem is that most people would not have the font you
used installed on their browser. However you likely could use a shaded
font on an image tool, such as PaintShop, to make a png on a
transparent background so that seeing the shading does not depend on
the browser. Also the gd extension for php likely would allow you to
do the same thing, in which case you would have to upload the selected
shaded font to the server. Some image tools may allow you to use a
common font you have installed for labeling and can be set to shade
the text. I have never had a need for this, so I have not checked the
common image tools to see which support text shading, if any. I
suppose a few people still turn their images off, so you might want to
consider that. A good alt text might overcome this problem in many
cases.

 

[Eddy]

I am replying late and see that others have explained the reason for
shading behind text not showing on most browsers. Since there appears
to be no easy, clean method that works on most browsers using only
html, you might consider making an image instead if you want shaded
text for only a few lines in a fairly small area. There likely are
shaded fonts you can find out of the perhaps thousands that you can
download. The problem is that most people would not have the font you
used installed on their browser. However you likely could use a shaded
font on an image tool, such as PaintShop, to make a png on a
transparent background so that seeing the shading does not depend on
the browser. Also the gd extension for php likely would allow you to
do the same thing, in which case you would have to upload the selected
shaded font to the server. Some image tools may allow you to use a
common font you have installed for labeling and can be set to shade
the text. I have never had a need for this, so I have not checked the
common image tools to see which support text shading, if any. I
suppose a few people still turn their images off, so you might want to
consider that. A good alt text might overcome this problem in many
cases.

Cwdjrxyz, thanks a lot for this. Yes, forcing shading onto a browser
that won't reproduce shaded text by merging jpgs of text is a good idea
and an alternative. I have done this before when put an email address
on a website. Spammers can't be bothered writing the thing down and
then typing it into wretched "spam-machines". But I have never
considered before the danger you mention: that some purists do browse
with all images turned off, looking only at text.

Thanks for the thoughts.

 

[Eddy]

FYI:
text-shadow was dropped from CSS 2.1 but is present in CSS 3. Implemented
by Safari and other Webkit browsers like Chrome (though not the current
build), Konquerer, iCab; Opera since 9.5 and Firefox from 3.1 onwards.

Hi, Nik. "implemented by . . . Firefox from 3.1 onwards"? I thought I
have the latest version of Firefox and have just checked. I have FF
3.0.3. Have just been to Mozilla and it doesn't appear that there is a
version beyond 3.0.3 yet. Where did you hear of 3.1?

Internet Explorer support (partial) expected some time around 2014

Er. I think you're joking. Microsoft surely doesn't have plans for
such minute things six years hence?

 

[Eddy]

Don't. Please. Drop shadows are a non-essential and resorting to doubled
content to simulate the effect is just plain a bad idea.

Remember that CSS is supposed to be optional and a page should make
sense when CSS is disabled. Doubled content won't, especially for anyone
using a screen reader.

Thanks for the warning, Bergamot.

 

[Irina Rempt]

some purists do browse
with all images turned off, looking only at text.

Not only purists, but also people with an old computer, a bad/slow
connection or a small bandwidth allowance.

Irina

 

[Dylan Parry]

Hi, Nik. "implemented by . . . Firefox from 3.1 onwards"? I thought I
have the latest version of Firefox and have just checked. I have FF
3.0.3. Have just been to Mozilla and it doesn't appear that there is a
version beyond 3.0.3 yet. Where did you hear of 3.1?

3.1 is the latest *beta* version of Firefox, so the general public won't
be using it yet. I've yet to look at it myself, but from what I've read,
it features some nice improvements to speed and adds further support for
CSS.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

The opinions stated above are not necessarily representative of
those of my cats. All opinions expressed are entirely your own.

 

[Nik Coughlin]

3.1 is the latest *beta* version of Firefox, so the general public won't
be using it yet. I've yet to look at it myself, but from what I've read,
it features some nice improvements to speed and adds further support for
CSS.

Yeah. Apparently is now benchmarking faster than Chrome for JavaScript