workblog » Internet Explorer

Internet Explorer Doesn’t Match PNG Color to CSS Color

Ian — Fri, 23 Oct 2009 22:05:23 +0000

All currently available versions of Internet Explorer incorrectly display colors in PNG images. To work around that, instead of setting a background color, you can use create 1×1 pixel image with the color you want, and set it as a repeating background image.

mouseenter, mouseleave Events for non-IE Browsers

Ian — Tue, 30 Dec 2008 18:16:46 +0000

Stephen Stchur has written a script to mimic IE’s proprietary mouseenter and mouseleave Javascript events for non-IE browsers. This is useful when you have one element (B) laying on top of another element (A), and you want to do a mouseover/mouseout on A without the mouseout firing when you hover on B. Quirksmode has articles on JavaScript mouse events and event bubbling that give good background information.

Update: MooTools has mouseenter/mouseleave built-in.

Targeting properties to IE6 with Valid CSS

Ian — Mon, 14 Jul 2008 14:15:49 +0000

When I’m translating a design to markup I can usually get it to look the same in all the major browsers without too much trouble, but every once in awhile there’s a problem with IE6 that I can’t figure out, or just don’t have the time/energy to deal with the right way. In the past I’ve used the underscore hack to target a specific property to IE6, but the problem with that is that it isn’t valid CSS. Recently I found a way to avoid CSS hacks and get the same results with valid CSS. Instead of using the underscore, it uses child selectors, which are valid, but IE6 doesn’t support.

For example, I had a design where one element had to line up perfectly with another, and it was working fine in Firefox/Safari/IE7, but in IE6 it was 3 pixels off, so I did this:

test


#childElement /* This is the element I want to position */
{
position: relative;
left: 113px; /* This targets all browsers, including IE6 */
}

#parentElement > #childElement
{
left: 116px; /* This targets only Firefox/Safari/IE7. IE6 doesn't support it, so it uses the value above, but the others will use this one instead */
}