How to avoid some Internet explorer hacks and other unavoidable hacks

2007-10-14

I will show you some simple internet explorer hacks and the best way to avoid them as much as possible

Internet explorer 6 and below does not implement a lot of CSS2's features and it has many bugs.

I always check my page during development time on all browsers, so I can rewrite some css or javascript to avoid hacks. I manage 90 percent of the time, but sometimes you just can't do one thing because one browser (in most of the cases internet explorer) does not support some features or has a bug.

One of the biggest problems is the wrong box model used by internet explorer. In standard browsers when you have for example a div with 100px width and add 5px margin and 5px padding then the resulting width will get 110px. This does not apply to internet explorer although.

Most of the time you can beat internet explorer with it's own weapons. Internet explorer has it's own css selectors like * html that works only on internet explorer, so you can use this selector to apply specific internet explorer style.

I usually do something like this.

#mydiv
{
	/*
	general style for all browsers
	*/
	width:100px;
	height:100px;
	padding:5px;
	margin:5px;
	
}
/* ie width fix*/

* html #mydiv
{
	width:110px;
	height:110px;
}

In other cases you can use another missing feature of ie, the !important rule.

You can use this rule for fixing min-height missing property.

It works by setting height to min-height for internet explorer (ie will make the div bigger if the content does not fit inside) And set min-height for other standard browsers and height to auto and add "!important" at the end, this will specify that this rule cannot be overwritten after that. Internet explorer will ignore this because it cannot understand it, and apply the height that will specify after it.

#mydiv
{
	/*this works for stadard browsers*/
	min-height:500px;
	/*tell standard browsers to apply this height no matter what we declare after this*/
	height:auto !important;
	/*this works for internet explorer*/
	height:500px;
}

As I said before the best way to get your pages look the same on all browsers is to test your page during development and rewrite some things in such a way that they work on all of them. Good luck.