Usually I'd use this code below to center something both horizontally and vertically. It works in most browsers... Unfortunately, I get an error when validating a page with this code in it, the TABLE element does not have the height attribute. How would I accomplish the same, but using valid HTML 4.01?<br />
<br />
<br />
<TABLE width="100%" height="100%"><br />
<TR><br />
<TD height="100%" width="100%" valign="middle" align="center"><br />
Center me horizontally and vertically!<br />
</TD><br />
</TR><br />
</TABLE><!--content-->height's deprecated, use css then it will validate, ie<br />
<br />
table.a {height:100%; width:100%; }<br />
<br />
<table class="a"><br />
<br />
if you only have one table don't bother with the 'a' and don't call it in with a class<br />
<br />
/added<br />
use the same method for the TD<!--content-->lol, thanks.<br />
This is rather silly though.. Why take away the height attribute from only the TABLE element? height is still valid in the TD element. It's pretty odd.. I wonder what the reasons are..
<!--content-->actually height is also deprecated for the td's 
<!--content-->Deprecated does not mean that it's not valid. The W3C HTML 4.01 Validator does not complain about it.. If it was invalid, I'm sure it would mention it, it never misses anything else <!--content-->Deprecated means that while it is still included in the loose version of this level of HTML, it is unlikely to be included in future versions of HTML, and therefore you should try to avoid it as it may not be well supported by user agents in the future.<br />
<br />
Deprected means it is about to be phased out. It is still in, for now; but might not be so for very much longer.<br />
<br />
<br />
<br />
See also: <!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=17453&perpage=15&pagenumber=2">http://www.htmlforums.com/showthread.ph ... genumber=2</a><!-- m --><br />
<br />
and maybe: <!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=17971">http://www.htmlforums.com/showthread.ph ... adid=17971</a><!-- m --><!--content-->actually Rydberg, if you want to get technical<br />
<br />
valign="middle" align="center"<br />
<br />
those are also deprecated and shouldn't be used. the validator should have told you the errors on those as well.<br />
and it isn't just tables, but all block level elements.<br />
<br />
just an FYI<!--content-->Yes you're right scoutt, I am still a bit old-school when it comes to tables, I guess. However, this is what I'm using now..<br />
<br />
<br />
<TABLE style="height:100%; width:100%;"><br />
<TR><br />
<TD style="height:100%; width:100%; vertical-align: middle; text-align: center;"><br />
Center me horizontally and vertically!<br />
</TD><br />
</TR><br />
</TABLE><br />
<br />
<br />
<br />
<br />
<br />
The next step would be to use DIV instead, but I don't know how to set the height to 100% in a DIV, or how to align it vertically in the middle, whatever the problem is.<br />
<br />
<br />
<DIV style="height:100%; width:100%; vertical-align: middle; text-align: center;"><br />
Center me horizontally and vertically!<br />
</DIV><br />
<br />
<br />
This apparently won't do the job. how then?<!--content-->in a div you have to use top and left I believe.<!--content-->hhmmm. ok first off setting your div height to 100% will only work if it has some value to to fill to 100%, ie it's parent container the body, so if you have body height set to 100% then the div will also go to 100%, otherwise it will just size to it's content.<br />
And yup, scoutt it is top and left, example being:<br />
<br />
div.left{ <br />
position:absolute; <br />
left:100px; <br />
top:200px; <br />
width:100%; <br />
height:100%; <br />
background:#ffffff; <br />
}<!--content-->Hmm I haven't thought of the BODY as a parent container that way.. I've never set width and height to the body before. If I don't set width and height to it, why does it still display the background all over the window? It's different... And it didn't work with adding height: 100%; to the body, it still didn't display the DIV in the middle.. and the text got all messed up, it stretched _all_ my text to the bottom, no matter where it was.. Meaning I got about 48pt line-height which I didn't ask for Maybe I'm not doing it right... I don't understand what you mean when you say I have to use top and left.. How can I use that to position it in the middle and center? I can't use any fixed sizes. The whole point was to do it with vertical-align and text-align.... ?<!--content-->sorry rydberg, i gave you a half ****ed answer there lol,<br />
vertical-align doesnt work on block elevel elements like divs,use this to center it <br />
<br />
div.centered { <br />
position: absolute; <br />
top: 25%; <br />
left: 25%; <br />
width: 50%; <br />
height: 50%; <br />
} <br />
<br />
and you need to set your body like this
if you truly want your div to be 100%, try without this first!)<br />
body { <br />
height: 100%; <br />
padding: 0; <br />
margin: 0; <br />
}<!--content-->Thanks leoo24, but it still won't really do what I want it to.. Well it was close, but the text does that weird thing as soon as I alter the height of the body.. It gets like double line spacing or something, I have no idea why. Anyway, using a DIV doesn't seem like the optimal solution right now, I think I'll stick to my TABLE for now, and try to exercise using DIV's later on, although it's not recommended to use TABLE's for the layout. Thanks anyway<!--content-->
<br />
<br />
<TABLE width="100%" height="100%"><br />
<TR><br />
<TD height="100%" width="100%" valign="middle" align="center"><br />
Center me horizontally and vertically!<br />
</TD><br />
</TR><br />
</TABLE><!--content-->height's deprecated, use css then it will validate, ie<br />
<br />
table.a {height:100%; width:100%; }<br />
<br />
<table class="a"><br />
<br />
if you only have one table don't bother with the 'a' and don't call it in with a class<br />
<br />
/added<br />
use the same method for the TD<!--content-->lol, thanks.<br />
This is rather silly though.. Why take away the height attribute from only the TABLE element? height is still valid in the TD element. It's pretty odd.. I wonder what the reasons are..
<!--content-->actually height is also deprecated for the td's <!--content-->Deprecated does not mean that it's not valid. The W3C HTML 4.01 Validator does not complain about it.. If it was invalid, I'm sure it would mention it, it never misses anything else <!--content-->Deprecated means that while it is still included in the loose version of this level of HTML, it is unlikely to be included in future versions of HTML, and therefore you should try to avoid it as it may not be well supported by user agents in the future.<br /><br />
Deprected means it is about to be phased out. It is still in, for now; but might not be so for very much longer.<br />
<br />
<br />
<br />
See also: <!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=17453&perpage=15&pagenumber=2">http://www.htmlforums.com/showthread.ph ... genumber=2</a><!-- m --><br />
<br />
and maybe: <!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=17971">http://www.htmlforums.com/showthread.ph ... adid=17971</a><!-- m --><!--content-->actually Rydberg, if you want to get technical<br />
<br />
valign="middle" align="center"<br />
<br />
those are also deprecated and shouldn't be used. the validator should have told you the errors on those as well.<br />
and it isn't just tables, but all block level elements.<br />
<br />
just an FYI
<!--content-->Yes you're right scoutt, I am still a bit old-school when it comes to tables, I guess. However, this is what I'm using now..<br /><br />
<br />
<TABLE style="height:100%; width:100%;"><br />
<TR><br />
<TD style="height:100%; width:100%; vertical-align: middle; text-align: center;"><br />
Center me horizontally and vertically!<br />
</TD><br />
</TR><br />
</TABLE><br />
<br />
<br />
<br />
<br />
<br />
The next step would be to use DIV instead, but I don't know how to set the height to 100% in a DIV, or how to align it vertically in the middle, whatever the problem is.<br />
<br />
<br />
<DIV style="height:100%; width:100%; vertical-align: middle; text-align: center;"><br />
Center me horizontally and vertically!<br />
</DIV><br />
<br />
<br />
This apparently won't do the job. how then?<!--content-->in a div you have to use top and left I believe.<!--content-->hhmmm. ok first off setting your div height to 100% will only work if it has some value to to fill to 100%, ie it's parent container the body, so if you have body height set to 100% then the div will also go to 100%, otherwise it will just size to it's content.<br />
And yup, scoutt it is top and left, example being:<br />
<br />
div.left{ <br />
position:absolute; <br />
left:100px; <br />
top:200px; <br />
width:100%; <br />
height:100%; <br />
background:#ffffff; <br />
}<!--content-->Hmm I haven't thought of the BODY as a parent container that way.. I've never set width and height to the body before. If I don't set width and height to it, why does it still display the background all over the window? It's different... And it didn't work with adding height: 100%; to the body, it still didn't display the DIV in the middle.. and the text got all messed up, it stretched _all_ my text to the bottom, no matter where it was.. Meaning I got about 48pt line-height which I didn't ask for
Maybe I'm not doing it right... I don't understand what you mean when you say I have to use top and left.. How can I use that to position it in the middle and center? I can't use any fixed sizes. The whole point was to do it with vertical-align and text-align.... ?<!--content-->sorry rydberg, i gave you a half ****ed answer there lol,<br />vertical-align doesnt work on block elevel elements like divs,use this to center it <br />
<br />
div.centered { <br />
position: absolute; <br />
top: 25%; <br />
left: 25%; <br />
width: 50%; <br />
height: 50%; <br />
} <br />
<br />
and you need to set your body like this
if you truly want your div to be 100%, try without this first!)<br />body { <br />
height: 100%; <br />
padding: 0; <br />
margin: 0; <br />
}<!--content-->Thanks leoo24, but it still won't really do what I want it to.. Well it was close, but the text does that weird thing as soon as I alter the height of the body.. It gets like double line spacing or something, I have no idea why. Anyway, using a DIV doesn't seem like the optimal solution right now, I think I'll stick to my TABLE for now, and try to exercise using DIV's later on, although it's not recommended to use TABLE's for the layout. Thanks anyway
<!--content-->