Fine/Not Fine With/Without Doctype

[Kovo]

This one is quite a doozer. For argument sake, I put both versions of the problem on my server.
Problem One: Without Doctype: Firefox displays everything great, but IE shows no content. Example: http://kp.kovo.ca/alt/index.html

Problem Two: With Doctype: Both Firefox and IE display the page incorrectly. IE being worse. Example: http://kp.kovo.ca/index.html

Any ideas at all? Ive spent 4 hours now, struggling with this.

Any help will be greatly appreciated.

[felgall]

You need the DOCTYPE to have any chance of getting all browsers to display it because without it IE will do its own thing and so your page will either look right in IE and a mess everywhere else or right in modern browsers and a mess in IE.

Your problem is that you are trying to use position:absolute to position things and that only works for one exact resolution in one browser. You should try positioning things by setting margins and padding and float and clear to position the page content. You only need to use position :absolute when you want two elements to overlap and then you nest it inside a position:relative so that they will both move together as the window resolution changes.

[Kovo]

Thanks, but how do you suggest to Vertically align a Div with set width and height. Because I want to align that main background in the center of the page, and vertical-align does not work for some reason

[Centauri]

http://garyblue.port5.com/webdev/vcenter-css.html

[drhowarddrfine]

vertical-align is for inline elements. Divs are block.

[felgall]

Vertical alignment:

Centre: http://www.felgall.com/cshow02.htm
Bottom: http://www.felgall.com/cshow04.htm