Internet Explorer 5 Mac: oddities

Right edge positioning bug in IE5 Mac. Applies to IE 5.x OS9 and OS X.

Using absolute positioning to place a box on the right edge of the document/viewport [specs] has to some serious in IE 5.x mac. In this page I have used an absolute positioned box styled this way: {position:absolute; top:50px; right:0; width:250px; border:3px solid #b3b4b5; background:#fefefe; padding:0.5em} [ basic sample ]. The browser positions the box correctly in most cases, but a mysterious and unneeded horizontal scrollbar always appears. Peter–Paul Koch has done some testing on this, and uncovered a ‘secret right margin’ on the absolute positioned box! Seemingly, IE 5 Mac adds a margin around positioned boxes, even if you specify {margin:0} in the style rule. We both, independently, came to the conclusion that this ‘secret’ margin was 15px wide. [1]  [2]

(Some left positioned boxes are also affected by this.) See also: bottom–positioning and layering problems with positioned elements.

An important note: before going further, the above ‘box with a secret margin’ only applies to absolute positioned <div>'s that are direct descendants (children) of the root of the document. An AP <div> nested in another AP <div>, or a relative positioned <div>, will behave correctly, without the side effects of a hidden margin (providing the parent block has a ‘width’ declared [3]). See some example files on Big John's *P.I.E*.

1. Solving it: values in pixels.

This enables us to modify the style rule by specifying {position:absolute; top: 50px; right: 15px; margin:0 -15px 0 0}. This kills the horizontal scrollbar in IE5Mac, without side effects in other browsers (Mozilla 1.0 and up. Netscape 6.2 and 7, Opera 5+) — Note, I'd like confirmation of this for IE 5, IE5.5 (this works fine) and IE6 win(ok in W2K and Win98). See a test file here, or the samples (and screenshots) on PPK's page. Update: I’ve just been notified that Mozilla 1.01 running on Win2000, does show a persistent scrollbar when using the above styling. See below for a way to hide this hack from other (non IE5 mac) browsers.

Nice. But what if I want to position that box, say, 5px of the edge of the viewport? The same mysterious scrollbar will appear on IE Mac. The solution is then similar to the previous one: position the box 20px of the edge, and apply the same right margin to the box: {position:absolute; top: 50px; right: 20px; margin: 0 -15px 0 0}. See this test file.

Note [1]: This hack is only needed when one wants to position the box less than 15px from the edge of the viewport. Values for {right} of 16px or higher do not cause problems in IE5 Mac.

Note [2]: If the right postioned is taller than the height of the viewport (forcing a vertical scrollbar), then this hack will not work. Try reducing the size of the window in the above examples. If, however, the document's contents is longer than the height of the right positioned box, eg a long static box, as is this page, then this will work correctly.

2. Solving it: values in ems.

The above bug will show up as well. The critical value hovers around 1em. However, the fix is much more complex. If NO font–size has been specified (on <body> or on the <div>), then specifying {position:absolute; top: 50px; right: 1em; margin: 0 -1em 0 0} will position the box on the right side of the viewport. However, if a font-size has been specified, either on <body> or on the <div>, then the values need to be higher.

sample1 has body {font: normal 100% 'Lucida Grande', Verdana, sans-serif;}, the right positioned <div> has {font-size:90%} specified. To kill the scrollbar in IE Mac, I needed to specify {position:absolute; top: 50px; right: 1.05em; margin: 0 -1.05em 0 0}.

sample2 has body {font: normal 0.9em 'Lucida Grande', Verdana, sans-serif;}, the right positioned <div> has {font-size:0.9em} specified. To kill the scrollbar in IE Mac, I needed to specify {position:absolute; top: 50px; right: 1.25em; margin: 0 -1.25em 0 0}.

If you need or want to use em values for positioning of the box: test test test... Basic rule here is that IE5 mac uses the default font–size setting of the browser to compute the value of em (and not the value compute from the declared value on body or html). Note as well that if the user has a different default setting for font–size, the critical values may be different.

On reflection, I wouldn’t go that way. Working with percentage values is next to impossible. And em values are pretty unreliable. Use pixels.

3. Hiding it

It is possible that this hack will fail in one way or another in IE win 5. It also appears to fail in Mozilla 1.01on Win2000. A simple fix would be to hide the hack from IE–win browsers (ie the direct child selector body>div#rightthree). This fix won't hide the rule from Mozilla.

A better way: serve some specfic values for IE5 mac, and different (correct values) for all other (modern) browsers. First, we need to feed the corrected values for IE5Mac. Then we reset the values for 'right' and 'margin' to the correct ones, but hidding this second rule from IE mac. We’ll wrap this rule in a @media declaration, which IE5mac doesn't read. It goes like this:

div#righteight {
	position:absolute;
	top: 50px; right: 15px;
	margin: 0 -15px 0 0;
	} /* values for IE5 mac */
@media all {
	div#righteight {right: 0; margin: 0}
  	} /* values for others */

or use the comment hack:

div#righteight {
	position:absolute;
	top: 50px; right: 15px;
	margin: 0 -15px 0 0;
	} /* values for IE5 mac */
/* hide from IE mac \*/
div#righteight {
	right: 0;
	margin: 0
	} /* IE Mac can see the rest of the style sheet */

See this testfile.

4. Other AP boxes

When an absolute positioned box relies both on {right:xxx} (any values) and {left:xxx} (any values), that is positioning based on both the right and the left edge of the document (sample), then this little hack will not work. This page by D. D. Brierton provides a workaround (read the source code). It should be noted, however, that this solution only fixes the positioning/width issue in IE5 Mac (and other msIE browsers), it doesn't kill the scrollbar (that is, it only corrects the positioning issue). IE5 mac will still have a persistent scrollbar.

A left positioned box spanning the viewport: {left:0; width:100%} can also be fixed using this hack [sample]. Adding left and/or right padding, or borders will complicate the solution however. The same little hack works also for boxes postioned from the left using percentage values [ sample ].

notes

[0] CSS2 Specification: 10.1 Definition of "containing block" and 9.6 Absolute positioning.

[1] Actually, after further testing I don't think this secret margin is the only explanation. There is something much more complex at work here. I suspect that the buggy element in this case is not the absolute positioned <div> itself, but its containing box(es): <html>, <body> and the scrollbars positioning, and how the browser calculates the overall available width of the canvas with respect to the viewport and then positions AP boxes within it. Or much more simple ? mispositioning of the scrollbars with respect to their container ? IE5 mac's behaviour with the overflow property, where unneeded scrollbars also show up, seems to point in that direction. See also this note and my notes on bottom positioning.

[2] The width of the scrollbars on both OS X and OS 9.22 happens to be 15px.

[3] If no width is declared for an absolute positioned block level element, then IE Mac expands the width of the box to that of the parent box (or the nearest positioned block).

related

section – contents

Also around here
[ Empty spaces ]
a weblog

This collection of documents and test cases related to Internet Explorer 5 for Mac is no longer maintained and is only kept online for historical reasons.

Comments and suggestions: are not needed anymore. Thanks to all who provided info and tips in the past.

File created: September 2, 2002. Last update: September 09, 2009.

back to top

permanent location: http://www.l-c-n.com/IE5tests/right_pos/index.shtml.