Articles CSS Box-Shadows-in-all-browsers

---

tutorials - CSS and Web-Development.

Box Shadows in all browsers

Published Thu. Sep. 20, 2012

---

YOU NEED THE POSITIONING, BACKGROUND COLOR, HEIGHT, and THE BLUR FILTER IN ORDER TO WORK IN IE…A LITTLE WACKY WHEN APPLYING A SHADOW TO AN ELEMENT THAT SPANS 100%…THE ADDED SHADOW CAUSED A HORIZONTAL SCROLL SINCE IT IS GOING PAST 100%…99% FIXED BUT OVERFLOW HIDDEN DIDNT WORK FOR ME
(ONLY WORTH DOING IF THE SHADOW IS NECESSARY IN IE 8 AND PREVIOUS)

#topwrapper {
    /* position: relative; */
    width: 99%;
    /* overflow: hidden; */
    height: 140px;
    background: #FFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    filter:    progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.40');
    zoom: 1;
}
#top {
    position: absolute;
    width: 100%;
    margin: 0px;
    background: url(/getfile.php/1825005.2055.ccrqrrqsts/header-bg.jpg) repeat-x top;
    border-bottom: 5px solid #000000;
}