Making Things Work in IE6
Posted by Jonathan Ng | Filed under Technical
Jnls.Net didn’t work in IE6 at first. Since everything looked find in IE7, I never took the trouble to fix things for IE6. One thing I have to tell you, is that you have to make sure your site looks presentable in IE6 no matter what. It’s like a do or die situation. IE7 is still in beta, and millions of users are still on IE6. Think about your potential clients, do they use Firefox? I doubt it…
I knew it wasn’t that hard to fix Jnls.Net for IE6, so after several hours of coding (and cursing), I’m proud to certify Jnls.Net “IE6: semi-compliant”. This is mainly due to the reason that “show what posts” tabs on the left can’t be re-produced in IE6. Even if it could, the effort involved for such a thing would simply not be worthwhile. All I did is hide the original tabs on the left with display: none and use a IE conditional statement that re-adds the links at the beginning of the page.
To make the html codes “show up” in IE6 and earlier, [if lte IE 6]> does the trick. So now, tabs show in standards-compliant browsers, and links in IE6 and earlier.
The next step is to fix the two column layout within the posts. Simply assign a right margin to the left column, and float: right the right column. I have images floated to the right by default too, which sort of created a problem since Wordpress placed img in a set of p tags. Hence, the image would be ffloated within the paragraph (of post content) rather than the entire post area.
The function wpautop in wp-includes/functions-formatting.php is the “culprit”. A simple modification to the regular expressions there solved my problem. All I did was add “img” beside any long lists of tags (I figured that Wordpress doesn’t add p tags to those tags) and I’m all done: columns fixed!
Transparent PNGs in IE6
The last bit is a little trick I learned some time ago. The way IE6 displays PNG transparencies are a little awkward. Simply put, it doesn’t make the transparent parts transparent, but it displays those parts in a shade of blue. You can’t make it transparent, but what you could do is change the color it displays at those transparents part. By using TweakPNG, you can change the metadata that specifies a PNG’s background color. Using TweakPNG, open any PNG file, and set it’s bKGD property to whatever color you want. If that property isn’t available, just insert it via the menu.
Though your PNGs still aren’t “see-through” in IE6, but in some cases, changing the background color to suit your theme does make your site look better. I bet that the color of your choice will look much better than the blue IE6 uses.
Note: I’ll be away for a couple of days so comments might not be moderated that soon.
Tags: css, jnls.net, web_design
One Response to “Making Things Work in IE6”
-
Ben Says:
March 26th, 2006 at 10:21 pmGreat job! However, the “Tag Cloud” seems to disappear when you move the mouse to the list of Recent Comments on the left. Scroll up and down again, and the Tag Cloud will be repainted.
