Wednesday, December 14, 2011

Z-index treated differently in Firefox vs Safari/Chrome

Just came across an interesting little issue while making a "background" image inside a customised Slidedeck slider. I was basically using the z-index property to push the main image behind the text inside the container. I did this by setting the z-index for the image to -1. This worked perfectly in Firefox. However, in Safari and Chrome, my text was not showing up at all!

Turns out that "default" z-index properties seem to be handled slightly differently in Safari and Chrome. Setting the z-index of the text container explicitly to 1 (positive) solved the problem immediately. Curiously, setting it explicity to zero made no change.

No comments:

Post a Comment