Variable Visions

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;
}