alignment varies with different browsers - not sure why though ?

[fRostiE]

i'll have to screenshot to show you what i mean:

internet explorer:

firefox:

right, that middle part that isnt in line like should be has the following code:

 <div class="container">
		<h1>------ <a href="index.htm">Welcome</a> ------ <a href="f1.htm">F1</a> ------ <a href="dtm.htm">DTM</a> ------ <a href="wrc.htm">WRC</a> ------ <a href="btcc.htm">BTCC</a> ------ <a href="motogp.htm">MotoGP</a> ------ </h1>
 	  	<p> </p>
 	  	<table border="5">
		<tr>
		<td class="test2">
		<h1>content </h1>
		<p>content</p>
		<img src="btcc.jpg" width="204" height="151" alt="btcc car" /> <img src="xsara.jpg" width="204" height="151" alt="wrc car" /> 
		<p>content</p>
		<img src="f1.jpg" width="255" height="155" alt="f1 car" /> 
		<p>content</p>
		<p>content</p>
		</td>
		</tr>
		</table>
		<h1> ------ <a href="mailing.htm">Joing Our Mailing List</a> ------ </h1>
		<p>
   		<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		<img
        src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" />
		</p>
</div>
</body>
</html>

and the CSS which is support for format the container

.container {
background-color:#666666;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
width:800px;
margin:0 auto;
}

what have i done wrong ?

 

[fRostiE]

anybody ?

 

[Fx-Overlord]

CSS complaint browsers won't centre a table even if it's parent container is given the property text-align:center. Check out opera and safari and it should give you the same behaviour as in firefox.

You can fix it by:

<table border="5" align="center"></table>

<table border="5" style="margin: 0 auto"></table>

<div align="center"><table border="5"></table></div>