Gossamer Forum
Home : General : Chit Chat :

Centering a table, insize a div ... not working in FF :/

Quote Reply
Centering a table, insize a div ... not working in FF :/
Hi,

Anyone got any ideas as to why this CSS won't center my table in FireFox? (works fine in IE);

Code:
.front_cat_table {
padding: 2px 2px 2px 2px;
margin-top: 5px;
border-collapse: collapse
width: 75%;
font-size: 11px;
align: center;
}

.front_cat_table td {
width: 50%;
align: center;
text-align: center;
}

HTML:

Code:
<h3>Find People...</h3>
<p>To start your search, please select a category from below, or use our search facility found above.</p>
<table class="front_cat_table">
<tr>
<td>
<p align="center"><img src="/image/7/793107-desk_1091.gif" alt=" desk_1091 " border="0"></td>
<td>
<p align="center"><img src="/images/793855-tn_chat_923.gif" border="0" height="32" width="32"></td>
</tr>
<tr>
<td>
<p align="center">Businesses</td>
<td>
<p align="center">People</td>
</tr>
</table>

Been driving me nuts :(

TIA!

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Centering a table, insize a div ... not working in FF :/ In reply to
Just a guess but doesn't using <p align="center"> require a closing </P> ?

It may be that not using that in your other table cells is causing problems for the whole page?

Unoffical DBMan FAQ

http://creativecomputingweb.com/dbman/index.shtml/
Quote Reply
Re: [Andy] Centering a table, insize a div ... not working in FF :/ In reply to
Try using <td align="center"> ?
Quote Reply
Re: [Andy] Centering a table, insize a div ... not working in FF :/ In reply to
It didn't center for me in either IE or FF - until I added the good old fashioned <CENTER> tags around the table... then it worked in both. May not be politically correct, but it works.

Code:
<DIV><CENTER>
<h3>Find People...</h3>
<p>To start your search, please select a category from below, or use our search facility found above.</p>
<table class="front_cat_table">
<tr>
<td>
<p align="center"><img src="/image/7/793107-desk_1091.gif" alt=" desk_1091 " border="0"></td>
<td>
<p align="center"><img src="/images/793855-tn_chat_923.gif" border="0" height="32" width="32"></td>
</tr>
<tr>
<td>
<p align="center">Businesses</td>
<td>
<p align="center">People</td>
</tr>
</table></CENTER>
</DIV>
Quote Reply
Re: [LoisC] Centering a table, insize a div ... not working in FF :/ In reply to
Hi,
LoisC wrote:
Just a guess but doesn't using <p align="center"> require a closing </P> ?

It may be that not using that in your other table cells is causing problems for the whole page?

Thanks for the replies.

I ended up using a <p class="table_center">...</p> wrapped around it, and then used:

Code:
.table_center {
align: center;
}

:)

Thanks again to everyone who replied. I really needed a CSS solution <G>

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Centering a table, insize a div ... not working in FF :/ In reply to
FYI, there is no such property called 'align'. If you want to center something like a table using CSS, you have to do something like:
Code:
.mytable {
margin: 0px auto;
}

However, this won't work properly in IE5.5 (or was it IE5, can't remember), you need to set text-align: center; on the element that the table is inside.

Adrian
Quote Reply
Re: [brewt] Centering a table, insize a div ... not working in FF :/ In reply to
Hi,

Thanks for the heads up :)

God I hate all this cross-browser compatibility stuff :|

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!