Posts Tagged IE6
One day I awoke brightly, but to my surprise…
I’ve been so excited to be able to use full alpha transparency PNGs and getting them to play nice in IE6. Today I’ve found another PNG/IE6 issue. It seems that in some cases IE6 doesn’t like to have links in an element that is child of one with a background PNG to which
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader is applied.
The solution (in my case) was very simple: just needed to close the div for the background and add another for the links. Now the links just appear to be contained by the background.
CSS trickery: eat my heart out.
I’ve now jumped to the other side of the fence. In the name of speed and slowly [oh so slowly] dying share of IE6 I’ve stopped trying to pander to it. There’s a few extra bugs and issues to contend with anyway. So what I’ll do now is specify a regular gif or PNG8 file in an for IE6 using a selector hack. Anyway – for posterity here’s the old articl
Have nice PNG with transparency. Wish to implement. Must consider IE6. Nasty, distinctly non-transparent grey background for PNGs in IE6.
Current job requires a PNG implemented as a CSS background which repeats on all pages of the site…
If-already-then-already — the search was on to find a solution that works on CSS background images and regular in-line images. That and it had to be a nice standards compliant thing with a low footprint.
Googled it. Solutions I found and tried first:
supersleight– couldn’t get it to work at-all at-all. unitpngfix– worked well – but if image is reused (cached) on a different page then image suffers from a flash of the nasty grey. That and there are positioning issues. ie7– works as unitpngfix – also does other things I’m not too interested in. No want the flashy flashy grey.
Then, on having another look a the long wiki list of other possible options, – eureka! I realised I really should be using IE6 itself as the first test. [Still not used to having IE6 on my mac!] Most of these have an on-line demo! Brilliant. What a clever chap. [A-hem.] OK – it’s late, forgive me please…
With intelligent filtering™ now in place I found that most of the solutions suffer from the grey/gray flash. Of these not-so-rans Flixn suffers the grey flash but at least positioning is good.
The Best Options
In the end the fix comes in the shape of IE’s proprietary image filters; DirectX weirdness over a ten-year-old standardised graphic format. “Go figure.” Anyway most of the fixes available use this feature but only two options pass the grey/gray flash test*:
- “pngbehavior” from webfx
- “Cross Browser PNG Transparency” parts one and two from drunkenfist
Great! Just add a CSS class to your inline images, one CSS declaration (non-standard) and throw a lovely pngbehavior.htc. Bingo. But this only works on inline images – not with CSS background images…
“Cross Browser PNG Transparency” from drunkenfist
Perfect with CSS background images but more work than pngbehavior for inline images as requires an extra named div and then two lines of CSS per image. Great point from this chap about using the conditional comments and separate style sheets to hide IE specific CSS hacks from other browsers.
CSS goes something like this:
/* TRANSPARENT PNGs IN IE6 */
/* For background images (from from http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/ ) NOTE THE FIRST background:url() IS BLANK. LEAVE IT SO! */
/* For inline images (from http://webfx.eae.net/dhtml/pngbehavior/demo.html
Wrap all this IE gubbins into a single CSS file and link via a conditional comment to hide your shame (and keep things ‘validatable’ of course).
Said conditional bit to put in your head:
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="STYLESHEET" type="text/css" href="/path/to/ie-gubbins.css" />
Don’t forget that pngbehavior.htc file from webfx.
Multiple virtualised XPs with IE6, 7 and 8 for development testing with a Mac, VMWare and VHDs from Microsoft
As IE can only work reliably in exclusion of other versions. the most (or only) reliable way to test various versions of IE on one machine is using virtualization. Amazing but oh-so-true.
VPC images for ie6 ie7 and ie8 for web development and testing from Microsoft
Microsoft give away free time crippled VHD files for this purpose – search for “Internet Explorer Application Compatibility VPC Image”. Today you will find this link here. Look at that link – SEO urls a-go-go! Gone.
Problem is that getting these images to play nice with VMWare Fusion for Mac is not so straightforward. The only way I’ve found to do this is documented here on the VMWare communities. The result — at least without the required XP Pro install disk which I have packed away in a box somewhere — is pretty good. Not as seamless as the original VirtualPC image I converted but very usable.
An aside… on forcing IE8 to be backwardly compatibile with IE7
…is via a metatag in the head element to ask it nicely to behave like IE7:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
DON’T BREAK THE WEB! They cried. I think there’s ironing in there. Nice starch.