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. Until Microsoft starts supporting web standards, properly coded websites are always going to look like crap in IE. That’s a shame because Internet Explorer is (unfortunately) the most popular browser. So, how do you make your website look great in Internet Explorer while maintain standards for all browsers? You follow my guide of course.
I’m no expert in web design, but I have picked up a few tips over the last couple of years. If you follow my guide and try a little bit of experimenting here and there, you can have a website that will look the same on all browsers and Internet Explorer. Oh, and get this. It will validate too. Amazing! So what are you waiting for? Let’s get coding.
First things first. All of these hack will evolve around CSS. If you’re not using CSS and you’re trying to write standard compliant code, you’re in the wrong field. CSS is the way to do things nowadays on the web, and you should be using it. I won’t give you a whole explanation on how CSS works, so I’m assuming you know it. If you don’t you might want to check out this guide then come back here.
IE Specific Code
The most common problem with IE is it does things completely different than all other browsers. So, to overcome this problem you have to tell IE specifically what to do. Now there are two methods (that I like) that will overcome this problem. There is an underscore hack and a alternative style sheet hack. Each of these techniques have their own advantages and disadvantages, but in the end they will both function the same way.
The Underscore Hack
The underscore hack is particularly useful if you only have a few minor things that need adjustments. It’s also useful since you can keep your IE CSS with the real CSS, making it easier for adjustments down the road. Now you’re probably wondering how the underscore hack works.
Let’s say you a class called text, and you want to apply a 10 pixel margin to that text. The 10 pixel margin looks great in every browser but IE. To make IE look better you think it needs a 15 pixel margin. To accomplish that you need to give IE code that only it will understand. This can be done by the following code:
.text {
margin: 10px;
_margin: 15px;
}This hack works because IE is stupid. An underscore in CSS acts as a comment for that attribute only, and all browsers but IE honor this. Since IE doesn’t follow the underscore rule, placing the same attribute with an underscore after the real attribute will redefine that attribute for IE, while all other browsers will skip the second redefined attribute. Ah, using IE’s stupidity to solve IE stupidity. Brilliant!
The Alternative Style Sheet Hack
This “hack”, is my favorite for a number of reasons. By having a separate style sheet just for IE, you can keep all of the nasty invalid code from all other browsers. The IE style sheet also keeps your real style sheet clean and clutter free. The best part of it is that it’s really simply.
To use an alternative style sheet for IE, the first thing you’ll need to do is add an extra line in your HTML’s head section pointing to the IE style sheet. Basically what you’re going to be doing is adding a second style sheet, except using a CSS conditional comment to make that style sheet only apply to Internet Explorer. The code to accomplish the second style sheet will look like this:
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="ie.css" />< ![endif]-->It should be noted that the IE specific style sheet needs to be after the original style sheet. That way any IE CSS will override the real CSS value. To finish off the alternative style sheet, create a new CSS file called ie.css and throw all the IE specific code in there. You don’t need to do anything special to the code; just treat any CSS code that you put in there like it’s a normal CSS file.
Now from this point on, I’m going to be assuming that any IE hacks you use will be put into this ie.css file. If you don’t want to use the alternative style sheet, you can modify the rest of the hacks to use the underscore hack, but this may cause invalid code, etc. So, it’s best to just stick with the alternative style sheet for the rest of these hacks.
Transparent PNGs
If you’ve ever used a transparent PNG in Internet Explorer, you’ll notice it doesn’t handle them to well. You’ll get an ugly grayish type background wherever it’s supposed to be transparent. So how do you handle this? Use GIFs? No, because GIFs just plain suck for everything, and aren’t good for higher resolution images. Do you use JPGs that fake what it would look like to be transparent? No, because sometimes browsers will render colors differently, screwing up the blending. Then what do you do? You use a simple CSS hack.
Who would have thought that a CSS hack could fix a major flaw in Internet Explorer, but it does. Alright to be honest this really isn’t a CSS hack, but CSS is involved. What this involves is a .htc file. I won’t get into the specifics of how this works, but if you want to know more about HTC you can read about it on Microsoft’s Developer Network. All you need to know is how to set this up.
What you’re going to need is two files. A HTC script and a transparent GIF. I’ve got both files available for download here. Now to be honest with you, I didn’t create this script. Aaron Porter created this script. Now unfortunately I downloaded this script many, many moons ago, so I don’t know where I got it, or who Aaron Porter is. So, if someone knows the original source of the HTC script, let me know. I’ll give proper credit where it’s due.
Now that you have the files, upload them to wherever you store your ie.css file. Now we’ll need to add one simple line of CSS code and we’ll be set. Add this to your ie.css file:
img.pngfix {
behavior: url(pngHack.htc);
}Now all you have to do is add the class pngfix to any transparent PNGs that you want to work in IE. Simple, wasn’t it?
IE’s Max-width
If you’ve ever tried to use the max-width CSS property, you’ll know IE doesn’t support it. Now some web developers will code around it, but I’m not one of those. Max-width to me is a very useful CSS property, and I’m going use it. So, how do you get IE to use a max-width? With some IE specific code of course!
This is a simple one line CSS addition to ie.css. Just add this line to any class or id where you would have normally used max-width:
.class {
width: expression(this.width > 533 ? 533: true);
}You’ll of course want to replace 533 with the maximum number of pixels you’ll be using, but beyond that it’s that simple.
Conclusions
I hope this guide has helped you to perfect your website in IE. I know there are a lot more Internet Explorer hacks out there, but these are the ones I find the most useful. If you think I’ve missed an important hack, feel free to leave a comment. I’ll see what I can do, and I might add it to this guide.
58 Comments
my favourite one is where it detects the web browser, then redirects to mozilla.com.
“Do you use JPGs that fake what it would look like to be transparent? No, because sometimes browsers will render colors differently, screwing up the blending.”
While I agree that PNG transparencies beat out JPG usage, I haven’t see instances in which browsers render colors differently. I think that for the most part, JPG is a safe bet. It’s usually the designer’s fault when the colors don’t match up. If I’m wrong, of course feel free to correct me, email me if you like.
I know what you mean, but there are some weird instances where colors don’t match. For example, on my last website design I had a JPG used for a static background. The colors matched up on every browser but Safari. I couldn’t explain it because I had the hex values down perfectly. Safari was rendering the background a little darker, screwing up the color matching.
i have seen this before, not just with safari, but with IE and nutscrape
Wrong colors in Safari: Might be due to embedded color profile in the pic– Safari uses it to alter the colors to the profile.
I’m having currently that kind of a problem that IE shows PNG file a bit darker than firefox or opera. So there are some kind of rendering differences.
Hi! Thanks for this. I can confirm that IE seems to render the colors a bit darker. Not a big problem to me, though. I had to make a small change to make the pngHack.htc file; I changed “transparent.gif” to “/transparent.gif” to make it valid for the whole site. This worked better than the pngfix.js that I was using earlier; with that, the image would render alright, but wouldn’t be entirely clickable as a link; a very strange issue.
Natan Smith: Just look at my website into IE/FF Win, and, after, any Linux or Mac browser. . In Win it looks great, but in other operating systens it just gets weird… That’s where PNG’s would be really great.
Thanks man! Nice info on this site. Keep going up the good work!
I’ve been busting my chops to get something to make my site work in IE. Been plugging away on my Mac, testing in Opera, Safari, Netscape, FireFox and Camillo, and all is fine. Then I take it to an IE machine and AAAGH! What’s this hellish nightmare! Thanks so much for these rare tips.
Okay, here’s a Q? I’m using a transparent png as a background (dropshadow). Can the png “hack” apply here? My background is defined in CSS, so I don’t see how I can apply the fix.
Francois, unfortunately this is the one downfall of the hack. The only way I’ve been able to solve this issue is to create a crappy GIF just for IE. Then in my IE style sheet I use the GIF instead of the PNG. That way the good browsers get the nice PNG, while IE gets the crappy GIF.
Hi,
thanks for the max-width hack.
I used width:expression(document.body.clientWidth > 300? “300px”: “auto” ); but it have a few problems as that the width always was shown as its maximum size.
that saved me from some dodgy javascript
thanks !!
what about wordpress? My wordpress site looks nice in all the browsers except IE!! Ah!
” type=”text/css” media=”screen” />
It has a href to bloginfo .. what about this ? -[if IE]>
should i add “”" ????? Help! Am newie!
Teri, I can’t make out what you’re trying to ask since WordPress stripped the HTML. Can you use my contact form to ask the question? I’d love to help.
My problem is I dont’ even know where to start to get my web page to format correctly in IE. Everything that seemed to make sense in firefox takes a back seat when I try to format for internet explorer. Are there any guides out there on formatting websites for IE, or general IE rules and guidelines for CSS formatting? Or is it just trial and error?
I basically use trial and error. Seeing where there is problems for IE and then using IE specific formatting to tweak that area.
My friend showed me this as an alternative to the underscore hack:
* html #idname {}
Works the same as the underscore hack, only IE accepts this code so place it after the values for other browsers. Lets you pass multiple styles to an element with one hack. Also a bonus, it validates.
Thanks for the underscore tip! For some reason, Internet Explorer just hates my navigation bar… It’s the only browser that needed a javascript code to make it work… (while firefox, opera, etc, all used CSS and worked fine)
OMG, very useful…thank you, thank you , and thank you! Now I can stop throwing my keyboard across the room.
hmm i don’t know where i got this one for pings
function correctPNG()
{
for(var i=0; i”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(”onload”, correctPNG);
you could also use the !important rule in css - explorer igonores things in CSS marked with !important, but important takes precedence over any other instruction in a css document. so,
margin: 5px; !important
margin: 3px;
would mean that firefox, etc would read the first line, internet explorer the second. You may have to check how the rule is correctly typed, but its something like that above.
Your maxwidth trick is very nice, but I want to specify my maxwidth in ems. Is there any way to do this?
It’s possible, but getting to work may be more than it’s worth. Read this: http://www.gunlaug.no/contents/wd_additions_14.html
Ronald, thanks for the link. Maybe to keep it simpler I will use px for the max-width in IE and em for everything else.
Regarding the PNG hack, I discovered a javascript method which appears to work smoother and with less coding than other methods I have seen. As noted above by the author, I also do not recall where I found this script; however, it functions as follows:
Add the following to the Head section of your XHTML compliant document:
I create standard folders at the root for /images, /scripts, /styles, etc., so if you use the same code as above, create a /scripts/ folder at the root and add the following javascript to a file called pngfix.js in the folder:
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in
with DEFER keyword wrapped in conditional comments:*/
var arVersion = navigator.appVersion.split(”MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">”
img.outerHTML = strNewHTML
i = i-1
}
}
}
With this method, there is no need to add additional classes or styles for application to PNG images. Just add the images to your page as any other images, and IE should render the transparencies as other browsers (which don’t require hacks!?!). [Sorry for the IE sarcasm]
Good luck!
I’ve played with the Javascript method on a few sites I’ve developed. I’m not particularly fond of it since it requires a height and width specification, and you can’t count on that all of the time.
Instead, I’m still using the CSS png method, but an updated version. The new version support CSS backgrounds and accounts for images without size specifications.
Thanks for the link to this write-up also Ron… greatly appreciate it. Unfortunately I’m huge noob when it comes to all of this so I’m trying to figure out where exactly and in which file do I apply the following code to:
Wordpress has had me very close to throwing my laptop across the room several times. When in theme editor do I apply this code to the current style.css and create a new ie.css file or throw this into header.php … I’m just confused is all. I know it’s probably frustrating to read this on your end because you know what you’re talking about. Thanks for any further help.
whoops the code didn’t paste… it was the alternative style hacksheet.
I am also having this problem. Even more frustrating-ly, I am on a new Macbook and have no way to view IE. You can’t download IE for Mac anymore, and the Firefox plug-in is also only for windows.
I am not a programmer but am not afraid to try things out. But like Adam, I’m not sure exactly what I should do to optimize my site for IE… thank you!
Adam, the code I reference above goes in header.php. You would then create a new ie.css file and put all your IE specific code in there.
Annie, believe it or not, I’m on a MacBook also. There are two ways you can check your site in IE. Both require a “valid” license of XP. You can use Parallels which runs XP directly in OS X or you can download Apple’s Boot Camp to have the ability to reboot into XP. Parallels costs money while Boot Camp is free.
sorry to bother you ron, but what specific IE code? I can input the code you suggest to header.php and create the ie.css file… but are you perhaps refering to the code from my current style.css file that’s html specific? I’m sorry, confused a bit.
nevermind, I just copied all of the style.css into a new ie.css file and i’m going to upload it to my hosting service in the necessary folder… btw I added the code into header.php… shouldn’t my page in IE then produce an error that it can’t find the page since I haven’t uploaded the ie.css to my hosting service yet?
I don’t mean to spam at all but I’ve copied my header.php code below… shouldn’t
; charset=” />
; charset=” />
” />
@import url( );
” />
” />
” />
” />
whoops, that didn’t work.
Adam, the whole idea behind IE specific code is you modify existing classes in style.php to work in IE. As you mentioned not uploading a ie.css file, the reason IE didn’t crap out was because it was still using style.css. You want to put only CSS code in ie.css that IE has trouble with.
May I, for the sake of completeness? Currently, you can still use character escapes as an IE filter. It works stable, but is - like most IE “workarounds” - not “safe”.
Hi, Can anyone remind me what code i have to use in my header to call the ie.css file specific for internet explorer?
Thanks
I simply opened an ie.css window and adjusted the size of the box to 85%, then
adjusted the “top” number of ems (or pixels), and the “left” number of ems (or pixels), then tested in the ie browser to my satisfaction.
Colors were as accurate as with mozilla/firefox browser.
No problems at all with the ie.css page!
Norm
Awesome! *embarrassing but necessary tacklehugs for the Cavemonkey*
Just the info I needed.
Awesomely simple!
No hacking required.
Each ruleset #blablabla in .css tied to a on your
.html page is adjustable for size, positioning, color, or whatever else you envision, using the “hack” ie.css page. Each of your .html pages can contain any number of div id=”#”s as you wish. With a tiny number of exceptions
(which I personally can live with), each Internet Explorer page on my website looks identical to each page in Mozilla/Firefox.
When publishing, simply upload (via your favorite ftp) your new “ie.css” page along with your “style.css” page. This is the only additional file required.
All this precludes, of course, the use of the Alternate Style Sheet outlined above.
I’m as delighted with the results as Snoopy is finding his friend Woodstock.
Thanks for the IE underscore hack!!! Worked great.
oh man! exillent tip! now our company website look as intenteed in IE also. many thanks!
i know, i know, its myspace and therefore you shouldn’t bother with helping me (hehe)
but if you take a look at my page in firefox etc, there is a blank white box on the left. in IE it is not there. i have no idea why, and would like to ask for your help? its a simple .div overlay.
thanks!
Hello, Jessi D –
I believe in keeping things simple. Unless you have a pressing reason to use
an overlay, don’t. Why not just delete the overlay box entirely so that both
browsers will look good. (I have trouble with Firefox also.) I’m sure that you
can come up with a fine and attractive substitute!
BEAUTIFUL article menn.
Thanks alot.
once again beautiful.
I’m building a blog site for a friend and I’ve been frantically trying to fix the stupid IE problems. If you look at it in firefox, it’s exactly the way it’s supposed to be, but in IE, I think it is doing the masthead image tiled and so the letters of the picture show up at the bottom of the header space again. I’m also trying to get the desciption to fit in the green box by just adding a large margin at the top, but that is causing the letters to appear. I’m trying your hack, but when I add the code
I’m not sure what needs to be taken out like spaces and whatnot to make it valid code and not “text” to read. Does that make sense? A lot of these comments are trying to put in code and they are disappearing because they aren’t adding spaces in behind the greater or less than signs. What exactly do I need to do to make this readable code by wordpress?
http://chromedcurses.com/test
Thanks!!
See! Even when I add extra spaces and stuff, the code you have in the post…not the underscore hack, but the next set of code did not appear in the comment. But when I put the code exactly as you have it in the head part of my file, it’s not being read. I did create a new file ie.css and I’ve edited it and no changes appear.
Thank you so much!!
Do you know where I can find a complete list of all the IE hacks?
This is awesome.. the _ hack was sweet.. im in alot of gratitude right now
Neither the MAX-WIDTH nor the TRANS PNG hack worked…
Hi
Thanks for the advice it’s really helpfull. Just want to check do you know of a way to use the png hack with an image that you are using as a background in a css class.
Thanks
Ben
There are ways to fix PNGs for backgrounds, but I haven’t had much luck with them to recommend one.
THANKS GOD you finally help so much !!! Thanks!!!
just great! thanks!
I just wanted to say FANTASTIC Article. You express exactly how I feel about stupid stupid IE. The world would be a better place without it. And good call on promoting PNGs.
My new website http://www.ctrl-alt-mat.com works like a charm in Firefox and others BUT IE (which I hate) and I would like to fix it, to make it IE compatible.
I’ve read a couple of posts, all talking about IE hacks that are intended to fix these known issues but I don’t know where to start… I sure want to create that specific ie.css file but I have no clue what to change from my original style.css to make it work in IE, can you help me? Should I change a single line of code or lots of them needs to be changed to make it IE compatible?
Thank you for your time!
Matthew
15 Trackbacks/Pingbacks
[...] The Ultimate IE Hack Guide Just in case you actually care about the losers who insist that IE is a great browser. I say screw ‘em, but here are a few fixes for Microsoft’s CSS woes anyway. (tags: css webdesign tutorial howto) Sign-up for Tossed Salad e-mail notifications! [...]
[...] Ja fa uns dies, vaig saber per l’Oriol de volldamm.net l’existència d’una llibreria de JavaScript, amb el nom de IE7, que fa que Internet Explorer interpreti de forma correcte el CSS sense haver-hi d’afegir hacks. [...]
[...] The Ultimate IE Hack Guide [...]
[...] Klikni tukaj. You can leave a response, or trackback from your own site. RSS 2.0 [...]
[...] Aquàpodemos encontrar 4 hacks. Margen, hoja de estilo alternativa, Png’s transparentes y max-width. [...]
[...] http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/ Posted by uyenvo2002 on March 13th, 2007 | Filed in Css, Misc | [...]
[...] web developers are aware of the hoops that must be jumped through to get a clean, standards compliant, site to work in IE. What’s worse is the opposite, when [...]
[...] it? There’s a lot of guides on the web on how to hack internet explorer. This is a good one: http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/ Stand up. Make the change Soon, Simplex Media Web Development blog will be announcing a whole new [...]
[...] 本人英文水平有限，其中不免有许多翻译错误（-_-!我确定我会有很多翻译错误）。英文能力好的建议阅读原文<The Ultimate IE Hack Guide>。 [...]
[...] Another hack tip All of the hacks will evolve around CSS. [...]
[...] 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.” [...]
[...] navegadores como o Firefox e Safari tem suporte ao canal alpha das imagens PNG. Ainda com o uso de hacks é possível dar suporte nos navegadores Internet Explorer 5,5 e 6, mas os hacks não são ideais e [...]
[...] The Ultimate IE Hack Guide [...]
[...] Ultimate IE Hack Guide · cavemonkey50.com The Ultimate IE Hack Guide · cavemonkey50.com You’ve designed the perfect website. You’re checking it in all browsers. Firefox - check, [...]
[...] CaveMonkey explains ALL about IE hacks and different things you can do. Check it out! [...]
Post a Comment