If I could, I’d give you a special present this christmas – I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks – as does IE on Windows – so I can only offer to share with you a couple of CSS tips to ease the pain of working with that piece of crappy software.
1. Reset browser styles
To start off with the right leg, I suggest you reset the styles to some sensitive defaults, so all browsers will render the page as similarly as possible. To do so, you can use one of the
many suggested templates to create a reset.css file and include it before you include any other of your style sheets.
2. Add IE 5.5+ png file support
Angus Turnbull over at
TwinHelix has written a nice
htc script to bring png images support to IE 5.5+. To use it, simply add the following css code into your ie.css file, which you’ve previously included with
IE conditional comments – you
do use conditional comments, right?
img, h1, .class-with-png-background-image {
behavior: url(../htc/iepngfix.htc);
}
I won’t go deep into explaining how this works as you can easily find more info on the
author’s site. Suffice to say that you need to call the iepngfix.htc file as an ie-only
dhtml behaviour attribute on the img element and/or any other element where you may want to use png background images on.
The only problem with this script that I’ve found so far, is that it won’t work with repeating background images.
Also you should make sure that the server is configured to serve .htc files correctly. If the script doesn’t work, all you need to do is to add the following line to your .htaccess file, and you should be good to go:
AddType text/x-component .htc
3. Add IE < 7 custom :hover support
Another annoying IE problem is that it doesn’t support css :hover events on elements other than links. This can be easily solved with another .htc script, this time written by
Peter Nederlof and you can download it on the
Whatever:hover script page.
This script is even easier to use than the png trick, because all it takes is one line in your ie-specific css file:
body { behavior:url("../htc/csshover.htc"); }
4. “Give layout” to elements
The source of most of Internet Explorer’s bugs comes from an IE-only property called
layout. An element can either have layout or not, which determines how an element is rendered by the browser. Most of IE bugs can be squashed by giving layout to the offending element, which is done simply by assigning one of the following properties to that element:
position: absolute [IE 6 & 7]
float: left [IE 6 & 7]
float: right [IE 6 & 7]
display: inline-table [IE 6 & 7]
any width or height value [IE 6 & 7]
zoom [IE 6 & 7]
min-width [IE 7]
max-width [IE 7]
min-height [IE 7]
max-height [IE 7]
overflow [IE 7]
Among these, the most common way to “give layout” to an element – and thus, eliminate the bug – is to assign the following rule:
#the-buggy-element { height: 1%; }
However, if the problem persists, you might want to add a “position” to that element. This fixes the problem more often than not.
#the-buggy-element {
position: relative;
height: 1%;
}
An exhaustive article on
having layout can be found at
http://www.satzansatz.de/cssd/onhavinglayout.html.
5. Prevent the double margin bug from crumbling your layout
This one has saved me a lot of headaches, because IE 6 has a tendency to
double the margins of every element, which has been floated
and assigned a left/right margin. To overcome this bug, simply set
display: inline on the offending element. This will magically make the bug disappear with no adverse effects on your layout.
If you’ve found these tips useful and your future IE-development experience somewhat more pleasant, I invite you to share your thoughts by commenting below.
Blogger supplies every blog with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">