This is actually an old version of For the latest and greatest, check out the new site.

IE Sandwich Hack

While trying to debug some CSS on a site we were working on, Pixelworthy partners-in-crime Michael and Mark helped me to devise a new way to handle IE. I call it the IE Sandwich Hack.

Because of the finnicky nature of Internet Explorer's rendering engine, there’s only one way to ensure that all of the elements in your document render exactly as you specify it. The code looks like this:

* html * { display: none; }

That's right; the html selector is sandwiched between two universal selectors. Hence, the coining of the name, the IE Sandwich Hack. I’ve created a test page that shows the technique in effect. It’s only been tested in IE6, but it works there, and that’s good enough for me.


Nathan Smith said:

That's pretty simple + clever at the same time. I'd often joked with other CSS people about * html body { display: none; }, but I think your method more "universally" hides everything. Nice implimentation.

Posted on April 13, 2006 01:32 AM

Dan Mall said:

* gasp *

CSS people?! You’ve actually spoken to them?

Posted on April 13, 2006 08:14 AM

jacob harvey said:

I ran it through all the browsers I have installed. Other browsers (Firefox, Opera 8.5 and 9 tech preview) show it fine but IE 5, 5.5 and 6 do not. IE 7 beta displays the content.

And now I'm hungry for a sandwich...

Posted on April 13, 2006 11:23 AM

web said:

WOW -- I loaded up that crotchety old IE6 browser and it looked stunning!!

So clean -- so perfect.

Posted on April 13, 2006 11:32 AM

Alex Giron said:

Best name for a hack ever.

Great work. ;)

Posted on April 13, 2006 05:19 PM

Sorry: comments are closed.