PDA

View Full Version : Windows/IE won't vertically align my page - CSS advice please

pavinder
04-12-2006, 06:47 PM
After searching, reading and following coding suggestions from many threads about vertical centreing with CSS, I still have a single problem with a page.

It displays perfectly in Safari and Firefox, but with Windows/IE (always bl***y Windows/IE....) the page is not centred vertically but is stuck to the bottom of the window.

The page is at:
http://moonmilk.org/temp/index.htm

The CSS is at:
http://moonmilk.org/temp/styles/endless.css

(the relevant css in that file is:
html, body {
margin:0;
padding:0;
border:0;
height:100%;
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

#centred {
position:relative;
display:table;
width: 80%;
max-width: 1000px;
min-height:100%;
vertical-align: middle;
text-align: center;
border-left: 0px solid #a4c3bd;
border-right: 0px solid #a4c3bd;
background-color: #000000;
margin: 0 auto;
}

#content {
width:100%;
display:table-cell;
vertical-align:middle;
position:relative;
}

#centred {
height:100%;
}

#content {
top:50%;
left:0;
}


and in the page I use:
<div id="centred">
<div id="content">

<!-- main table with all content -->

</div>
</div>

This has me stumped....IE on Windows doesn't like this....any help appreciated.

Thanks in advance.
orcrist
04-12-2006, 07:01 PM
maybe this is confusing it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<html>
<head>
you opened 2 html tags, and have 100% height on "both"
kewlceo
04-12-2006, 07:32 PM
This link may provide some coding inspiration: http://www.brandman.co.uk/
pavinder
04-13-2006, 04:27 PM
maybe this is confusing it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<html>
<head>
you opened 2 html tags, and have 100% height on "both"

I thought this might be a problem when you pointed it out, but changing it made no difference....hmm, still confused - any further advice appreciated.

New version with 1 html tag only:
http://moonmilk.org/temp/indexfixed.htm
qthenoo
04-13-2006, 04:53 PM
Hey

This might help:
http://www.raw-nerve.co.uk/digby/home.html

q
pavinder
04-14-2006, 01:34 AM
Thanks kewlceo, the method on the site you referred looks very interesting, I didn't use it but will further check it out.

Thanks, qthenoo....very clever setting the centre line and then shifting back from there. Worked perfectly for my page.

I guess it may not be so flexible as the original method I tried because the content box size must be hard-coded (so for variable-sized content boxes might be tricky), but for my page that's not an issue. The main point is that this works and the other didn't! Appreciated.
harbingerOTV
04-14-2006, 02:00 PM
http://www.codingforums.com/showthread.php?t=83848&highlight=center

You can try the approach I posted in that thread. The doctype I used is important as it throws IE into quirks mode and allows it to work as intended. Less hassle and less code to boot.
_Aerospace_Eng_
04-14-2006, 02:06 PM
Hmm actually in that thread you could use a full doctype, except you would need to set the height of the html and body elements to 100% for the table to be 100% height. In quirksmode this doesn't matter but in standards compliant mode it does matter. Good article on what I'm talking about. http://www.apptools.com/examples/tableheight.php