61622 2011-05-27 04:39:44 -0700 box-shadow doesn't render if optional color is omitted 2012-04-05 16:27:07 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC Windows 7 RESOLVED DUPLICATE 58511 P2 Normal --- 1 rludgero webkit-unassigned dtharp eoconnor kulanthaivel simon.fraser oldest_to_newest 411333 0 rludgero 2011-05-27 04:39:44 -0700 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Documento sin título</title>  <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? 411723 1 95232 simon.fraser 2011-05-27 17:02:28 -0700 Created attachment 95232 Testcase 411733 2 simon.fraser 2011-05-27 17:21:33 -0700 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. 411802 3 simon.fraser 2011-05-27 21:33:38 -0700 *** This bug has been marked as a duplicate of bug 58511 *** 411814 4 rludgero 2011-05-27 23:34:56 -0700 (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. 411854 5 simon.fraser 2011-05-28 09:19:58 -0700 Safari 5.0.5 doesn't support unprefixed box-shadow. 412190 6 rludgero 2011-05-30 04:46:34 -0700 (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>  <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 #000000; 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 #000000; 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>   Thanks. 412236 7 simon.fraser 2011-05-30 08:25:03 -0700  is not a valid CSS comment. This is breaking your CSS. 412253 8 rludgero 2011-05-30 09:23:28 -0700 (In reply to comment #7) >  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>  <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> ----------------------------------------------------------------------------- 412258 9 simon.fraser 2011-05-30 09:30:17 -0700 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. 412267 10 rludgero 2011-05-30 09:49:35 -0700 (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. 95232 2011-05-27 17:02:28 -0700 2011-05-27 17:02:28 -0700 Testcase shadowtest.html text/html 1221 simon.fraser PCFET0NUWVBFIEhUTUw+CjxodG1sPgo8aGVhZD4KPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1U eXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRmLTgiPgo8dGl0bGU+RG9jdW1lbnRv IHNpbiB0w610dWxvPC90aXRsZT4KCjwhLS1zdHlsZXNoZWV0cy0tPgoKPHN0eWxlPgpib2R5IHsK ICAgIGJhY2tncm91bmQtY29sb3I6IzQ0NDQ0NDsKICAgIG1hcmdpbjowIGF1dG87Cn0KCiNoZWFk ZXItd3JhcHBlciB7CiAgICBoZWlnaHQ6MzBweDsKICAgIG1hcmdpbjogMCBhdXRvOyAKICAgIHBv c2l0aW9uOnJlbGF0aXZlOwogICAgY2xlYXI6Ym90aDsKICAgIGZsb2F0Om5vbmU7CiAgICBiYWNr Z3JvdW5kLWNvbG9yOiM0NDQ0NDQ7CiAgICBwYWRkaW5nOjNweDsKICAgIGJvcmRlci1ib3R0b20t Y29sb3I6IzM1MzUzNTsKICAgIGJvcmRlci1ib3R0b20tc3R5bGU6c29saWQ7CiAgICBib3JkZXIt Ym90dG9tLXdpZHRoOjFweDsgICAgICAgIAogICAgLW1vei1ib3gtc2hhZG93OiAwcHggMHB4IDEw cHg7CiAgICAtd2Via2l0LWJveC1zaGFkb3c6IDBweCAwcHggMTBweDsKICAgIGJveC1zaGFkb3c6 IDBweCAwcHggMTBweDsKICAgIHotaW5kZXg6OTk5OTsgICAgCn0KCiN3cmFwcGVyIHsKICAgIGhl aWdodDo3MjBweDsKICAgIG1hcmdpbjogMCBhdXRvOyAKICAgIHBvc2l0aW9uOnJlbGF0aXZlOwog ICAgY2xlYXI6Ym90aDsKICAgIGZsb2F0Om5vbmU7Cn0KCiNmb290LXdyYXBwZXIgewogICAgaGVp Z2h0OjMwcHg7CiAgICBtYXJnaW46MCBhdXRvOyAKICAgIHBvc2l0aW9uOnJlbGF0aXZlOwogICAg Y2xlYXI6Ym90aDsKICAgIGZsb2F0Om5vbmU7ICAgIAogICAgcGFkZGluZzozcHg7CiAgICBib3Jk ZXItdG9wLWNvbG9yOiMzNTM1MzU7CiAgICBib3JkZXItdG9wLXN0eWxlOnNvbGlkOwogICAgYm9y ZGVyLXRvcC13aWR0aDoxcHg7ICAgICAgICAKICAgIC1tb3otYm94LXNoYWRvdzowcHggMHB4IDEw cHg7CiAgICAtd2Via2l0LWJveC1zaGFkb3c6MHB4IDBweCAxMHB4OwogICAgYm94LXNoYWRvdzow cHggMHB4IDEwcHg7CiAgICB6LWluZGV4Ojk5OTk7ICAgIAp9Cjwvc3R5bGU+Cgo8L2hlYWQ+Cgo8 Ym9keT4KCgo8c2VjdGlvbiBpZD0iaGVhZGVyLXdyYXBwZXIiPjwvc2VjdGlvbj4KCjxzZWN0aW9u IGlkPSJ3cmFwcGVyIj48L3NlY3Rpb24+Cgo8c2VjdGlvbiBpZD0iZm9vdC13cmFwcGVyIj48L3Nl Y3Rpb24+CgoKPC9ib2R5Pgo8L2h0bWw+