Internet Explorer Hacks
Internet Explorer always seems to be the browser that displays web pages differently from other browsers. When testing a web page in various browsers, it is always important to test it in Internet Explorer. It’s not as popular as it once was, but there is still a large enough user base that it matters. There are Internet Explorer specific code as well as javascript files that allow for Internet Explorer to display pages correctly.
Internet Explorer 7 and up behave similarly, but 6 is different. There are several ways to tackle CSS problems in relation to Internet Explorer. I’ll only cover some of them.
Internet Explorer Specific Stylesheet with Conditional Comments
Firstly, one can create stylesheets specific to Internet Explorer. Then in the header one would put conditional statements such as the one below:
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
< ![endif]-->There are different types you could write, for instance, instead of if IE, it could be
if lt IE 9for Internet Explorer 8 and lower.
Hacks within One Single Stylesheet
If creating a whole separate stylesheet doesn’t float your boat, you can use Internet Explorer specific language such as the underscore hack and the asterisk hack. Below is an example of an underscore hack:
.content {
padding: 20px;
_padding: 25px;
}The _padding is only read by Internet Explorer and other browsers will ignore that line. It means that for all browsers, the padding will be 20px, but for Internet Explorer the padding will be 25 px. You would use this if the padding is different in Internet Explorer than in other browsers.
The asterisk hack is used below:
* html div#header {margin-top:-3px;}The asterisk plus html is used as opposed to just div#header to make the margin specific to Internet Explorer.
Supposedly the better hack would be to use child selectors. See the example below:
div#header {margin-top:-3px;}
body > div#header {margin-top:0;}
.promo h3 {height:21px;}
.promo > h3 {height:auto; min-height:21px;}
ol {padding:0 0 0 5px;}
html > body ol {padding:0;}This example lists three different attributes that are styled. The first line for each attribute is what browsers normally see and the second line is what Internet Explorer uses.
Use a .htc File
.htc files can help sort out some Internet Explorer problems as well. Sometimes they are tricky to use and at times I have had trouble getting it to work at all. First you would download the .htc file at CSS3PIE. You would use it by writing some CSS and calling the .htc file within the section you want to apply it to.
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}In path/to/PIE.htc, you would change the path relative to the page that is displaying the code rather than the CSS file it is called from. This is good for rounded corners, shadow effects, and other effects styled in CSS3.
Javascript Hacks
The CSS3PIE gives an option to use javascript instead of .htc. Other instances where javascript is used include the rounded corners buttons I mentioned previously. You can find others on the Web.
Universal Internet Explorer 6 CSS
You can download Internet Explorer 6 specific CSS as well to work with at Stuff and Nonsense.
Help Internet Explorer Users to Choose a Different Browser
If you’re tired of always accomodating for Internet Explorer users, you can redirect people using conditional comment to this page http://utilu.com/UtiluMF/ if users are using Internet Explorer. If you’d rather let the user decide on a browser instead of forcing them to try Mozilla Firefox, you can link to various browsers’ web sites somewhere on your front page.
As you can see there are several work arounds to dealing with browser inconsistencies when it comes to the appearance of Web pages specific to Internet Explorer. I hope this small tutorial was helpful. Below are some sites you can go to for more information: