Internet Explorer 5 Mac: oddities

Bottom edge positioning bug in IE5 Mac.

Explorer 5 Mac has many problems positioning a block level element at the bottom of it's container. Style in use here: {position: absolute; bottom:0}. Basically, if the parent container is positioned absolute, IE Mac can handle the bottom positioning of the child container correctly (sample). If the parent container is positioned relative, and no height is specified on the parent container, then IE 5 Mac will position the element based on the top coordinates of the parent element. See some example files on Big John's *P.I.E*, or a sample (nested positioned <div>) here. What more, if the <div> is offset from the bottom ({bottom: 20px}), as in the sample, this will be applied (see the screenshot). If height is specified on the parent container, then IE mac will position the bottom box correctly (sample and screenshot).

IE5 Mac will, however, position a (block) level element correctly at the bottom of the document, as long as that document contains enough (or more) content to fill the viewport (sample). Note: other browsers (Gecko, Safari, Opera 7) will position that div at the bottom of the viewport [1], unless <body> is positioned ({position:relative}). But Explorer 5 Mac (sample, screenshot) has serious problems with this one; the bottom box is positioned somewhere near the top of the page. If the document does not contain enough content, then the browser will position that element relative to the bottom of body (sample; body has a black bottom border and screenshot). IE Mac considers <body> as the nearest positioned ancestor, and <html> as the root of the document (I use a xhtml strict DTD in those testcases, the browser works in standards mode).

A way around in the last case is to use {position: fixed}. Example, the index page of this website (choose the cool blue style) (see the big heading), or this simple testcase. This works correctly, as {position: fixed} positions an element based on the viewport.

[1]... and none are wrong, probably, see this on the initial containing block in the CSS2.1 WD.

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: March 1, 2003; last updated: September 09, 2009

back to top

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