IE 5.2 for Mac Error?

[TymArtist]

So my site redevelopment works perfectly in every.single.browser (even IE 4 and Netscape 4, granted some style removal, and surprisingly IE5 and Netscape 6 for Win2k)...except for the dreaded Mac IE browser. What this browser does is shrink the size of the top navigation so it does not extend all the way across the content. Should I even worry about it, or is there some sort of hack to make this work appropriately? I tried setting a width on the #topnav itself, but since ems can be finicky it always sets it one or two minor spaces off. Here's the code with comments included:

/* floats the navigation to the right in the #container div so it aligns with the #content. the padding and negative margins allow for a gradient background in the content that fully syncs with the menu on all scales */
#topnav {
margin-top: -1.5em;
float: right;
padding-bottom: 8em;
margin-bottom: -8em;
background: url(images/page_graphics/vertical-gradient.jpg) repeat-x top left;
}

/* floats each list item left so they faux inline, and sets a width that extends perfectly on all relevant browsers, and aligns the text to the center of the width. this does not style the block background */
#topnav li {
float: left;
text-align: center;
width: 8.9em;
}

/* sets the width of each menu link to full sized, puts the borders in place and also sets the background image which only distorts minorly upon enlargement of the text size in any given browser */
#topnav a, #topnav a:link, #topnav a:visited {
display: block;
width: auto;
text-decoration: none;
padding: 4px 0 4px 0;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
background: #ffffff url(images/page_graphics/menubackground.jpg) repeat-x bottom left;
}

[Don_Hoagie]

I have so much hatred for this garbage browser that I apologize for not being able to give you any technical assistance on it. Oh, i'm for accessibility alright... in my mind, sending a little note to your IE:Mac users that says "Stop using this browser if you have any self-respect" is the best thing you can do to help that user with accessibility. If someone's browsing on a Mac, they have their choice of possibly THE BEST browser on the planet, or Firefox if they want to make sure they don't miss anything on older, less compatible sites. I have a Mac. I have NEVER EVER needed to revert to the IE browser on the web. How someone could make the conscious PC leap from Windows to Mac and STILL assume that they need to go out and download IE is beyond my comprehension.

Oh yeah, my answer... no, don't bother with it. Definitely do not alter your current code for the sake of this browser. If you have to build a hack, that's as far as I'd go. And personally, I wouldn't even go that far.

[TymArtist]

thanks for your rather great response that helps me in justifying my decision that a legacy browser should only be supported to the extent that it allows me to support it (if that makes any sense). wouldn't even know where to begin as far as hacks, unless there are some pre-established mac IE spacing hacks. seems unlikely but i'll search around for about 5 minutes and if i don't find anything call it a day haha.

actually told our IT guy that it works perfectly in all browsers except that one...and well, he said "i think you're definitely fine then". just like to be the perfect perfectionist :)

[Krapulator]

The best way to deal with IE Mac if you are creating css layouts is to feed them the unstyled page.

Sure, it won't look as pretty as your styled site, but visitors will still be able to view your content (and will probably appreciate the quick loading time, as chances are they are using an older computer).

[TymArtist]

what's the trick to that? they don't bypass the @import command, since that's what i'm using to fool the other older browsers. i'm assuming you can do it a third way?

[whoisgregg]

sending a little note to your IE:Mac users that says "Stop using this browser if you have any self-respect" is the best thing you can do to help that user with accessibility

It'd be nice, too, if web design forums everywhere would automatically turn "IE Mac" and any variation into a censored ($#%^&!) curse word.

<edit>to, two, too</edit>

[Krapulator]

I do it on the server side using the Http User Agent. Alteratively, you could probably acheive this with a bit of javascript.

[bedlam]

Well, your css is useless for debugging without some accompanying markup, but I see an obvious place to start troubleshooting your problem; I see this:

What this browser does is shrink the size of the top navigation so it does not extend all the way across the content...

...and I see this:

#topnav {
[float declaration]
[no width declaration!]
}

If #topnav is indeed the problem element, then I have to tell you not only that IE Mac's rendering is arguably the correct one, but also that you will eventually also have problems with various Windows flavours of IE and also Opera as long as you float elements without explicitly declared widths.

In the part of the CSS 2.1 spec called Computing Widths and Margins, the w3c says [w3.org]:

10.3.5 Floating, non-replaced elements

If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

So:

• Floated elements' widths are assumed to be 'shrink-to-fit' unless otherwise specified
  
• #topnav in your code is floated,
  
• #topnav in your code has no explicit width
  

Therefore, the expected behaviour is for #topnav to be as wide as the content it contains and no wider...which sounds an awful lot like the problem you're reporting.

As I've mentioned before, IE Mac gets a lot more abuse than is really appropriate, and I think statements like these serve to point out the real problem:

...garbage browser...

...not being able to give you any technical assistance on it...

...wouldn't even know where to begin...

...best way to deal with IE Mac if you are creating css layouts...

...i'll search around for about 5 minutes...

...namely that many developers are not nearly as familiar with the bugs, capabilities and idiosyncracies of IE 5 Mac as they are with the oddities of various Windows browsers. There is no severe, inherent problem with IE 5 Mac that makes CSS layouts impossible, and certainly none that causes as many problems as IE 5 Windows' infamous broken box model.

To be sure, there are CSS layout strategies that will not work with IE 5 Mac, but there are few if any current browsers (sometimes including Firefox [positioniseverything.net]) about which the same can not be said.

However, it's true that supporting any browser that may require different coding strategies from the mainstream adds to a project's cost, so it may not be worth the time to support even if the amunt of time is quite reasonable. The most sensible question in the thread in response to an apparent IE Mac bug was your own rhetorical question, TymArtist:

Should I even worry about it ...?

...and this is a question best answered by you, your client, your client's stats package and your client's audience...

-B