CSS "drop shadow" block element effect

Discussion in 'HTML' started by Erik Harris, Feb 29, 2004.

  1. Erik Harris

    Erik Harris Guest

    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.
    Erik Harris, Feb 29, 2004
    #1
    1. Advertising

  2. Erik Harris

    Trogdor Guest

    On 2004-02-29 11:00:43 -0600, Erik Harris <n$wsr$ader@$harrishom$.com> said:

    > 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/
    Trogdor, Feb 29, 2004
    #2
    1. Advertising

  3. Erik Harris

    Erik Harris Guest

    On Sun, 29 Feb 2004 13:51:06 -0600, Trogdor <>
    wrote:
    >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.
    Erik Harris, Feb 29, 2004
    #3
  4. Erik Harris

    Mark Parnell Guest

    On Sun, 29 Feb 2004 12:00:43 -0500, Erik Harris
    <n$wsr$ader@$harrishom$.com> declared in alt.html:

    > 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.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Feb 29, 2004
    #4
  5. Erik Harris

    Erik Harris Guest

    On Mon, 1 Mar 2004 08:47:50 +1100, Mark Parnell
    <> wrote:

    >On Sun, 29 Feb 2004 12:00:43 -0500, Erik Harris
    ><n$wsr$ader@$harrishom$.com> declared in alt.html:
    >
    >> I've been playing with the website for the gung fu club that I run, trying to


    >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.

    >> 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.


    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.
    Erik Harris, Feb 29, 2004
    #5
  6. Erik Harris

    DU Guest

    Erik Harris wrote:
    > On Mon, 1 Mar 2004 08:47:50 +1100, Mark Parnell
    > <> wrote:
    >
    >
    >>On Sun, 29 Feb 2004 12:00:43 -0500, Erik Harris
    >><n$wsr$ader@$harrishom$.com> declared in alt.html:
    >>
    >>
    >>>I've been playing with the website for the gung fu club that I run, trying to

    >
    >
    >>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.
    >
    >
    >>>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.

    >
    >
    > 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
    DU, Mar 2, 2004
    #6
  7. Specifying the language (lang attribute)

    Under Subject: Re: CSS "drop shadow" block element effect
    DU <> wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Mar 2, 2004
    #7
  8. Erik Harris

    DU Guest

    Re: Specifying the language (lang attribute)

    Jukka K. Korpela wrote:
    > Under Subject: Re: CSS "drop shadow" block element effect
    > DU <> wrote:
    >
    >
    >>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,



    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).
    >
    >
    >>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?
    >


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

    DU

    >
    >>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, Mar 2, 2004
    #8
  9. Erik Harris

    Erik Harris Guest

    On Tue, 02 Mar 2004 01:07:50 -0500, DU <> wrote:

    >> 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.
    >>
    >>>>The results in IE 6 are strange, though.


    >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.
    Erik Harris, Mar 2, 2004
    #9
  10. Erik Harris

    Mark Parnell Guest

    On Tue, 02 Mar 2004 16:50:35 -0500, Erik Harris
    <n$wsr$ader@$harrishom$.com> declared in alt.html:

    >>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":

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


    Chances are you already have it installed?

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Mar 2, 2004
    #10
  11. Erik Harris

    DU Guest

    Erik Harris wrote:
    > On Tue, 02 Mar 2004 01:07:50 -0500, DU <> wrote:
    >
    >
    >>>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.
    >>>
    >>>
    >>>>>The results in IE 6 are strange, though.

    >
    >
    >>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.


    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
    DU, Mar 2, 2004
    #11
  12. Erik Harris

    Erik Harris Guest

    On Wed, 3 Mar 2004 09:10:39 +1100, Mark Parnell
    <> wrote:

    >On Tue, 02 Mar 2004 16:50:35 -0500, Erik Harris
    ><n$wsr$ader@$harrishom$.com> declared in alt.html:
    >
    >>>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":


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


    >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.
    Erik Harris, Mar 3, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Olivier
    Replies:
    2
    Views:
    3,736
  2. Woolly Mittens
    Replies:
    8
    Views:
    425
    Woolly Mittens
    Sep 22, 2003
  3. morrell
    Replies:
    1
    Views:
    938
    roy axenov
    Oct 10, 2006
  4. Replies:
    0
    Views:
    87
  5. Replies:
    3
    Views:
    88
    Gus Richter
    Feb 26, 2005
Loading...

Share This Page