CSS - Mozilla bug? box-shadow:inset not working properly

Question

Basically the below code should simply be a white page with a shadow around the edge. This works fine in Chrome but I can\'t seem to get it to work in Firefox!

Answer 1

So the answer marked as correct CSS - Mozilla bug? box-shadow:inset not working properly does not work for me. Why? Because the example includes no content. When you style the and elements with height: 100% it creates a strange bug where the 100% is technically registering as 100% of the viewport rather than 100% of the window height.

This is a great example of how to do this properly: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html. Styling the body and html elements at height: 100% is correct, however, your inner-shadow needs to be attached to another element (can't be body or html) and then min-height: 100% as well as box-shadow: 0 0 100px #000 attached to the shim, e.g.

html, body { height: 100% }
#styled-div { 
   min-height: 100%;
   box-shadow: 0 0 100px #000;
}