Table aligns fine in Internet Explorer and Safari but not in FireFox

[Fromethius]

I'm currently developing a new site for Day Tool, and I have the current build hosted under http://daytool.com/new2/

However, I have noticed that in FireFox the table that displays all of the content is off center (measured).

The site displays perfectly in Safari and Internet Explorer.

Why? Thanks.

Side-note: Also, in FireFox the image on the front page has a messed up border. This is another issue with FireFox. Why is this?

[ProwlingTiger]

As for the border, use

border-right: 1px;
border-left: 1px;

...same for top and bottom.

I'm still looking at the centering. IE and FF always give me trouble on that too, at least when I handcoded. Dreamweaver makes it a bit easier now.

[angelwatt]

Don't use tables for layout, that's your problem. There's also a number of empty tags in your code. Also avoid align="center" attributes. Move all styling to your CSS.

[ProwlingTiger]

Yeah, use

<div id="name"> in your html. put content within div tags.
#name {
attributes } for you CSS

[Fromethius]

I tried using css with using a class with text-align: center; but it did not center the table.

Are there any other centering tags in css besides text-align?

And what do you mean by empty tags in my code?

[InLikeALion]

"empty tags" are things like <p> or <span> or <div> with no semantic purpose. Using a <p> to give horizontal space, not to denote an actual paragraph, is a bad practice. Once you get more into this you'll understand why. Semantics means using html tags only for what they are intended, and not for presentation. This is one of the reasons why tables are not used for layout any more - when used for layout they are not holding tabular data, which is their purpose.

Generally to center a block-level element with css you will but the left and right margins to "auto".

[angelwatt]

Originally Posted by InLikeALion

"empty tags" are things like <p> or <span> or <div> with no semantic purpose.

Actually, by "empty tags" I meant code like below, taken from the site:

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

There's no text inside those tags, and as such they are empty. From the CSS it looks like you are trying to use the above for some type of styling, which is also bad. The b tag is also deprecated so should not be used.

[Fromethius]

Originally Posted by angelwatt

Actually, by "empty tags" I meant code like below, taken from the site:

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

There's no text inside those tags, and as such they are empty. From the CSS it looks like you are trying to use the above for some type of styling, which is also bad. The b tag is also deprecated so should not be used.

Actually, I didn't write that bit. I found that from an html script online to make rounded rectangles.

Also, I have yet to find out how to center it properly in firefox

[InLikeALion]

Originally Posted by Fromethius

Also, I have yet to find out how to center it properly in firefox

Did you follow my suggestion of margin: 0 Auto; ?

[Fromethius]

Thanks, must have missed that.

Works now.