CSS and Alingning Nested Tables 1

[AlphaZulu453]

How can you align nested tables with css, I have been using the text-align statement to do it; it works in Win IE, however it doesn't in Safari.

 

[Vragabond]

Real aligning in CSS is done by specifying margins to the element you want aligned. Text-align does not work in standards-compliant browsers, because tables etc. are not text, they are block level elements. The text-align property is just used as a hack to accomodate IE's lack of support.

<table width="100%" border="1">
 <tr>
  <td style="text-align: center;">
   <table width="100px" style="margin: 0 auto;" border="1">
    <tr>
     <td>This table be centered</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td style="text-align: right;">
   <table width="100px" style="margin: 0 0 0 auto;" border="1">
    <tr>
     <td>This table be aligned to the right</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Little more explanation. The first margin statement (margin: 0 auto is a shortened display. First number relates to top and bottom margins, second to left and right. The second (margin: 0 0 0 auto describes the behaviour of all four margins, starting at the top and moving clockwise. That means that top is 0, right is 0, bottom is 0 and left is auto. Hope it is clear.

 

[AlphaZulu453]

is this HTML 4.01 strict complient?

 

[AlphaZulu453]

and how would you indicate center?

 

[Vragabond]

Oops, width should be width="100" not width="100px". I never specify width in html anymore and CSS demands units. Other than that, it is XHTML 1.1 Compliant, so it will fall back to HTML 4.01 Strict as well. The first nested table example is centered. Auto margins on left and right side indicate equal margins to the left and to the right so that the element is centered. And it is for me in Mozilla, Opera and IE.

 

[AlphaZulu453]

so I can put margin... in my css class, right?
right with my width, etc...

 

[AlphaZulu453]

Thanks, for the help now everyhting looks alot better :-D.
I'm working to make this site compatible with all "regular" css enabled broswers, unlike the old version wich was only IE compatable.

http://www.midwest-rail.com

If you take a look and have any suggestions tell me. Just don't go clicking on liks theya re the old version pages and their stayshets were delated as I replaced them with a sheet that made was organized :-D

 

[AlphaZulu453]

Also while I'm at it what is the CSS code to reblace the good ole:

border="0" cellspacing="0" cellpadding="0"

 

[AlphaZulu453]

Think I found the answer in the W3 CSS site :-D
see my other reply for more infoor visit

http://www.w3.org/TR/CSS21/tables.html#empty-cells