: Minor CSS issue 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

@Kristi927

The width:101.3% will probably not cause cross browser issues, but it will cause your page to always show vertical scrollbar.

What will cause cross browser issues is the -moz-box-shadow effect, which is Firefox specific. See Kyle Sevenoaks' answer for how to support all browsers with the shadow effect.

Vote Up Vote Down

@Si6392903

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

Vote Up Vote Down