Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

StefSSU

macrumors regular
Original poster
Jul 18, 2009
144
5
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
 
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.
 
Last edited:
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.
 
Last edited:
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.