how to fix your site for IE
While you are new to handcoding – you will inevitably write CSS code which IE just messes up… :”( In this moment you’d probably like to have a little IE voodoo doll to stick pins into…. :)
But don’t worry – the more you work with the code – the more you will understand how to structure your HTML and CSS better, avoiding most if not all IE hacks. And hopefully with IE8 – if we’re lucky enough – we will have a better version yet…
This post is merely a resources collection – to give you a few links to articles, resources and utitlities…
the oddities of IE highlighted:
- positioniseverything – Explorer Exposed!
“These CSS bugs are all found only in Internet Explorer, versions 5 and higher. To see the demos properly, they must be viewed in IE, of course.” - positioniseverything – expanding box problem
“It’s an unfortunate fact that Internet Explorer will always incorrectly expand any dimensionally restricted block element so that oversize content is unable to overflow, as the specs require that content to do.” - wiki – Internet Explorer box model bug
“The Internet Explorer box model bug is one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS). It affects CSS-aware versions of Microsoft’s Internet Explorer Web browser for Windows up to version six.” - quirksmode – CSS contents and browser compatibility
- compatibility chart - microsoft – IE blog
- Mircosoft’s blog on any news concerning IE
various hacks and techniques to fight the IE bugs:
- wiki – CSS filter
“A CSS Filter is a coding technique used to hide or show CSS markup depending on the browser’s brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards.” - tantek’s box model hack
the famous box model hack – to fix the bug for IE 5/5.5 - cavemonkey – The Ultimate IE Hack Guide
“You’ve designed the perfect website. You’re checking it in all browsers. Firefox – check, Safari – check, Opera – check, Internet Explorer – ah, am I looking at a website? We’ve all been there.” - kickasswebdesign – Hacks in various flavours
“There’s an article on the Front End about a new parsing bug that was introduced in IE7 that now allows us to target in ONE stylesheet the different IE versions.” - glish – LAYOUT TECHNIQUES: hacks
“If you are trying to do pixel-perfect cross-browser CSS layout, you will often run into problems with IE5x PC because it radically mis-implements the box model as prescribed by the W3C. There are several workarounds for this problem, not the least of which is to simply not design with pixel precision in mind. But assuming you just have to get it pixel-perfect, no way around it, well here are a couple of workarounds that can help you…” - webcredible – CSS hacks & browser detection
“The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.”
[image © *chisa, found on deviantart.com]