How to get tables to center in Firefox

oimachi Peon

Messages:: 42

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

Hi there,

I know that this question has been asked often...but I'm new to Joomla CMS and am having some layout problems in Firefox. So I'm attaching the HTML and .css code.

If you look at http://www.anonsolutions.com in Firefox you can see that the blue table shifts to the right and is not centered.

If someone can point out where the problem is it would be great!

HTML code:

CODE<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Shortcut Icon" href="/favicon.ico">
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$sandbox_area = 0;
// banner combos

//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
}

//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$sandbox_area = 2;
} else {
$sandbox_area = 1;
$user1 = $user1 == 1 ? 3 : 4;
$user2 = $user2 == 1 ? 3 : 4;
}
?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="<?php echo $mosConfig_live_site;?>/templates/mbt_simple/css/template_css.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico"/>
<style type="text/css">

</style></head>

<div align="center">
<div id="main_outline">

<div id="header_area">
<div id="header">


</div>
<div id="top_outline">
<?php
if ( mosCountModules( 'top' ) ) {
mosLoadModules ( 'top' );
} else {
?>
<span class="error"></span>
<?php
}
?>

</div>
</div>

<DIV ALIGN=CENTER><table width="802" border="0">
<tr>
<td width="800" height="23" background="http://www.anonsolutions.com/images/banner-background.gif"></td>
</tr>
</table>

<div id="pathway_outline">
<div id="pathway">
<?php mosPathWay(); ?>
</div>


</div>
<div id="search">
<?php mosLoadModules ( 'user4', -1 ); ?>
</div>
<div class="clr"></div>
<div id="left_outline">
<div id="left">
<?php mosLoadModules ( 'left' ); ?>
</div>
</div>
<div id="content_area">
<div id="content">
<?php
if ( mosCountModules ('banner') ) {
?>
<div id="banner_area">
<div id="banner">

<?php mosLoadModules( 'banner', -1 ); ?>
</div>
</div>

</div>
<?php
}
if ( mosCountModules( 'right' ) and ( empty ($_REQUEST['task'] ) || $_REQUEST['task']!='edit' ) ) {
?>
<div id="right_outline">
<div id="right">
<?php mosLoadModules ( 'right' ); ?>
</div>
</div>
<?php
}
?>
<div id="sandbox_area_<?php echo $sandbox_area ?>">
<div class="sandbox_area">
<?php
if ( mosCountModules( 'user1' ) ) {
?>
<div id="user1_<?php echo $user1; ?>">
<div class="user1_outline">
<?php mosLoadModules ( 'user1' ); ?>
</div>
</div>
<?php
}
if (mosCountModules( 'user2' )) {
?>
<div id="user2_<?php echo $user2; ?>">
<div class="user2_outline">
<?php mosLoadModules ( 'user2' ); ?>
</div>
</div>
<?php
}
?>
<div class="clr"></div>
<div class="content_outline">
<?php mosMainBody(); ?>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div align="center">(C)2006 <a href="<?php echo $mosConfig_live_site;?>"><?php echo $mosConfig_sitename;?></a><div align="center">.Copyright Â© 1999-2006 - 869 Du Carrefour | PQ |Canada | J8N-5C8 <br> toll free: 1.800.452.6906 | Fax: 1.208.275.4384 </div><a href="http://xuzo.com/sitemap.xml">XML</a>><a href="http://xuzo.com/pataya.php">wbots
<?php mosLoadModules( 'debug', -1 );?>

</body>
</html>

Here is the .css:

CODE/* CSS Document */
.clr {
clear: both;
}

#main_outline {
width: 802px !important;
width: 808px;
border: 0px solid #333399;
padding: 6px;
background: #ffffff;
}

#pathway_outline {
width: 800px !important;
width: 800px;
float: left;
border: 1px solid #CCCCCC;
background: #FFF8E7;
margin-bottom: 2px !important;
margin-bottom: -2px;
margin-top: 0px
}

#pathway {
float: left;
padding: 4px 3px 3px 5px;
}

#buttons {
float: right;
margin: 0px;
padding: 0px;
width: 50%;
}

ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li
{
display: block;
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: right;
margin: 0;
width: auto !important;
width: 15%;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-left: 1px solid #333399;
}

ul#mainlevel-nav li a
{

display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
color: #ffff00;
background: #264989;
}

#search {
float: right;
border: 0px solid #FFFF00;
padding: 0px;
width: 163px !important;
width: 165px;
height: 21px !important;
height: 23px;
overflow: hidden;
}

#search .inputbox {
border: 0px;
padding: 4px 3px 3px 5px !important;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
height: 17px !important;
height: 19px;
width: 153px !important;
width: 159px;
color: #ffff00;
}

#header_area {
width: 802px !important;
text-align: left;
border: 0px;
margin: 0px;
}

#header {
float: left;
padding: 0px;
margin: 0px;
width: 635px;
height: 70px;
background: url(../images/header_short.jpg) no-repeat;

}

#top_outline {
float: left;
border: 0px solid #333399;
padding: 0px;
margin-left: 0px;
float: left;
overflow: hidden;
height: 70px !important;
height: 70px;
width: 165px !important;
width: 165px;
}

#left_outline {
margin-top: 2px;
border: 0px solid #333399;
padding: 2px;
float: left;
width: 159px !important;
width: 165px;
}

#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}

#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}

#content_area {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #FFFFFF; **/
float: left;
width: 635px;;
}

#banner_area {
width: 635px;
margin-top: 2px;
margin-bottom: 0px !important;
margin-bottom: -3px;
}

#banner {
float: left;
padding: 0px;
width: 468px;
}

#poweredby {
float: left;
margin-left: 2px;
}

#sandbox_area_2 .sandbox_area {
float: left;
margin-top: 2px;
width: 468px;
}

#sandbox_area_1 .sandbox_area {
float: left;
margin-top: 2px;
width: 635px;
}

#right_outline {
border: 1px solid #FFFFFF;
margin-top: 0px;
float: right;
padding: 2px;
width: 159px !important;
width: 165px;
}

/** with both user1 and user2 visible **/
#user1_2 .user1_outline {
width: 227px !important;
width: 233px;
border: 1px solid #333399;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_2 .user2_outline {
width: 227px !important;
width: 233px;
border: 1px solid #333399;
float: right;
margin-left: 2px;
margin-bottom: 2px;
padding: 2px;
}

/** with either user1 or user2 visible **/
#user1_1 .user1_outline {
width: 462px !important;
width: 468px;
border: 1px solid #333399;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_1 .user2_outline {
width: 462px !important;
width: 468px;
border: 1px solid #333399;
float: right;
margin-bottom: 2px;
padding: 2px;
}

/** based on 100% content width **/
#user1_4 .user1_outline {
width: 311px !important;
width: 317px;
border: 1px solid #333399;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_4 .user2_outline {
width: 310px !important;
width: 316px;
border: 1px solid #333399;
float: right;
margin-left: 2px;
margin-bottom: 2px;
padding: 2px;
}

/** with either user1 or user2 visible **/
#user1_3 .user1_outline {
width: 629px !important;
width: 635px;
border: 1px solid #333399;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_3 .user2_outline {
width: 629px !important;
width: 635px;
border: 1px solid #333399;
float: right;
margin-bottom: 2px;
padding: 2px;
}

/** adjust content area based on right nav **/
#sandbox_area_2 .content_outline {
width: 462px !important;
width: 468px;
border: 1px solid #FFFFFF;
padding: 2px;
}

#sandbox_area_1 .content_outline {
width: 629px !important;
width: 635px;
border: 0px solid #FFFFFF;
padding: 3px;
}

#active_menu {

font-weight: bold;
}

a#active_menu:hover {
color: #ff6600;
}

.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

.back_button {
float: left;
font-size: 11px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
border: 1px solid #FFFFFF;
width: 40px;
padding: 4px;
}

.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 1px solid #ffffff;
width: auto;
padding: 4px;
margin: 1px;
}

.pagenavbar {
padding-right: 5px;
float: right;
}

#footer {
text-align: center;
padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 3px;
}

td {
text-align: left;
font-size: 11px;
}

body {
margin: 0px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
font-size: 11px;
color: #000000;
background: #ffffff;
}

/* mambo core stuff */
a:link, a:visited {
color: #0000FF; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #0000FF; text-decoration: underline;
font-weight: bold;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
}

table.contentpane td {
margin: 20px;
padding: 0px;
}

table.contentpane td.componentheading {
padding-left: 4px;
}

table.contentpane td.contentheading {
padding-left: 15px;
padding-top: 9px;
}

.button {

font-family: Arial, Helvetica, Sans Serif;
text-align: center;
font-size: 12px;

}

.inputbox {

}

#sandbox_area_2 .componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #FFFFFF;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
width: 458px !important;
width: 462px;
}

#sandbox_area_1 .componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #FFFFFF;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
width: 625px !important;
width: 629px;
}

.contentcolumn {
padding-right: 5px;
}

.contentheading {
height: 30px;
background: url(../images/contenthead.png) repeat-x;
color: #999999;
text-align: left;
padding-top: 9px;
padding-left: 20px;
font-weight: bold;
font-size: 11px;
white-space: nowrap;
}

.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}

table.searchinto {
width: 100%;
}

table.searchintro td {
font-weight: bold;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
border: 1px solid #C0C0C0;
}

table.moduletable th {
background-color: #E7E7E7;
color: black;
text-align: left;
padding-top: 4px;
padding-left: 18px;
height: 21px;
font-weight: bold;
font-size: 12px;
border-bottom: medium solid #3879A7

}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;

}

table.pollstableborder td {
padding: 2px;
background: #FFFFFF;
}

.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
background-color : #ffffff;
}

.sectiontableentry2 {
background-color : #f9f9f9;
}

.small {
color: #999999;
font-size: 11px;
font-weight: bold;
}

.createdate {
height: 15px;
padding-bottom: 10px;
color: black;
font-size: 11px;
font-weight: bold;
}

.modifydate {
height: 15px;
padding-top: 10px;
color: black;
font-size: 11px;
font-weight: bold;
}

table.contenttoc {
border: 1px solid #333399;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}

table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #FFFFFF;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {

vertical-align: middle;
font-size: 12px;
font-weight: none;
color: #16387C;
text-align: left;
padding-top: 0px;
padding-left: 18px;
height: 19px !important;
height: 24px;
width: 100%;
text-decoration: underline;
text-transform:none
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
text-align: left;
}

h1 {
color: #000000;
font-size : 14px;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
}

/*This is the Pink Module*/

table.moduletable-pink {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
border: 1px solid F2CFE9;
}

table.moduletable-pink th {
background-color: #F2CFE9;
color: black;
text-align: left;
padding-top: 4px;
padding-left: 18px;
height: 21px;
font-weight: bold;
font-size: 12px;

}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;

}

/*This is the Orange Module*/

table.moduletable-orange {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
border: 1px solid #FFCC33;
}

table.moduletable-orange th {
background-color: #FFCC33;
color: white;
text-align: left;
padding-top: 4px;
padding-left: 18px;
height: 21px;
font-weight: bold;
font-size: 12px;

}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;

}

/* This is the gray table module*/

table.moduletable-gray {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
border: 1px solid #E7E7E7;

}

table.moduletable-gray th {
background-color: #E7E7E7;
color: black;
text-align: left;
padding-top: 4px;
padding-left: 18px;
height: 21px;
font-weight: bold;
font-size: 12px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 3px;

}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}

oimachi, May 28, 2007 IP

nabil_kadimi Well-Known Member

Messages:: 1,065

Likes Received:: 69

Best Answers:: 0

Trophy Points:: 195

#2

I'll have a try, please gice me some time

nabil_kadimi, May 29, 2007 IP

sauravhsingh Banned

Messages:: 60

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#3

why you are using table for that small thing you all site in DIV i suggest use float div for that place thats bater you will not get any problem in that

sauravhsingh, May 29, 2007 IP

diarmuid Peon

Messages:: 285

Likes Received:: 13

Best Answers:: 0

Trophy Points:: 0

#4

Before you worry about centering tables, it might be worth in general tidying up your code... I just ran it through a validator and it came up with 24 errors, you can't really expect it to be cross-browser compatible, if you don't tidy it up...

In the code you supplied, there was no opening body tag, which isn't really all that good, also there were several open elements, which considering you doctoyped the code as XHTML transitional, isn't good.

If you are going to use tables, then you can just use a <table align="center">, however the easiest thing to do is put it in just a div with no table, as in: <div class="centered"> (all tags lower case) and then just create a CSS class with "text-align:center" as one of their attributes.

One final thing, when you are posting code, it helps if you put it inside code tags:
[code ] and [/ code]
Code (markup):
That makes it easier to read.

Hope some of that helps.

diarmuid, May 29, 2007 IP

Fold Peon

Messages:: 29

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#5

I agree with the above posts about cleaning up your code and not using tables for layout.

But for a short answer, in general the CSS for centering an element is:
(element name) {
  margin: 0 auto;
}
Code (markup):

Fold, May 29, 2007 IP

oimachi Peon

Messages:: 42

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#6

Thanks everyone,

However, I think that the error is HTML, not CSS. Here is the code for the table, as you can see it shows up on the far right in Firefox....

What should I put in front of that code in my HTML file in order to have it line up in the center?

Tried everything but doesn't work....
<table width="802" border="0">
              <tr>
                <td width="800" height="23" background="http://www.anonsolutions.com/images/banner-background.gif"></td>
              </tr>
            </table>
Code (markup):

oimachi, May 30, 2007 IP

Fold Peon

Messages:: 29

Likes Received:: 1

Best Answers:: 0

Trophy Points:: 0

#7

Without a link it's difficult to analyse this, but I notice a lot of float: right style declarations in your CSS. Is it possible you forgot to clear one or all of those floats before your table?

Fold, May 30, 2007 IP

oimachi Peon

Messages:: 42

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#8

Hi Fold,

The table is located in the HTML file and shows up fine in IE, just doesn't work in Firefox.

Might be something to do with the .css file but I don't know...

But I only added the table in the HTML, didn't touch the .css file...

oimachi, May 30, 2007 IP

zinruss Notable Member

Messages:: 3,288

Likes Received:: 237

Best Answers:: 0

Trophy Points:: 270

#9

margin-left: auto;
margin-right: auto;
Click to expand...

Add this and i believe your problem will fix.

zinruss, May 30, 2007 IP

Log in or Sign up

How to get tables to center in Firefox

oimachi Peon

nabil_kadimi Well-Known Member

sauravhsingh Banned

diarmuid Peon

Fold Peon

oimachi Peon

Fold Peon

oimachi Peon

zinruss Notable Member

Useful Searches