Solution: IE “pulls the table-cloth” in some Jscripts

I have been playing with the JQuery version of Reflections  script and, lo and behold, noticed a strange behavior in IE.

When the reflection is applied, the containing block grows vertically, as intended. The following blocks are shifted further down the page – that’s the way it’s supposed to work.

But! the actual text within some of the blocks stays where it was, causing unholy mess on the page.

The general impression was that after a novice tries to pull the table-cloth from under some fancy china with only partial success.

After trying a bunch of things like the the Holy Hack and learning about the mystical hasLayout property and so on I was ready to give up.

Thankfully,  I noticed that the effect applied only to some blocks. Dah!

Some experimentation  showd that as long as there was an unordered list with a  “list-style-image: url(images/bullet.gif)” in the pertinent CSS, things were fine. The text behaved.

In fact not just the list behaved – all the text in the block stayed put! (Ok, on occasion it tried to jump up on load and then you could see it being pulled back to where  it really belonged.)

Some more experimentation and unorthodox thinking have shown that you do not need a list.


p { list-style-image: url(images/bullet.gif) }

worked fine. Because it should not be, no images appeared, and yet it served me well as an anchor of sorts.

I know, it’s ugly, so it is going into my iefix.css.

I would recommend that you apply it with more precision and with much caution: it worked in IE6, but I have no idea what it would do to IE 5 or 7.

Just for the heck of it I let it hit Firefox and it ignored inappropriate CSS as a good browser should.

So there. I hope it helps. Enjoy!


About this entry