The Holly Hack

Writing about web page http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

Tonight I’m getting my blog back to its roots.

First up, some background. I’m currently developing a website for a society that I belong to, and I’m being a very good boy and using semantic code, css and no tables (unless I have tabular data). I’d like to share with you the ‘Holly Hack’ for it is pure genius, and solved a problem I thought was intractable. You see its been a long while since I developed for the web properly, i.e. producing production code. In the mean time tables have become shunned in favour of divs, spans and tons of css. I’ve got myself past the ‘i know how to do it in tables, so how can i emulate that behaviour?’ stage and moved to a halfway house of ‘I’ve done it without tables, but it doesn’t quite work right, I wish I could use tables.’
The problem is, is that although css is amazing and very powerful it is rather dependent of the browser rendering the markup properly. Firefox is a joy, and things do what you want, but Internet Explorer, well shame on you.
One particular problem was that a container of floating elements without a specified width would not render the correct size, i.e. enough to contain them and no more. The solution to this problem came in the form of the ‘Holly Hack’ which was amusing to me because my housemates name is Holly. In any case the ‘Holly Hack’ is:

/* Hides from IE5-mac \ */
* html .somediv {height: 1%;}
/* End hide from IE5-mac */

It does a number of things, 1. only IE understands the CSS selector ’* html’, well in fact it has a rather strange implementation where html is not a ‘top level’ tag!
2. The height of the div is set to be too small for the content, but IE expands the container for us, and rather happily to the correct size!

It curious that the bugs in IE often ‘balance out’.

[Edit: the missing ‘slash’ has been inserted!]

: 06 Jun 2006 23:40 |  Tags: Computery Stuff CSS Web Design |  Comments (3) |  Report a problem