Tag error: <txp:tru_tags_if_has_tags> ->  Textpattern Warning: tag does not exist while_parsing_page_form: archive, default
Tag error: <txp:image id="36" align="left" /> ->  Textpattern Notice: Unknown tag attribute: align while_parsing_page_form: archive, default
/commentable: CSS Centering A Table For Firefox Flock Mozilla.
Dinarius = digital interest
5 May 2008

CSS Centering A Table For Firefox Flock Mozilla.

Cross browser compatibility stinks. Sadly for us all, a website designed WITHOUT this XBC in mind makes us look like absolute flops when a Firefox browser views that site that looked normal in Internet Explorer. This is the unavoidable result of IE disobeying the standards that were set in place. Mozilla-based browsers adhere strictly to these standards.

Setting Margin to AUTO works for Firefox but NOT Internet Explorer.Luckily, this isn’t a big, huge, hairy problem. You thought that aligning the text to CENTER would actually center the table. Why? The TABLE isn’t text… It’s okay. We’ve all done it. In short, you’re going to wrap the Table in a DIV that’s controlled by CSS Margin-Left and Margin-Right attributes set to AUTO. This will result in anything inside the DIV having an equal distance from one side of the browser as it has on the other: Centered.

Those are the words, the picture is to the left of all this.

Oops! Without the text-align: center information for Internet Explorer, it defaults to the LEFT. Since TABLES aren’t TEXT, let’s center the table in Internet Explorer a BETTER way… We’ll use an HTML CENTER tag above the Table-wrapping DIV and close it up just under the Table.

Putting CENTER below the Table-wrapping DIV changes nothing in my circumstance so I assume it would do nothing for yours as well. The CSS code that I wrapped my table in to center it in Firefox, Flock and Mozilla is extremely basic. Remember, the margin-left/right is the important part that Internet Explorer didn’t teach us to do.

#tabcen {
  background: #000;
  border: 5px solid #ffff99;
	width: 750px;
	  margin-left: auto;
	  margin-right: auto;
}

Note the definte lack of text-align:center Again, tables aren’t text. Don’t center them that way. Add the HTML Center tag before the DIV that centers the table for Firefox…

<body bgcolor="#006600">
<center>
<div id="tabcen">
<table summary="redux" cellpadding="0" cellspacing="0" width="750">
<tr>
<td COLSPAN=3> .... and on and on and on until closing time ....
</table>
</center>
</div>

With enough of these articles and the huge frustration of not finding even simple answers for myself, I’m tempted to create a new category labelled XBC that will handle little bits and pieces like this accumulating to most answers that Mozilla-based browsers don’t provide on their sites or documentation. Even W3C sites are a little too vague.

Anyhow, hope this helped your situation in some way.

Favorite's the ARTICLE, not the SITE.