Help - Search - Members - Calendar
Full Version: Line up table in center for firefox
HTMLHelp Forums > Web Authoring > General Web Design
AnonSolutions
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">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>



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

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

<!-- <img src="<?php echo $mosConfig_live_site;?>/templates/mbt_simple/images/title_back.png" width="500" height="100" alt="Mambo Theme"/> -->
</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 id="buttons">

</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">©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;
}
AnonSolutions
Click to view attachmentAlso I forgot to add that the blue table leaves a 2 pixel gap or so on the left on top of the pathway, I've tried everything but it won't line up neither in IE or Firefox?

Any idea where in the code to make it line up?
Darin McGrew
I recommend that you start by fixing the HTML errors and CSS errors reported by the online tools.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.