IE5 positioning problem

[jamie smith]

Hello

I have a page I am testing www.amalgam-models.co.uk/james/test2.htm
It seems to work in all main browser accept IE5 mac. I have put a hack in which works but doesnt centralize the box:

.container {
background-color: transparent;
position: absolute;
top:100px;
left:200px;
}
/* following rules are invisible to IE 5 \*/
.container {
position:absolute;
left:50%;
top:50%;
width:730px;
height:404px;
margin-left:-365px;
margin-top:-202px;
}
/* styles for IE 5 Mac */

Is there any way of doing this to centralize an absolutly positioned box in Ie5 mac?
Any help would be greatly apreciated
Thanks

[mwinter]

It seems to work in all main browser accept IE5 mac.

I'm afraid I don't have access to Mac at all, so I can't test anything myself. Presumably the trick you've hidden from IE5/Mac doesn't work, but I've read that the "best" approach does.

Setting the left/right margins to auto is technically the best approach as the box model clearly sets out that this will centre an element by making the margins equal. However, there is a caveat: the document must be in standards mode (you must have a correct DOCTYPE declaration) for IE6 to do this right.

selector {
  margin-left: auto;
  margin-right: auto;
  width: ?;
}

Apparently, the shorthand (margin: 0 auto;) won't work with IE5/Mac. The explicit width is important as block-level elements tend to have 100% width, by default.

Unfortunately, there is a further complication: IE5/Win won't even work with this. However, you can get around this by introducing another container and setting the text-align property to center. Though text-align should only work on the inline content of an element, IE5/Win applies it to block-level elements, too.

#wrapper {
  /* Will centre block-level children in IE5/Win. */
  text-align: center;
}
#wrapper .container {
  /* Centre the element. */
  margin-left: auto;
  margin-right: auto;
  width: 730px;
  /* Re-apply left alignment. */
  text-align: left;
}

<div id="wrapper">
  <xx class="container">
  </xx>
</div>

Take a look at the All My FAQs article and David Dorward's own centring article.

Good luck,
Mike