I’m in the midst of resurrecting another of my old sites in which I’m using the old design but bringing the HTML & CSS up to scratch.
The design calls for the site to be a 760 x 420 pixel container centered both horizontally and vertically within the navigator.
As anyone who has tried this will know, vertically aligning block level elements in CSS is not the easiest thing to achieve. It’s something I’ve done a couple of times, but the technique(s) to achieve this always escape me and I spend 10 minutes searching for the most concise and compatible method. Today that search brought me to a page on Centering elements on a CSS website.
It almost worked perfectly out of the box, apparently IE Mac doesn’t like the negative vertical margin.
The solution I have, which relies on the the IE Mac CSS Filter to simply remove the negative vertical margin, is:
#outerContentWrap {
width: 760px;
height: 420px;
position:absolute;
left: 50%;
top: 50%;
margin-top: -210px; /* half of the height */
margin-left: -380px; /* half of the width */
}
/* (x) remove negative vertical margin for IE Mac (apparently it doesn't like it) */
/*\*//*/
#outerContentWrap { margin-top: 0px; }
/**/
It is untested on IE Mac, but it should work. I understand the current discussions on the use of hacks especially those to do with fixing things in IE, but I’m not 100% convinced yet, I see them as necessary for IE 6 and below & IE Mac and I don’t really like the kludginess of conditional comments, but I digress, it works for me.