box-shadow in Google Chrome

[StefSSU]

Hi, need a little help from the web guru's.

So my site has a gallery page, with a bunch of images. I've used css to get border-radius, reflections, etc. The css reflections however don't render in all browsers, Firefox being the most important one. So as a graceful degradation I added a box-shadow to make the images look better in Firefox/Opera. Comparing Safari and Firefox/Opera, this works perfectly - reflection / no shadow in Safari, and shadow / no reflection in Firefox/Opera.

Google Chrome on the other hand, even though it uses webkit decides to render the box-shadow despite there being no -webkit- prefix. Is there any way to have the box-shadow display in FF/O but not in Chrome? The shadow kind of ruins the reflection.

The website is temporarily hosted here - costantini.mw gallery
While we're at it, the site is unfinished but some feedback on other pages and the design would be appreciated.

Cheers guys,

Stef

 

[elppa]

Google Chrome on the other hand, even though it uses webkit decides to render the box-shadow despite there being no -webkit- prefix

This is just because Chrome is using a newer build of Apple Webkit than Safari 5. If you download the webkit nightly you will see box-shadow is picked up without needing the vendor specific -webkit prefix. When Safari 6 arrives you will have the same issue you have with Chrome. It will render the reflection and the shadow.

Can't you just:

[1] Use -webkit-box-reflect (as you do currently for Safari)
[2] Include -o-box-shadow (for Opera)
[3] Include -moz-box-shadow (as you do currently for Firefox)
[4] Remove the box-shadow declaration

So:
Safari/Chrome: -webkit-box-reflect
Opera: -o-box-shadow
Firefox: -moz-box-shadow

Surely that will be simplest way?

I know it would be nice to just use box-shadow, but those vendor prefixes won't be deprecated anytime soon.

 

[StefSSU]

Can't you just:

[1] Use -webkit-box-reflect (as you do currently for Safari)
[2] Include -o-box-shadow (for Opera)
[3] Include -moz-box-shadow (as you do currently for Firefox)
[4] Remove the box-shadow declaration

*slaps myself in the face*
Of course, all I had to do was put -o- before the box-shadow... Don't know why I'd forgotten about Opera's prefix.

Works great, thanks. Now, just to get Internet Explorer to render the page in a way that isn't completely ugly...

Thanks for the help. Any thoughts on the design then?

EDIT: Never mind, spoke too soon. It looks like -o-box-shadow doesn't work in Opera... For me, at least. Also Opera doesn't do the border-radius on the images any more (I believe it did do so). Not sure what's happening here.