Doctype messes up table positioning but needed for CSS

[kbrdbasher]

If I declare a doctype suitable for CSS menus in my website the table in a table centraliser no longer works.

I have a master table set to 100% width and height then a sub table with align center and valign middle. In old money that put the table in the middle of the page dead on. I have looked at CSS methods with negative margins and so but they need a pre-defined table height. Really I need my tables to grow vertically as content fills them.

If I use HTML 3.2 doctype (or none at all) the tables sit nicely in the middle but the CSS menus don't work, and with HTML 4 the CSS menus work but the central table sits at the top of the screen. (I think HTML 4 does not allow a 100% table height for the master table to fill the browser window, ie. it is not returning the correct value for height).

Of course this is only in IE, FF and Safari work fine without HTML 4 definition.

Is there any way to have a content growing central block with CSS?

Thanks for reading this far :)

[g1smd]

Matt Cutts wrote some stuff about this type of thing just a few days ago.

Are any of his examples useful?

[kbrdbasher]

He talked about dynamically resizing an iframe, which is similar but when the frame is centered in the screen the centering is a fixed value user defined based on the height of the iframe (in this case) you subtract half the hight of the object to center from the top position.

But this value is not predetermined with a dynamic frame.

What may work is a script that dynamically sets the center position as a function of frame size, this would work in both directions.

Now if only I knew how to do this. I'll give it a bash but since I started this job with some knowlege of frames and tables and none of CSS I have come a long way :).

[kbrdbasher]

Well thanks for the pointer, I have something that looks right in IE now, but FF wont load the iframe, anyway I suspect that is an easy fix.

Interestingly, and I'll probably get lynched for this, I have used a quirks mode in the parent frame to set the table centering and HTML 4 doctype in the child frame which allows CSS menus to work.

Anyway IE is happy with it and it has helped me make a more permanent move to CSS based design, but what tables can do on their own in old-skool HTML requires CSS and Javascript in new. I know its neater and all but really, I always measure a page by good design with least hacks.

If anyone has any further comments or suggestions they are much appreciated.

[g1smd]

Yes, Matt talked about iframes, my mistake.

[kbrdbasher]

Thanks G1SMD, it lead me to an appropriate solution which actually helped in the ever continuing quest for content and design separation. Oh, FF didn't want to load the iframes off a windows drive but was fine over HTTP. I have three operating systems here and I need to switch all the time to check the main browsers and make sure things look right. If only Safari used F5 for refresh like everyone else.

The Iframe is centred within a table in quirks mode and the iframe itself uses HTML 4 for CSS. Works on all tested browsers (no not dillo). :)

[g1smd]

Glad it helped in a round-about sort of way.

[phranque]

welcome to WebmasterWorld [webmasterworld.com], kbrdbasher!

[kbrdbasher]

thanks :)