PDA

View Full Version : IE 5 Mac couple issues



jayemvee
Jan 14th, 2007, 05:06 AM
body{
margin: 0px;
background: #FFF;
font-family: "Lucida Grande", Tahoma, Verdana, Sans-serif;
font-size: 12px;
background: url(../images/bg.gif) top center repeat-y #EAEAEA;
}
The background doesn't show.

And as a supplemental question... .png files don't show up? I know there is a javascript to fix transparency for IE does it work for mac as well? Will it show up or should I use a diff file type altogether?

felgall
Jan 14th, 2007, 08:04 PM
IE5 on the Mac lacked support for a lot of stylesheet commands that are now commonly used. Microsoft stopped updating the browser long before those commands became common and so they were never added in before the browsers official death in 2003. You just have to accept that Such old browsers will never display web pages the same as modern browsers and if supporting the browser is important to you then apply any necessary hacks to your stylesheet to hide the pieces that IE5 doesn't understand so that the content will still be readable to anyone still using it. It is much the same situation as for Netscape 4 except that the hacks to use are different.

VIPStephan
Jan 14th, 2007, 08:44 PM
I just tried opening a PNG in IE and it seems like it's not supporting the MIME type image/png. So you'll have to use gif or jpeg.

I know one person that is still using OS 9 and IE 5.1 and when I see the script warnings and errors he is getting when browsing websites I think you can without worries disregard support for this browser as it has even been neglected by Microsoft (http://www.microsoft.com/mac/products/internetexplorer/internetexplorer.aspx?pid=internetexplorer) itself. You wouldn't be the only one and I guess most of IE/Mac users have probably switched to a modern browser or got used to websites not working properly.

And actually IE/Mac has done a lot of things better than IE/Win because it wasn't using the same rendering engine and had it's own development team. So many features that didn't work in IE/Win worked in IE/Mac. However, as far as PNG transparency concerns this is unimportant now that we know it doesn't support PNG anyway.

Bill Posters
Jan 14th, 2007, 09:02 PM
I suspected the issue with your body background not showing may have been down to the order in which you're referencing each component of the background shorthand property.
But, I checked your code in IE5/Mac first and it tiled perfectly well.

Are the other properties being used by IE5/Mac?

As for PNG24 support…
IE5/Mac does support PNG24 files used as background images to an extent.
It will display them, but won't display PNG24 with certain types of content correctly when tiled. If the image you're trying to use is non-tiling, then it's not going to be an issue. Similarly, depending on the content of the PNG24 file, it may not have any problems.
Ironically it seems to have most trouble with the alpha transparency with smaller PNG24 image files, e.g. images with one aspect smaller than 70px.


So, if you wish to throw in some quick support for IE5/Mac, then use the IE5/Mac 'band pass filter (http://www.stopdesign.com/examples/ie5mac-bpf/)' to offer up an IE5/Mac-specific stylesheet which specifies either a revised version of the image file which doesn't require tiling or a gif alternative.
This way only IE5/Mac users get the less efficient, larger version of the image file (or the less glossy gif alternative).

Be sure to give the IE5/Mac stylesheet just the rules and properties it needs and give those properties the !important suffix to ensure that it overrides the main rules which appear later.

e.g.

main.css

/*\*//*/
@import "ie5mac.css";
/**/

body {
margin: 0px;
font: 12px 'Lucida Grande', Tahoma, Verdana, Sans-serif;
background: #eaeaea url(../images/bg.png) center top repeat-y;
}



ie5mac.css

body {
background-image: url(../images/bg_large.png) !important;
}

Alternatively, you can just tell IE5/Mac to ignore the background image by using background-image: none !important; in the ie5mac.css file, and have it rely on the main background colour, or even use another, more suitable background image.