I have discovered an unexpected problem with one of my layouts in Firefox. I'm using a border-radius to shape an element and applying a box-shadow to it to give it some depth. When I pull up the layout in Firefox, most of these elements render properly - they're all coded the same way. But occasionally, one of the elements is shaped properly - but its box-shadow forms a normal rectangle, like it's not being clipped properly by the border-radius property.
I've done some searching to see if I can find a common solution, but nothing's turned up. Here's a tiny screencap, followed by the code producing this effect:
I would really appreciate some help on figuring this one out. The simple solution is obviously to ditch the box shadows, but it makes the elements look too flat.
I've done some searching to see if I can find a common solution, but nothing's turned up. Here's a tiny screencap, followed by the code producing this effect:
I would really appreciate some help on figuring this one out. The simple solution is obviously to ditch the box shadows, but it makes the elements look too flat.