June 06, 2006

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!]

- 3 comments by 0 or more people Not publicly viewable

  1. meir

    in your code, you write:

    /* Hides from IE5–mac */

    however, you forgot to actually put the \ slash which does the hiding from ie5-mac. the line should read:

    /* Hides from IE5–mac */

    03 Jan 2007, 14:25

  2. meir

    oops. apparently the backslash escapes a character. so we’ll try this. Ahem. The correct Holly hack, in all its glory, should read:

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

    03 Jan 2007, 14:28

  3. meir


    Okay, I can’t use backslash for whatever reason, so make sure add a backslash before the closing */ in the first line of the holly hack, otherwise it won’t work.

    03 Jan 2007, 14:30

Add a comment

You are not allowed to comment on this entry as it has restricted commenting permissions.

June 2006

Mo Tu We Th Fr Sa Su
May |  Today  | Jul
         1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30      

Search this blog


Not signed in
Sign in

Powered by BlogBuilder