Log in

View Full Version : The align property does not seem to work correctly in Firefox


DeathByPixels
07-08-2006, 11:51 AM
I am trying to get the main table to sit in the centre of the page, it works in IE but not in Firefox. When I preview in Firefox, the table sits on the left of the page. How do I get the table to sit in the middle of the page in Firefox like it does in IE?

Here's the code I have so far:


<!-- Main table -->
<table class="main_table" width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><!-- Header --><table width="800" height="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left"><img src="img/shimmyst_green_header.gif" width="800" height="250" /></td>
</tr>
</table><!-- END Header -->
</td>
</tr>
<tr>
<td><!-- Blog List --><table class="blog_list" width="800" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table><!-- END Blog List -->
</td>
</tr>
<tr>
<td><!-- Main Content Body --><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200">&nbsp;</td>
<td width="400">&nbsp;</td>
<td width="200">&nbsp;</td>
</tr>
</table><!-- ND Main Content Body -->
</td>
</tr>
<tr>
<td><!-- Footer --><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table><!-- END Footer -->
</td>
</tr>
</table>
<!-- END Main Table -->

Obviously I have the relevant head and body tags, I'm just showing you the main table with nested tables here. I am fairly new to coding and have been teaching myself. I also am using a CSS stylesheet, and as far as I can see I don't think I can get the table to align to the centre of the page by using CSS, but if there is a way then I'll be happy to know about it. :)
BLiZZaRD
07-08-2006, 12:00 PM
Just helping someone else with a similar problem, and it seems that yes it can be solved by CSS...

These are the links I gave the other member to look over:

http://www.dynamicdrive.com/forums/showthread.php?t=9202

http://www.dynamicdrive.com/forums/showthread.php?t=6648

http://www.dynamicdrive.com/forums/showthread.php?t=4735

On that last one, pay particular attention to the last post (by Mike)
djr33
07-08-2006, 12:01 PM
<div align="center">
<!-- table code goes here -->
</div>
DeathByPixels
07-08-2006, 12:12 PM
Thanks, the div tag worked. I'm not knowledgable about div tags so I will look at that in more detail.
djr33
07-08-2006, 12:36 PM
Well... not sure what the align is doing in the table.... not sure why it's not working. The align can either align the contents of the table, or align the item itself... not sure which it was doing in that case (i think in the table command it does the table and in the td (cell) command it does the contents, but... not sure).
Anyway, just putting it inside something will make everythign in that div centered, including the table... so... yeah.
Twey
07-08-2006, 01:40 PM
The align property is deprecated, and should be replaced with the CSS text-align. However, this applies only to inline elements. Block-level elements such as tables should be centred by setting both their left and right margins to auto.
DeathByPixels
07-17-2006, 12:31 PM
Okay the auto property worked but in DreamWeaver it says it's not supported by Netscape and I'd like to have my layout be supported by all major browsers if possible.
Twey
07-17-2006, 12:34 PM
Insofar as I'm aware, it's wrong. :)
DeathByPixels
07-17-2006, 12:40 PM
So DreamWeaver is not correct?
Twey
07-17-2006, 12:45 PM
I wouldn't be at all surprised. Don't sound so incredulous, it's not perfect -- in fact, far from it.

Setting the horizontal margins to auto is the pretty-much-universally-accepted way of centring block-level elements. If Netscape doesn't support the "auto" value for margins, a lot of the web is going to look very messed up in it. :)
DeathByPixels
07-18-2006, 08:41 AM
Well normally I don't use Dreamweaver for CSS stylesheets so no worries there.