Category Archives: IE

Positioning and z-index in IE

Using absolute positioning to hide and show a nested list is one of the better ways to create a dropdown menu, and it can almost be done using only CSS. IE6 needs a little javascript help to respect the :hover pseudo-class. The Sons of Suckerfish will help you there.

Now you have your perfect semantic validating SEO friendly nested list in order to make the drop-down menu the client wants. The CSS is in place and the dummy you’ve thrown up works.
But when you implement it into the site the drop-down partly hides behind the content further down. Offcourse – it has an higher z-index. Easy fix. But then the juggernaut IE comes along and crashes the party.

Continue reading


IE6 magic bullets

Things that sometimes “magically” make Microsoft Internet Explorer 6 behave like expected from modern browsers.

  • position: relative
  • zoom: 1
  • height: 1%

They are all due to Microsoft’s proprietary concept of hasLayout.

Feel free to add any other magic bullets in the comments.

Font rasterization in Windows XP

If you are on Windows XP1 and have upgraded to Internet Explorer 7, you know, the Internet with glossy buttons, you’ve perhaps noticed that the text looks a slightly smoother then before? That is because in IE7 Windows’ ClearType is enabled by default. You can do this systemwide if you like it. And if you for some unknown reason to mankind prefer IE6 you should do yourself a favor and follow these settings.

  1. Click “Start” and open the Controlpanel.
  2. Doubleclick the Display icon to open the Display settings panel
  3. Select the Appearance tab
  4. Then select the “Effects…” button
  5. Make sure the checkbox next to “Use the following method for font smoothning…” is checked 2
  6. Select “ClearType” from the dropdown
  7. …and click OK, and then enable or ok again

That’s it. You’re done. Now your eyes will thank you for making it less stressfull looking at the screen all day.

If you want to know more check out Wikipedias entry on font rasterization.

  1. None of this applyes to Windows Vista, as it is enabled by default. But feel free to correct me.
  2. My version of Windows XP is in Norwegian, so my translations are likely to be somewhat off from a English version.

Webdeveloper tools for IE

Firefox has all the plugins you can poke a stick at, but what to do when IE is doing its “thing”? Windows Explorer plugins to the rescue!

Westciv’s XRAY is a javascript bookmarklet that lets you click on items in your webpage and view some of the CSS information regarden the area you’ve selected.

Microsoft has their own IE Developer Toolbar that is similar to the Firefox Firebug plugin. It lets you inspect and alter the DOM, change settings, outline elements, find CSS etc.

That should make the bughunt slightly easier for everyone.

Update: I’m running multiple IE’s, and as a result (I assume) the webtools only work in IE7.

How to install multiple versions of IE

Every web designer hates it, but the world loves it. So we’re forced to spend money, time, as well as suffer hair-loss over it. It’s Microsoft’s Internet Explorer. Thankfully I’m working on a Mac, and for the last year I’ve been testing for IE6 in Parallels running Windows XP sp2. But when IE7 came out I was forced to make a choice. Since there is no way to run two versions of IE on Windows
(why!?) I was forced to ditch IE6 in order to test in IE7.

Or was I? Thankfully an enterprising soul developed a standalone version of IE7 that would run next to IE6. But IE7 was buggy, at least for me it was. I ‘m no Windows wizard, so the problem could easily have been my XP installation, not IE7. So yesterday I pulled the plug on XP and reinstalled a fresh version *cough* demonoid *cough*. Saving me a nice 5GB of hard-disc space in the process. And it went surprisingly smooth. Perhaps because I always expect the worst possible outcome when dealing with Microsoft software.

Do this:

This installment came with IE7 as it’s default browser. Not a problem, the entrepreneurs have been busy bees and launched a full pack of standalone Explorers, including IE3, IE4, IE5, IE5.5 and IE6. I installed all of them, mostly out of curiosity towards how the older ones would behave.

One problem arises though. They didn’t support png transparency. Yes yes, only IE7 does that. But there are plenty of ways to make at least IE6 support this. But not the included version of IE6. This comment shows how to fix this though. He suggests downloading IE6, unzip it, find two files and replace them in the IE6 folder you already have. If you are a keen web designer and like to serve the majority of the interweb users nice semi-translucent 24bit png’s, and don’t mind spending lots of time hacking your stylesheets this is what you have to do:

  1. download ie60.exe at
  2. don’t run the exe, just unzip the contents and look in the IEW2K_3.CAB file
  3. locate dxtmsft.dll and dxtrans.dll
  4. place these in the IE6 directory

Note that you’ll need the full version of WinZip, not just the unzipper package. The 45 day demo was good enough for me. There’s a testpage link in the original post as well. Good luck!

IE7 css filter hack

After much searching I found a css filter which targets IE7 only. I’m not going to enter the hack or not hack discussion, I’ll just say that sometimes you gotta do what you gotta do. The old star-hack filter for IE6 is fixed in IE7, but the solution wasn’t to far away. There is now the star-plus hack.

IE6 filter: * html #foo { new: value; }

IE7 filter: *+html #foo { new: value; }

But it is not straight forward. For reasons I don’t know, you can’t putthem together, say if you want the same value for all of IE. This will not work for IE7:

* html #foo, *+html #foo { new: value; }

So the whole rule must be repeated. But that is not all. For more reasons, also unknown to me, the star-plus filter will not always work. Then I must use the slightly more elaborate star-firstchild filter.

*:first-child+html #foo { new: value; }

I know sometimes this is needed, but if I have control of things myself I much prefer using conditional comments. Or not supporting out of date browsers.

Test, discussion and original post at Brothercake.

technorati tags:, , , , , , ,

Blogged with Flock