[SOLVED] Tables not center aligned.

[MasterACE14]

Morning Everyone,

 

My Tables aren't center aligning on my website, they are centered, but completely centered and lined up with each other. They seem to change how they are centered depending on the surfers screen resolution. I don't know why?

 

here's the link to the page: http://www.crikeygames.com.au/conflictingforces/index.php?page=progress

 

and here's the pages code(note their is some PHP):

<div id = "progress">
<center><b><u>Progress</u></b><br></center><br>

<?php

// loop through records writing a table for each one
while ( $row = mysql_fetch_array( $rs ) )
{

?>



<table align="center" valign="middle" class = "fix">
<tr>
<td><b><?php echo $row["author"]; ?></b></td>

<?php // workout the post date

$datetime = $row["posttime"];
$year = substr( $datetime, 0, 4 );
$mon = substr( $datetime, 4, 2 );
$day = substr( $datetime, 6, 2 );
$hour = substr( $datetime, 8, 2 );
$min = substr( $datetime, 10, 2 );
$sec = substr( $datetime, 12, 2 );
$orgdate = date("F j, Y",
mktime( $hour, $min, $sec, $mon, $day, $year ) );

?>
<td><b><?php echo date("F j, Y", strtotime($datetime)); ?></b></td>
</tr>


<tr><td colspan="2">
<?php echo $row["text"]; ?>
</td></tr>
</table>
<br>


<?php } ?>

</div>

 

Regards ACE

[pocobueno1388]

I've never seen the word "middle" before like you use it:

valign="middle"

That should be "center".

 

Post the CSS code to the "fix" class.

[MasterACE14]

/* XXXXXXXXXXXXXX table properties XXXXXXXXXXXXXXXXXX */

/* set table properties */
table { border: 1px solid green; text-align: center }
td { border: 1px solid lime; background: black }

/* set table width and margin */
table { width: 500px ; caption-side: top;
            margin-bottom: 20px           }

/* compute column widths regardless of cell content */
table.fix { table-layout: fixed }

/* XXXXXXXXXXXXXXXXX table properties XXXXXXXXXXXXXXXX */

[MasterACE14]

bump 

[MasterACE14]

anyone got any idea's why the tables aren't aligning properly?

[teng84]

use margin: auto;

[MasterACE14]

that made it worse  :-\

[noobstar]

I think its because the Navigation Panel pushes the first 2 tables to the right while the other 3 are pushed by the left side panel to the left while the rest of them align properly into the center.

 

Best thing to do is chuck all your panels into a big table and then in the middle area you can have a loop of news tables as you have now. This should make everything align properly.

 

Here is what i mean: