CSS "drop shadow" block element effect

[Erik Harris]

I've been playing with the website for the gung fu club that I run, trying to
give it a look that I like without using the dark background that I'm
currently using. I found something on the w3.org "Style" page that I liked
(one of the alternate style sheets there), and wanted to play with it.
Unfortunately, the page I've got put together doesn't appear to work in
Internet Explorer 6. As much as I'd like to say "screw 'em if they don't
have a standards-compliant browser," the fact that IE has by far the largest
market penetration out there makes that a really bad idea.

Hopefully someone has enough knowledge of the quirks in IE's CSS support that
they can help, or someone can help guide me to a simple way to say "if the
user is running IE, use this Style Sheet, otherwise use this one". The style
elements I'm using are these, modified from a style sheet used on
http://www.w3.org/Style/ :

div.back {
page-break-before: always;
margin: 3em -0.75em 3em 1em;
padding: 1em;
}

div.back {background: #700}
/*div.section div.back {background: #777}*/


div.section {
background: #FBFBFF;
margin: -2em 0 0 -2em;
padding: 1em;
border: thin solid #999;
}


The paragraphs are simply done like this:

<div class="back">
<div class="section">
<P>Here's a paragraph...</P>
</div></div>


The results in IE 6 are strange, though. I'm seeing signs of both the "back"
and "section" DIV types, but they're not lining up with the paragraphs, and
they don't seem to have much rhyme or reason to them, despite being
well-defined.

The page I'm putting together looks just fine in Firefox.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://www.eharrishome.com/cimac/

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

 

[Trogdor]

I've been playing with the website for the gung fu club that I run, trying to
give it a look that I like without using the dark background that I'm
currently using. I found something on the w3.org "Style" page that I liked
(one of the alternate style sheets there), and wanted to play with it.
Unfortunately, the page I've got put together doesn't appear to work in
Internet Explorer 6. As much as I'd like to say "screw 'em if they don't
have a standards-compliant browser," the fact that IE has by far the largest
market penetration out there makes that a really bad idea.

Hopefully someone has enough knowledge of the quirks in IE's CSS support that
they can help, or someone can help guide me to a simple way to say "if the
user is running IE, use this Style Sheet, otherwise use this one". The style
elements I'm using are these, modified from a style sheet used on
http://www.w3.org/Style/ :

div.back {
page-break-before: always;
margin: 3em -0.75em 3em 1em;
padding: 1em;
}

div.back {background: #700}
/*div.section div.back {background: #777}*/


div.section {
background: #FBFBFF;
margin: -2em 0 0 -2em;
padding: 1em;
border: thin solid #999;
}


The paragraphs are simply done like this:

<div class="back">
<div class="section">
<P>Here's a paragraph...</P>
</div></div>


The results in IE 6 are strange, though. I'm seeing signs of both the "back"
and "section" DIV types, but they're not lining up with the paragraphs, and
they don't seem to have much rhyme or reason to them, despite being
well-defined.

The page I'm putting together looks just fine in Firefox.

How about something like this: http://alistapart.com/articles/cssdropshadows/

 

[Erik Harris]

How about something like this: http://alistapart.com/articles/cssdropshadows/

I'm not sure I like the idea of using !important on my style sheets, but if I
don't see a better solution, I may give this a try. I'd hope that there'd be
another way of saying "If Internet Explorer, do this, else do that."

And of course, if IE comes out with a fix to support !important but not
support the other aspects of CSS it can't handle (i.e. in the major IE update
that was written about in the most recent Maximum PC, which looks to be a few
months away), I'll be looking for another solution anyhow.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://www.eharrishome.com/cimac/

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

 

[Mark Parnell]

I've been playing with the website for the gung fu club that I run, trying to
URL?

The results in IE 6 are strange, though.

Make sure you have a valid Doctype declaration at the beginning of the
page, to put IE into "Standards" mode. It still isn't perfect, but it's
a lot better than "Quirks" mode.

 

[Erik Harris]

URL?

Sorry, I hadn't put a work copy anywhere yet (except for my hard drive). I
just put a copy up in:

http://www.eharrishome.com/new-cimac/

Since this is just a TEMP directory to show the work-in-progress page (the
current version is at http://cimac.eharrishome.com/ or
http://www.eharrishome.com/cimac/), most of the internal links won't work. I
only uploaded index.html and CIMAC.css.

Make sure you have a valid Doctype declaration at the beginning of the
page, to put IE into "Standards" mode. It still isn't perfect, but it's
a lot better than "Quirks" mode.

My web pages are all currently HTML 4.01 Strict compliant, as well as CSS
compliant. I overhauled my pages a number of months ago using the W3C
validators (updating from BAD HTML 3.02 code to good HTML 4.01 Strict code
and CSS), and most of the times I've made updates since then, I've re-checked
to make sure they still validate. This current bit checks out both in HTML
and CSS validation (which includes a valid DOCTYPE declaration).

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://www.eharrishome.com/cimac/

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

 

[DU]

Sorry, I hadn't put a work copy anywhere yet (except for my hard drive). I
just put a copy up in:

http://www.eharrishome.com/new-cimac/

Since this is just a TEMP directory to show the work-in-progress page (the
current version is at http://cimac.eharrishome.com/ or
http://www.eharrishome.com/cimac/), most of the internal links won't work. I
only uploaded index.html and CIMAC.css.




My web pages are all currently HTML 4.01 Strict compliant, as well as CSS
compliant. I overhauled my pages a number of months ago using the W3C
validators (updating from BAD HTML 3.02 code to good HTML 4.01 Strict code
and CSS), and most of the times I've made updates since then, I've re-checked
to make sure they still validate. This current bit checks out both in HTML
and CSS validation (which includes a valid DOCTYPE declaration).

The following was tested and works perfectly and accordingly in MSIE 6
for windows, Mozilla 1.6, Opera 7.50 PR2, K-meleon 0.8.2, MyIE2 v.
0.9.12, Firefox 0.8:

(...)
<style type="text/css" media="screen,tv,projection">
div.back {background-color: #700; margin-bottom:2em;}
div.section
{
background: #FBFBFF;
position: relative; right: 1em; bottom: 1em;
padding: 1em;
border: thin solid #999;
}
</style>
</head>
<body>

<div class="back"><div class="section">
<p>Here's a paragraph...</p></div></div>

<div class="back"><div class="section">
<p>Here's a paragraph...</p></div></div>
(...)

If you use lang="zh" like in your <span>, then best is to identify your
html this way:

<html lang="en">
....
<meta http-equiv="Content-Language" content="zh-cn,en" />
See http://www.ietf.org/rfc/rfc2616.txt, section 14.12 on this

Also, you should be aware that some NS 7.x or Mozilla 1.x will get a
font dialog modal window because of your lang="zh": only 1 is enough to
trigger such window. I was forced to create a testpage on this last year
to verify this.

DU

 

[Jukka K. Korpela]

Under Subject: Re: CSS "drop shadow" block element effect

If you use lang="zh" like in your <span>,

This seems to refer to
<SPAN lang="zh" title="Eight Trigrams Palm">Ba Gua Zhang</SPAN>
on page http://www.eharrishome.com/new-cimac/ (which appears to be
optimized for arguing with users especially on their choice of browser,
and made virtually unreadable by making last portions of text appear in
black on dark red, etc., so I didn't care looking at what the nominal
topic might be, but I digress).

then best is to identify
your html this way:

<html lang="en">

Well, according to WAI recommendations, we should declare the language
of each part of a document, and it is natural to start from <html> and
then override it as needed, for inner elements containing other
languages. But using a lang attribute in one inner element doesn't
actually create much _additional_ reason to use lang attributes
elsewhere. It's rather the opposite: if you say <html lang="en">, you
are, in principle, claiming that each and every word in the document is
in English, unless specified otherwise. - So much about principles.

<meta http-equiv="Content-Language" content="zh-cn,en" />
See http://www.ietf.org/rfc/rfc2616.txt, section 14.12 on this

No, the Content-Language header is almost always useless, and its
<meta> imitation even more so. What effect do you expect it to have? It
has a role to play in content negotiation, but then <meta> tags are of
no use. And that the tag above says, by the cited protocol, is this:
the document's intended audience consists solely of people who
understand both the variant of Chinese spoken in China _and_ the
English language. You don't want to say that, do you?

Also, you should be aware that some NS 7.x or Mozilla 1.x will get
a font dialog modal window because of your lang="zh": only 1 is
enough to trigger such window.

Moreover, browsers are known to let lang attributes affect the font
used to display the document content. What this means is difficult to
predict, but the results can be pretty horrendous when the content is
not what the browser designers expect. In this case it could mean that
such a font is selected that is suitable for rendering CJK characters.
It may contain glyphs for Latin letters too, maybe in a shape that fits
CJK characters but not normal Latin text.

The bottom line is: Do not use lang attributes for transcribed or
transliterated text.

 

[DU]

Under Subject: Re: CSS "drop shadow" block element effect



This seems to refer to
<SPAN lang="zh" title="Eight Trigrams Palm">Ba Gua Zhang</SPAN>
on page http://www.eharrishome.com/new-cimac/ (which appears to be
optimized for arguing with users especially on their choice of browser,

I disagree with his words "Internet Explorer 6 or newer comes close,
but it still has incomplete support of HTML and CSS." For his page
needs, MSIE 6 has/supports all what his page needs.
I think he should avoid too technical comments on browser issues for
his visitors.

and made virtually unreadable by making last portions of text appear in
black on dark red, etc.,

Yes. I agree with you on this. Not enough color contrast (light vs dark)
makes it hard to read.


so I didn't care looking at what the nominal

topic might be, but I digress).




Well, according to WAI recommendations, we should declare the language
of each part of a document, and it is natural to start from <html> and
then override it as needed, for inner elements containing other
languages. But using a lang attribute in one inner element doesn't
actually create much _additional_ reason to use lang attributes
elsewhere. It's rather the opposite: if you say <html lang="en">, you
are, in principle, claiming that each and every word in the document is
in English, unless specified otherwise. - So much about principles.




No, the Content-Language header is almost always useless, and its
<meta> imitation even more so. What effect do you expect it to have? It
has a role to play in content negotiation, but then <meta> tags are of
no use. And that the tag above says, by the cited protocol, is this:
the document's intended audience consists solely of people who
understand both the variant of Chinese spoken in China _and_ the
English language. You don't want to say that, do you?

No, I don't. You're right. I should have read that text more closely.

DU

 

[Erik Harris]

The following was tested and works perfectly and accordingly in MSIE 6
for windows, Mozilla 1.6, Opera 7.50 PR2, K-meleon 0.8.2, MyIE2 v.
0.9.12, Firefox 0.8: (...)
div.back {background-color: #700; margin-bottom:2em;}
div.section
{
background: #FBFBFF;
position: relative; right: 1em; bottom: 1em;
padding: 1em;
border: thin solid #999;
}

Thanks! That did the trick, though everything is offset to the left (instead
of offsetting the shaow, it offsets the foreground). It's not a big deal,
since I've got margins on the main body, but it still looks a bit off. I may
also be able to fix it now that I've something to go on. Thanks for the
help.

Any idea what the original problem was? Does IE simply choke on negative
margins?

Also, you should be aware that some NS 7.x or Mozilla 1.x will get a
font dialog modal window because of your lang="zh": only 1 is enough to
trigger such window. I was forced to create a testpage on this last year
to verify this.

Hmm.. I never saw this when I was using Mozilla 1.x. It's good to know,
thanks. I put it in there just to be complete, but I don't see that any harm
would be done if it were taken out.

Thanks for the help again, DU. When I overhauled my pages to be HTML & CSS
compliant last June, you were very helpful then, too.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://www.eharrishome.com/cimac/

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.

 

[Mark Parnell]

Hmm.. I never saw this when I was using Mozilla 1.x.

Chances are you already have it installed?

 

[DU]

Thanks! That did the trick, though everything is offset to the left (instead
of offsetting the shaow, it offsets the foreground). It's not a big deal,
since I've got margins on the main body, but it still looks a bit off. I may
also be able to fix it now that I've something to go on. Thanks for the
help.

Any idea what the original problem was? Does IE simply choke on negative
margins?




Hmm.. I never saw this when I was using Mozilla 1.x.

That's because you have CJK fonts installed on your PC.

It's good to know,

thanks. I put it in there just to be complete, but I don't see that any harm
would be done if it were taken out.

If you leave the lang="zh" in that span and some Westerners visit your
site with NS 7.x or with a Mozilla-based browser, they will get a font
download dialog window for Chinese font: they will most likely close
that window only to find your page and they won't/might not even
understand where are the Chinese text in your page. All this happened to
me last year.

Thanks for the help again, DU. When I overhauled my pages to be HTML & CSS
compliant last June, you were very helpful then, too.

DU

 

[Erik Harris]

Chances are you already have it installed?

If I do, it's not a font that is selectable in, say, MS Word. Since the
section being referred to above is for Romanized Chinese words and not
Chinese characters, no special font is needed. And I'm not _nearly_ close
enough to literate in Chinese that I'd have intentionally installed such a
font. I know enough to get by with the gung fu aspect of my training
(pronunciation and pinyin spelling), and can recognize only a few characters.

It's possible that they're installed and Windows hides them away someplace
only to be used in certain circumstances, though. I don't pretend to
understand everything Windows does behind the curtain. That level of
understanding started to escape me about the time Windows 95 came out, and
decreased further with Win2K and XP.

--
Erik Harris n$wsr$ader@$harrishom$.com
AIM: KngFuJoe http://www.eharrishome.com
Chinese-Indonesian MA Club http://www.eharrishome.com/cimac/

The above email address is obfuscated to try to prevent SPAM.
Replace each dollar sign with an "e" for the correct address.