I think I'm having a senior moment...

Can someone please show me the errror of my ways and explain why I get different results from the following css:

1.
2.
I have a simple table, size 770px by 500px, which I have enclosed in the above in order to keep it in the centre of the screen. With the in-line style no.1, in IE7, the table correctly positions its contents horizontally and vertically centre of the screen, but when changed to the embedded style in no.2, the contents stay vertically centre but shift horizontally to the left of the screen. I have found a work-around by adding styles to the inner cell, but feel this should be unnecessary.

As an add-on to this question, Firefox takes no notice of the vertical-align property. Is there a way round this?

Perhaps the FAQ entry How do I center a table? (including the resources it links to) will help.

Thanks, Darin, I had been there and thought I'd covered everything. However, I did notice my incorrect vertical-align property, which should have been middle and not center!

I've, however, solved the problem by stripping everything down and building it all up again and got rid of a load of surplus coding. I now, surprise surprise, don't have an IE problem!

Still left with the problem of no vertical alignment in all other browsers (not just Firefox), though. I couldn't find any solution in your suggested link(s). Any ideas?

Example page stripped of everything but the essentials here.

100% of what? In strict mode, it's 100% of the containing element's height.

If you want something to be 100% high, then you need to make sure that its containing element is 100% high, that that element's containing element is 100% high, etc., all the way back to the html and body elements.

In that page I only see this vertical-align:


...and "middle" is the default value.

BTW, you also have a comment above the doctype. Note that any content there will put IE6 into quirks mode.

OK Darin - makes sense, done that, but still makes no difference. I did experiment with putting a specific height (ie 700px) to the outer table and Firefox immediately responded by correctly placing the inner table in the middle of the new height. Replaced it with 100% and Firefox puts it back to the top!

I know, but removing it makes no difference, either to IE or Firefox. Are you suggesting it should be somewhere else?


Didn't know that - many thanks.

That's what I mean. Without any "vertical-align" (or VALIGN attribute) table cells default to "middle", so you only need to add "vertical-align" for them if you want some other value, like "top" or "bottom".

http://www.w3.org/TR/CSS21/visudet.html#pr...-vertical-align is a bit confusing since it says the initial value is "baseline", but that obviously only applies to inline elements, not table cells. Still http://www.w3.org/TR/CSS21/tables.html#height-layout doesn't say anything about default values either.

I think Christian means it's not needed since it does nothing.

For 100% height see this page (alas now only at archive.org).
http://web.archive.org/web/20060427091047/...percheight.html

Thanks for that pandy. However I've now tried all variations that I can think of, including the div and body height combinations (see an even simpler example here), and it still only works in IE.

However, when I do remove the DOCTYPE declaration. IE, Firefox and Opera browsers now display the layout properly (Netscape still doesn't!)! I have tried both the 4.01 strict and transitional DOCTYPES, but to no avail. What is happening here, but more importantly what are the consequences of not putting in a DOCTYPE declaration?

I have no idea what I'm doing (which is worrying in itself), but when I remove the URI from the DTD in the DOCTYPE, I get the same response from all browsers as when I removed the DOCTYPE. Now - how do I resolve the Netscape problem or do I now retire gracefully with what I've got?

If I understand you right you want to do the old table trick with a vertically and horizontally centered nested table, but with CSS instead if HTML attributes?





Don't know if I got it all in here, but I'm hopeful.
CSS:

Interesting!!

I see the return of the td { vertical-align: middle; } even tho' it is supposed to be the default! But... it worked in all but IE7.

With some slight amendments/additions to your code: together with a full DOCTYPE declaration, it now works in all browsers exc Netscape. Thanks pandy for that. Is this a good time to retire or is there a known Netscape fix?

Netscape 4? The old trick works, with everything in HTML attributes. It won't validate.

You should be able to remove it! Don't know why pandy added it again, maybe it's a "pandyism".


Which part didn't work?

I never said he should leave it out. I explained what you meant.

Meaning you disagree?

Anyway here's another way to do it (just for fun), but it doesn't work in IE6 (don't know about IE7):

in IE only, the cell and it's contents all aligned to the left of the screen.

However.... (don't you just hate computers!) when trying again today, pandy's original coding works in all my browsers!! (and it validates ok)

I'm now off to try and rebuild my original page. Thanks Christian J (your 'fun' coding doesn't work in IE7 either!!) and pandy.