Quote Originally Posted by felgall View Post
I didn't say CSS with tables I said CSS tables - table commands in CSS. You have not been using CSS tables at all if that is what you are using since that is HTML and not CSS. It is an HTML table.

CSS tables use such properties as display:table, display:table-row, and display:table-cell in the CSS to style <div> tags and semantic HTML elements - there is no table tag in the HTML when you use CSS tables.

Here's an example of a CSS table.

Code:
<style type="text/css">
body, html {height: 100&#37;;text-align:center;}
#tbl {margin:0 auto;width:200px;text-align:left;}
#tbl[id] {display: table; height: 100%;}
#cell[id] {display: table-cell; vertical-align: middle;}
</style>
and

Code:
<div id="tbl"><div id="cell">
content dead centre of the page using a CSS table for layout
</div></div>
Works in Firefox, Opera, Safari, Chrome, Mozilla, Konqueror, IE8 etc but not in IE7 or IE6.

ps. I can get IE6 to create the equivalent layout using negative percentage offsets but can't figure out how to get IE7 to behave the same way as the -50% takes it back half the page height rather than half the element height - does anyone have a solution that will fix it for IE7?

Code:
<!--[if lte IE 6]><style type="text/css">
#tbl {position: absolute; top: 50%;}
#cell {position: relative; top: -50%;left: -50%;}
</style><![endif]-->
Mate.. mate.. no.

*shakes head*

...no. Really.

*shakes head (again)*

No..