Today, I got complaint after complaint about the page showing up funny for some people. This is, all of them were using Internet Explorer. Since I don’t even use a PC, I didn’t know there was a problem. But, because I love you people so much, I thought I’d take a look at what was going on, and fix it.
Three hours later, I couldn’t figure out how come Opera, Firefox, and Safari had no problems rendering the page correctly, yet IE made such a mess of it. After finding out that my CSS technique was fine, I started to think that maybe this was only an IE bug. I mean, Internet Explorer 6 is so new, and from such a small, struggling company.
But I did find, going through my own code, a little trick somebody else found. If you stick an asterisk in front of the code statement, it won’t show up in IE 6 or earlier. I think. I dunno. But here’s what mine looks like:
* blockquote {
color: #a54200;
font-size: smaller;
font-style: oblique;
margin: 15px 25px 0 15px;
padding-right: 15px; padding-left: 7px;
border-left: 5px solid #f99d1b;
}
Yes, the <blockquote> tag was the problem. For some reason, the only thing you need to destroy the layout of your page (or, as I’m told, crash IE) is to have this extremely complicated statement in your CSS:
padding: 1px 2px 3px 4px;
Yes, I know, that’s it. It’s mind-boggling, but IE chokes on that. And has, for a long, long time. Not to worry, however, with my IE hack, you get a different <blockquote> tag. Yay!
Well, not all yay!, just yet. Sure, now IE will display a non-page-layout-destroyerating blockquote, but how do I get that lovely-looking blockquote that you’ve all come to love and enjoy in browsers that have a rendering engine from after 1997? More hacking.
Luckily, again, another somebody else figured it out. The trick is to stick some formatting in there that a modern browser could figure out, but not…you know…
The hack is to stick head:first-child+body [statement] in front of the code you want to hide from IE 6 and below. It also works on Opera 6 and below, and I’m not sure if anybody’s still using that one, since 8 is out now, and 9 is coming. Huh, getting off version 6…what a nice idea…
Anyways, in my example, I’ve got head:first-child+body blockquote { in there, shielding the code from IE’s page-messer-upping ways:
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
/* the following selector is NOT seen by Opera 6 (and below) or by IE6/win */
head:first-child+body blockquote {
color: #777;
font-size: inherit;
font-style: normal;
background-color: #f9f9f9;
margin: 15px 25px 0 20px;
padding: 3px 15px 3px 20px;
border-left: 10px solid #f99d1b;
}
So, I’m happy. Well, until the next bizarre IE bug shows up from IE 7. Which should be happening in 5…4…3…
