Home/ Questions/Q 4625704
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T03:18:40+00:00

I got a problem rendering box-shadows over floating divs! Ive tested in chrome and

  • 0

I got a problem rendering box-shadows over floating divs!
Ive tested in chrome and firefox with the same result.

    <html>
        <head>
        </head>
        <body>
            <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
            </div>
            <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
            </div>
        </body>
    </html>

Edit: The div on top doesn’t render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?

regards
/Joel

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.

    You need add all of the following

    -moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;

    -webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it’s universally supported the last rule will cover all browsers.

    Edit: To get the top div’s dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.

    • 0