Vertical Centering with XHTML 1.1 & IE 5 Mac

Forum Moderators: not2easy

Message Too Old, No Replies

Vertical Centering with XHTML 1.1 & IE 5 Mac

cperkins

11:45 pm on Jan 22, 2005 (gmt 0)

Ok, so I've run across a dozen different ways to vertically center something using CSS, many of which are valid XHTML 1.1.

And, I've run across a few different ways that work in Internet Explorer 5 for Mac OS X.

BUT, I cannot find any that are both.

To me there seems to be a bug in IE 5 OSX. For example, if I have a nice XHTML 1.1 document with vertical centering CSS then it won't work in IE 5.

But if I change this line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

to this line:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Then Lo! it works in IE 5 OSX. But, of course, now the document isn't XHTML 1.1, and my requirements on this points are inflexible.

So, please, does _anyone_ know of a method to reliably vertically center something using CSS only that is XHTML 1.1 valid AND works in IE 5 OSX.

Thanks,

Chris

encyclo

12:53 am on Jan 23, 2005 (gmt 0)

With the change of doctype you are switching between standards-compliance mode (XHTML doctype) and quirks mode (HTML 4.01 half-doctype) - so that indicates that the method you are using is dependant on a quirks-mode bug. (IE5 Mac does doctype sniffing, even though IE5 Win doesn't.)

However, as there are about 148 different ways to vertically-center a div or page, it would help if you were a bit more precise as to your requirements: are you trying to vertically-center within a div or section, within a column or table, or in relation to the entire page?

cperkins

1:59 am on Jan 23, 2005 (gmt 0)

I am trying to vertically (and horizontally, but that's working) a <div> within the browser window.

I'm not so sure that the methods I'm using depend upon any quirk mode features. I'm fairly certain they don't, but I could be mistaken.

Here is the first of the two methods I most commonly use:


<body>
<div id="hznline">
<div id="content">
 ... content blah blah
</div></div></body>

with the styles like so:


#content {
 width: 300px;
 height: 400px;
 position: absolute;
 margin-left: -150px;
 left: 50%;
 top: -200px;
}


#hznline {
 width: 100%;
 height: 1px;
 overflow: visible;
 position: absolute;
 top: 50%;
}

The above works with a DOCTYPE of XHTML 1.1 in all browsers I've tested in, but only works in IE 5 OS X if the DOCTYPE is HTML 4.0.1 Transitional.

The second method I use is simpler:

<body>
<div id="content"> ....blah blah blah....</div></body>

With the style:


#content {
 width: 300px;
 height: 400px;
 position: absolute;
 margin-left: -150px;
 margin-top: -200px;
 left: 50%;
 top: 50%;
}

Once again, this works with a DOCTYPE of XHTML 1.1 in all browsers except IE 5 OS X, where it only works if the DOCTYPE is HTML 4 Transitional.

And, my request, does anyone know of a way to center a <div> in a valid XHTML 1.1 document using CSS that works in IE 5 OS X (and other major browser)?

Thanks,

Chris Perkins