Please Help: CSS div And td Alignments in Firefox

[Joey]

Hello all,

I have been designing a site where the main content is enclosed in one
table, and that table needs to be centered (the centering is done by
using another container such as a div or table).

In the future we might change things so that all content is
left-aligned.

Okay, now obviously I do not want to "hardcode" all of the master
table/tr/td tags to align (for example td align="center" and td
align="left" on each page). I think this would be much better job for
CSS.

I think I should be able to code a CSS class that would handle the
alignment. This would obviously make things much more manageable.

Sounds good, right?...wrong! The problem with this is that IE
handles...

div { text-align:left; }
div { text-align:center; }
td { text-align:left; }
td { text-align:center; }

....with no problems. Everything aligns as expected.

However, when viewing the same page in Firefox, it ALWAYS puts the
content along the left side of the page. The only exception is when I
use a table for the alignment instead of a div and then "hardcode" td
align="center" into the page.

My question here is: how can I tell Firefox to center my content, by
using CSS?

I have read some about specifying margin as auto?...that doesn't work
here. Firefox does not recognize the "text-align" style for some
reason.

If you guys have any ideas about this, please post them here. This
seems like something that should be extremely easy to fix...if I only
know what to code.

Thanks in advance for your help.

 

[Guest]

The reason that your page isn't rendering properly is that you define
overriding styles.

You should consider breaking these into classes (or using IDs if you only
need one).

Rather than using:
div { text-align:left; }
div { text-align:center; }
td { text-align:left; }
td { text-align:center; }

Consider something like this:
div.LeftAligned { text-align:left; }
div.CenterAligned { text-align:center; }
td.LeftAligned { text-align:left; }
td.CenterAligned { text-align:center; }

Of course, the class name will need to be specified for each spot that the
class needs to be used since you won't be defining styles for an element as a
whole but only for those elements that are specified to be of a particular
class.

You may want to consider reading up on CSS positioning rather than relying
on a table. CSS positioning can be a nuisance to set up but once you have it
right your life can be so much easier.

HTH

 

[Joey]

I do have everything broken down into classes (ex=div.Master, etc...) I
just left that out to make things simpler. Whether or not that is done
should have no effect on whether or not it works...at least that's been
my experience with CSS over the last five years or so?

The bottom line here is that CSS text-align:center works in IE but not
in Firefox.

I will check into the CSS positioning thing. Maybe that will help.
Thanks.