Minor CSS issue

by

I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter’s, where they use a shadow effect.

#header {
    background-color: #990000;
    width:101.3%;
    margin-left:-8px;
    margin-top:-8px;
    height:40px;
    -moz-box-shadow: 1px 1px 10px #D7D7D7;
}

Also, the way I have set the width is it likely going to create cross browser issues?

Answer

There is a known bug with box-shadow in some browsers which has been documented but not resolved yet.

For cross compatible CSS code (not sure it’ll validate with the vendor prefixes) use this: 

.shadow {
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }

You could forgo all this and just use a BG image, 25px wide and whatever you want tall, with the drop shadow as you want. Save it as a 24bit PNG and it will render as pretty as you see in Photoshop.

As an aside, questions about CSS/HTML should go on Stackoverflow.com and not here, this is a site for Graphic Design. Questions about website design should go on Doctype.com.

Hope some of this helps 🙂

Attribution
Source : Link , Question Author : AAA , Answer Author : Kyle

Leave a Comment