Presentation Layer: ie6

Showing posts with label ie6. Show all posts

Wednesday, June 24, 2009

Strange IE6 bug - show/hide select, hemorrhage option innerHTML

We've all had to code up those ever-so-fun branching selects. I chose to implement it by showing or hiding (display:block/none) the container of the label+select corresponding to the appropriate branch. And IE6 decided to hemorrhage option innerHTML onto the page - for 1 of the 3 branches: the middle one. I solved it by adding "position:absolute" to the css for the container.

Saturday, May 2, 2009

ie6 and PNGs

Thanks to a tip from Gena Wilson:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

The cool part: it doesn't use AlphaImageLoader, it uses VML (Microsoft's idea of svg).

How to Avoid CSS Hacks

I've decided to use a very tiny bit of javascript to free me of css hacks. I already use js to add a class "jsEnabled" to the <html> element so that I can style things differently if I know that javascript is going to swoop in and alter them later (tabs, carousels, etc). Taking this a step further, I put the browser name + version number in the html element classname. Then in the css, you can write ".ie7 .my-div {float:none;}" Sure, we're not supposed to rely on javascript. But we usually do. And this is just for minor tweaks anyway. The site will still *work* with js turned off, you'd just lose that tiny css tweak you made that relies on it.

Thursday, April 23, 2009

ie6 + position:fixed nugget

Anyone who hates css expressions .. feel free to leave now, and end up doing the same thing in a more convoluted manner in 'regular' javascript. If it eases your conscience any -- I know it does mine -- this css is sourced in a conditional comment just for ie6


#my-fixed-position-element{
    top:expression(Math.max(document.documentElement.scrollTop + (document.getElementsByTagName('html')[0].offsetHeight / 2), 20) + 'px');
}

Tuesday, October 21, 2008

IE6 + AlphaImageLoader + hover

the 'filter' nomenclature is unwieldy, so these lines are going to be long, you'll need to scroll. The gist is - ORDER MATTERS! - and the order is opposite from what you'd expect.


/* order matters! */
.carousel a:hover .playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_thumb_hover.png", sizingMethod="crop");}
.carousel .playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_thumb_normal.png", sizingMethod="crop");}
a:hover .playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_hover.png", sizingMethod="crop");}
.playbutton{background:transparent url(/css/i/x.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/i/icons/playbutton_normal.png", sizingMethod="crop");}

Presentation Layer