Drop shadow on a block element?
Now. You would expect the same technique to work in the same way for block level elements wouldn't you? Well, they don't.
Sergio Villarreal came up with a cracking work around for this, using two background images. However I was quiet sure that this was not needed.
Fair enough Explorer has a bit of a problem with negative margins. It just so happens that I had to deal with this situation the other day.
The problem is that IE doesn't like block elements being moved to 'appear' outside another block element with negative margins. It will stop the inner element from going back further that the outer block element, and will force the outer block element to increase in width to compensate for the width of the inner block element.
So how did I work around it last time?
Position: Relative;
Yes, the workaround I have used in time before is to position the inner block element relatively. It then will appear to come out side the outer block element.
Let the code speak for it's self:
Check out the tests below;