I made one of those interesting discoveries that make you go WTF. Apparently, when I was messing around with CSS on Friday I accidentally developed a style sheet that can crash IE6 and IE7 under certain circumstances. The code snippet at fault here looks something like this:
blockquote p:first-letter {
float:left;
color:#7777;
font-size: 18px;
line-height: 0px;
padding-top: 0px;
margin-top: -3px;
}
}
Essentially what this is trying to do is to make nice drop-caps in blockquote blocks. You have probably seen them already popping up around the site. I figured they are kinda cool, and make the quotes look more distinctive and add some interesting dynamic to the site. Unfortunately, they also crash IE with a lovely “This program has performed an illegal operation” error. Not all blockquote blocks caused it – but the one in the Free Public Wifi post did it every single time.
If you google this issue you will see it is a well known bug that was never fixed in IE7. Some people claim this only happens when the first letter of the paragraph is also part of a hyperlink but as you can see this is not true. It appears that just about every fucking thing may cause it – borders, backgrounds, font styling. Anything and everything. IE just can’t deal with this selector for some reason.
Good news is that I fixed it. How you may ask? I did it with the oldest CSS hack in the book:
html>body blockquote p:first-letter {
float:left;
color:#7777;
font-size: 18px;
line-height: 0px;
padding-top: 0px;
margin-top: -3px;
}
You see, IE6 does not understand the html>body syntax which makes it skip this rule altogether. Unfortunately this hack doesn’t work in IE7 which makes me a sad panda. The final solution that excludes both IE6 and IE7 and thus prevents them from crashing uses the star pipe hack discovered by The Front End blog.
*|html blockquote p:first-letter {
float:left;
color:#7777;
font-size: 18px;
line-height: 0px;
padding-top: 0px;
margin-top: -3px;
}
See kids, this is why supporting W3C standards is important, and why Joel Spolsky is such a fucking tool for claiming otherwise. No other browser in the known universe has any issues with this tiny little snippet of CSS. IE on the other hand blows up, and crashes hard. Do you still think IE is a decent browser?
TLDR version for IE users: your browser sucks!
[tags]css, first-element, ie, internet explorer, css hacks[/tags]
Hehe, I like the fact that, in the eyes of the almighty search engines, you’ve created a weak link between the phrase “Joel Spolsky is such a fucking tool” and his website. :lol:
To be perfectly honest, no surprises here – some new random code snippet that IE chokes on… nothing new.
In widly unrelated news, the trial version of the Creature Creator from Spore got leaked onto the net a day early. No money to be saved since it’s just the trial, but it’s here now.. not tomorrow, now! … NOW! :mrgreen:
[quote post=”2522″]Hehe, I like the fact that, in the eyes of the almighty search engines, you’ve created a weak link between the phrase “Joel Spolsky is such a fucking tool” and his website.[/quote]
Actually, I linked to my own post. I guess I wasted a pretty good opportunity to googlebomb Joel there. :(
[quote post=”2522″]In widly unrelated news, the trial version of the Creature Creator from Spore got leaked onto the net a day early. No money to be saved since it’s just the trial, but it’s here now.. not tomorrow, now! … NOW![/quote]
LOL. So much for the draconian DRM they were planning to put on top of Spore. :P
I was watching the live video on ustream all yesterday… its not “leaked” EA sent him a copy of it…
in widly unrelated news:
You know.. you COULD just create a second stylesheet and do the <!– if[IE] – stylesheet –>
Thing
I could… But then I would have 2 style sheets to worry about. And two documents to fetch as the page is loading. It seems a bit cleaner this way.
Also, in this case I want IE to simply ignore this rule. If I created a second style sheet I would have to overwrite ALL the values I specified in that rule – meaning padding, margin, font size, color and etc… These are inherited from all over the place, and I’m not even sure what they should be. As you can see, the blockquotes in comments use a smaller font that the ones in the main body of the post.
Also, I would still be using the :first-element syntax in the IE stylesheet – which means it could still crash it. So I think the star-pipe hack is a better solution here.
I don’t know if i posted this earlier or am just crazy (probably in your spam que I comment too much sorry):
When working on my personal site (a while ago it was the blog.gp one) I just turned off stylesheets for Internet Explorer and made a big banner saying “YOU ARE USING INTERNET EXPLORER, SINCE YOUR BROWSER SUCKS YOU CAN ONLY VIEW MY CONTENT WITHOUT FORMATTING, PLEASE UPGRADE TO FIREFOX, OPERA, or FLOCK TODAY”
:D it was great.
I think it would be cool to have a web wide “Block IE Day” where all the websites who take part would block IE from their site for a day and redirect to firefox.com (shoulda done it on download day.. and planned this more out). Or even just what I did, and have a “MOON IE DAY” where we show IE our Naked ‘s
Yeah, but I kinda like to be accessible to folks with IE also – you know, for example the poor souls who are not allowed to install Firefox on their work computer.
These poor souls could run the portable version of Firefox from their USB-key, as I do right now!…
BTW: why use CSS hacks when you could use conditional comments? This method is IMHO more efficient for sorting out the different IE-versions, no? And it’s kinda more self-documenting.
While the hacks vs conditional comments argument is indeed worth debating, I personally think this particular instance the hack is more valuable:
1. we want to apply a certain rule to everything but IE (sort of oposite of what conditional comments do)
2. if we use conditional comments, the rule will be applied, then overridden instead of just ignored
3. the IE specific style sheet will still be using the :first-element and will need to override the margin, padding, font size and other attributes
4. If you modify margin, padding and font size using the :first-element IE will crash – ego, IE specific stylesheet here is not the way to go
Also, I will argue that having the select few rules ignored is more maintainable than two separate style sheets since it keeps things in a single file.
Luke: I quite understand your concern about the maintainability issue.
Still, you could use the negative condition <!–[if !IE]>–> (“if NOT IE”) to make IE ignore any rules you wish… (which is sort of opposite of what other conditional comments do :-P).
The trouble with CSS hacks, is that they usually end up skrewing something up in the next IE-release.
Ah, good point. I forgot you can do the negation there. :P
Knowing my luck IE8 will be able to handle the *| notation, but will still crash on :first-element. :(