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 (http://www.allmyfaqs.com/faq.pl?Center_with_CSS) and David Dorward's own centring article (http://dorward.me.uk/www/centre/).

Good luck,
Mike