CSS issues and hacks for Mac IE 5

To Target Mac IE 5 only to the exclusion of all other browsers:

@media hack

@import "externalstylesheet.css"

Mac modified Tan Hack

* > html .someclass {proper\ty: value;}

To Exclude Mac IE only

Mac Band Pass Filter

@media all {
     #someDiv {property: value;}

Single declaration commented backslash hack

 /* start comment and include one \ so mac ignores just the next line */
     .ignoredByMac {property: value;}

Multiple Line commented backslash hack

/* put the backslach at the end of this line \*/
		.ignoredByMacIE {property: value;}
		#alsoIgnoredByMac {property:value;}
/* normal comment ends exclusion */

Issues in Mac IE 5 that will require above type hacks:

  • scrollbars appearing in absolutely positioned elements when the element is close to edge of browser window.
  • z-index issues when images have alignment. Shouldn’t be an issues since you shouldn’t be using the align attribute anymore. Float the image with CSS instead
  • text in floated elements with no width declared wrap incorrectly
  • background images don’t work correctly if inline style is declared with single quotes. Shouldn’t be an issue since you shouldn’t be using in-line styles.
  • radio and checkbox form elements inherit the background image of their siblings.
    declaring vertical-align with a background: inherit on the same element can crash the browser.

Why do we even care about such an old browser and Mac IE 5 that even Microsoft no longer supports?

Microsoft stopped supporting the standalone version if Mac IE, however, it was the default browser on the mac from 1997 to 2002, and was available on Macs until January 2006. When it was originally released, it was seen as a pretty good browser with decent CSS support. Mac OS users only account for 3.89% of site visits 1 and 1.7% of the site visits are on Safari, 2 so 2.19% of the population is on a mac and surfing the web with something other than Safari.  In otherwords, I can’t find the stats now on IE5 mac usage, but it is likely a large chunk of the 2.19% of the population that is using a mac, but not using safari.

Other IE 5 Mac Hints

  • In developing for Mac, it will cache your CSS. Simply open your CSS in another browser window and refresh it with every test.
  • Mac IE 5 chockes on the XML declaration. <?xml version="1.0" encoding="LATIN-1" standalone="yes" ?>  is optional and crashes IE5 on the Mac, so omit it.
  • You want it? You can download IE for the Mac here.
  • In the modified Tan Hack, make sure the slash is not in-front of A-F, as combinations such as \d are seen as hexidecimal numbers.
This entry was posted in CSS (including hacks), Web Development. Bookmark the permalink.

One Response to CSS issues and hacks for Mac IE 5

  1. Jake Pucan says:

    CSS Hack is a bad habit, the best way to get rid from those hack…coding a neat and simple…
    Thanks by the way

Leave a Reply

Your email address will not be published. Required fields are marked *