Archive for the ‘css’ Category

Vertical Centering with a Floated Shim

Tuesday, January 24th, 2006

Lots of designers have used this trick to vertically center blocks of known size in browser windows but, as Jon Hicks points out, some content may be cropped if the browser window is too small. Though it requires a little extra markup, my solution addresses this problem by positioning a shiv shim instead of the content itself.

The purpose of this technique is to center blocks of known height in the browser window. In the example file, the blue rectangle should be centered, not the text inside of it. It has been successfully tested on Safari, Firefox, Opera, and
Internet Explorer versions 5 through 7 on PC.

The example file is here . The source should explain it all.


Tuesday, January 24th, 2006

While working on an earlier version of xa, I discovered that IE4 incorrectly parses commented asterisks (/***/) in stylesheets. Check out the example to see how to exploit it. I've since submitted the hack (which does validate) to the relevant websites.