<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title> <!--stylesheets--> <style> body { background-color:#444444; margin:0 auto; } #header-wrapper { height:30px; margin: 0 auto; position:relative; clear:both; float:none; background-color:#444444; padding:3px; border-bottom-color:#353535; border-bottom-style:solid; border-bottom-width:1px; -moz-box-shadow: 0px 0px 10px; -webkit-box-shadow: 0px 0px 10px; box-shadow: 0px 0px 10px; z-index:9999; } #wrapper { height:720px; margin: 0 auto; position:relative; clear:both; float:none; } #foot-wrapper { height:30px; margin:0 auto; position:relative; clear:both; float:none; padding:3px; border-top-color:#353535; border-top-style:solid; border-top-width:1px; -moz-box-shadow:0px 0px 10px; -webkit-box-shadow:0px 0px 10px; box-shadow:0px 0px 10px; z-index:9999; } </style> </head> <body> <section id="header-wrapper"></section> <section id="wrapper"></section> <section id="foot-wrapper"></section> </body> </html> ----------------------------------------------------------------------- Webkit box shadow doesn't display the shadow in header and foot wrapper, in the others browsers like firefox,ie9 and opera work perfect. Why?
Created attachment 95232 [details] Testcase
The issue is that you're not supplying a shadow color. The spec says "omitted colors are a UA-chosen color" but WebKit doesn't allow that yet.
*** This bug has been marked as a duplicate of bug 58511 ***
(In reply to comment #2) > The issue is that you're not supplying a shadow color. The spec says "omitted colors are a UA-chosen color" but WebKit doesn't allow that yet. I think the problem is in versions of chrome 11.0.696.71 and Safari 5.05, because i can't see the shadow, even adding the color.
Safari 5.0.5 doesn't support unprefixed box-shadow.
(In reply to comment #5) > Safari 5.0.5 doesn't support unprefixed box-shadow. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title> <!--stylesheets--> <style> body { background-color:#444444; margin:0 auto; } #header-wrapper { height:30px; margin: 0 auto; position:relative; clear:both; float:none; background-color:#444444; padding:3px; border-bottom-color:#353535; border-bottom-style:solid; border-bottom-width:1px; -moz-box-shadow: 0px 0px 10px;<!--firefox--> -webkit-box-shadow: 0px 0px 10px #000000;<!--chrome and safari--> box-shadow: 0px 0px 10px;<!--opera and ie9--> z-index:9999; } #wrapper { height:720px; margin: 0 auto; position:relative; clear:both; float:none; } #foot-wrapper { height:30px; margin:0 auto; position:relative; clear:both; float:none; padding:3px; border-top-color:#353535; border-top-style:solid; border-top-width:1px; -moz-box-shadow:0px 0px 10px;<!--firefox--> -webkit-box-shadow:0px 0px 10px #000000;<!--chrome and safari--> box-shadow:0px 0px 10px;<!--opera and ie9--> z-index:9999; } </style> </head> <body> <section id="header-wrapper"></section> <section id="wrapper"></section> <section id="foot-wrapper"></section> </body> </html> <!-- The shadow in IE9, Opera 11, firefox 4, show such as .png below: http://imageshack.us/photo/my-images/862/fireshotcapture.png/ --> <!-- I still have trouble viewing in safari and chrome, both still show no shadow. --> Thanks.
<!--firefox--> is not a valid CSS comment. This is breaking your CSS.
(In reply to comment #7) > <!--firefox--> is not a valid CSS comment. This is breaking your CSS. My problem is not the comment, if you copy the code and look in the others browsers, you see and understand what i want... The shadow in IE9, Opera 11, firefox 4, show such as .png below: http://imageshack.us/photo/my-images/862/fireshotcapture.png/ I still have trouble viewing in safari and chrome, both still show no shadow. Sorry for my basic english, and thank you. ------------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title> <!--stylesheets--> <style> body { background-color:#444444; margin:0 auto; } #header-wrapper { height:30px; margin: 0 auto; position:relative; clear:both; float:none; background-color:#444444; padding:3px; border-bottom-color:#353535; border-bottom-style:solid; border-bottom-width:1px; -moz-box-shadow: 0px 0px 10px; /*mozilla-firefox*/> -webkit-box-shadow: 0px 0px 10px #000000; /*chrome and safari*/ box-shadow: 0px 0px 10px; /*opera and ie9*/ z-index:9999; } #wrapper { height:720px; margin: 0 auto; position:relative; clear:both; float:none; } #foot-wrapper { height:30px; margin:0 auto; position:relative; clear:both; float:none; padding:3px; border-top-color:#353535; border-top-style:solid; border-top-width:1px; -moz-box-shadow:0px 0px 10px; /*mozilla-firefox*/ -webkit-box-shadow:0px 0px 10px #000000; /*chrome and safari*/ box-shadow:0px 0px 10px; /*opera and ie9*/ z-index:9999; } </style> </head> <body> <section id="header-wrapper"></section> <section id="wrapper"></section> <section id="foot-wrapper"></section> </body> </html> -----------------------------------------------------------------------------
Please stop pasting large chunks of markup into the. Use the attachment feature, and make a minimal testcase (single div). /*mozilla-firefox*/> still bad here.
(In reply to comment #9) > Please stop pasting large chunks of markup into the. Use the attachment feature, and make a minimal testcase (single div). > > /*mozilla-firefox*/> > still bad here. Forget, i found the solution, thank you for your time.