Firefox Layout Problem

**RobertRoyal** · 06-09-2008, 03:40 PM

My layout looks fine in IE, but the content body does not extend with the data, and the footer aligns to the right instead of at the bottom.

Here is the site:
http://web4.txpcorp.com/joomla/index...d=72&Itemid=93

It is a Joomla site, but I know this is a simple CSS (or HTML) issue, I'm just not smart enough to figure it out.

Here are the files that matter:

Index

Code:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/menu.css" type="text/css" />
</head>
<body id="page_bg">

	<div id="top">
		<div class="pill_m">
			<div id="pillmenu">
				<jdoc:include type="modules" name="user3" />
			</div>
		</div>
		
	
	</div>
	<div id="header"> 			<jdoc:include type="modules" name="user5" />

	

	</div>

	<div class="clr">  </div>
	
	<div class="center">
	
		<div id="wrapper">
		<div id="pathway"> <jdoc:include type="modules" name="breadcrumb" /></div>

			<div id="inner_shadows">	
				<div id="content">

					<div id="leftcolumn">	
						<jdoc:include type="modules" name="left" style="rounded" />
						<?php $sg = 'banner'; include "templates.php"; ?>
					</div>
					
					<div id="maincolumn">	
						<div class="nopad">
							<?php if($this->params->get('showComponent')) : ?>
								<jdoc:include type="component" />
							<?php endif; ?>
						</div>
					<div class="clr"></div>
				</div>
			</div>
		</div>
	
	</div>	
	<jdoc:include type="modules" name="debug" />
	
	

	<div id="content_bottom" align="center"></div>
	<div id="footer_copy" align="center"> <jdoc:include type="modules" name="user8" /></div>
	<div id="footer_copy" align="center">&copy; 2008 TXP Corporation. All rights reserved.</div>

	<div id="footer">
		<p>
					</p>
		<div id="sgf">


			<?php $sg = ''; include "templates.php"; ?>
		</div>
	</div>
</body>
</html>

...to be continued...

**RobertRoyal** · 06-09-2008, 03:43 PM

CSS Part 1

Code:

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
	border: none;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: #333;
}

body.contentpane {
	background: #ffffff url(../images/bodybg.jpg) top left repeat-x;
}

a:link, a:visited {
	text-decoration: underline;
	font-weight: normal;
	color: #333;
}

a:hover {
	text-decoration: none;
	font-weight: normal;
	color: #333;
}

input.button, .validate  {
	color: #333;
	font-size: 10px;
	border: 1px solid #555;
}

.search input.button {
	text-align: right;
}

input.button:hover, .validate:hover  {
	
}

p {
	margin-top: 0;
	margin-bottom: 5px;
	text-align: justify;
}

.inputbox {
	border: 1px solid #555;
	color: #333;
	padding: 2px;
}
.inputbox:hover {

}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
	padding: 0;
	background: #FFF url(../images/bodybg.jpg) top left repeat-x;
}

div.center {
	text-align: left;
	margin: 0 auto;
	padding: 0;
	width: 833px;
}



div#wrapper {
	margin: 0 auto;
	width: 833px;
	text-align: leftt;
	background: url(../images/content.png) top center repeat-y;
}

#top {
	width: 833px;
	height: 168px;
	margin: 0 auto;
	padding: 0;
	background: url(../images/top.png) top center no-repeat;
}

#header {
	height: 217px;
	background: url(../images/header.png) top center no-repeat;
	margin: 0 auto;
	width: 833px;
}

#inner_shadows {
	background: url(../images/inner_shadows.jpg) top center no-repeat;
}

#content {
	width: 833px;
	margin: 0 auto;
	padding: 20px;
	overflow: visible;
}

#content_bottom {
	width: 833px;
	height: 55px;
	background: url(../images/content_bottom.png) top center no-repeat;
}

#logo {
	padding: 220px 30px 0 0;
	text-align: right;
	margin: 0 auto;
	width: 833px;
}





#logo a, #logo a:link, #logo a:hover {
	font-weight: normal;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 20px;
	padding: 0;
	margin: 0;
	letter-spacing: 1px;
	color: #F9F9F9;
	text-decoration: none;
	outline: none;
	line-height: 36px;
}

#pathway {
	padding: 0px 30px 8px;
	width: auto;
	margin-top: -2px;
	margin-right: 250px;
	text-align: left;
	font-weight: normal;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 12px;
	color: #333;
}

#footer_copy {
	font-weight: normal;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 11px;
	padding: 0px 0px 0px;
	margin: 0;
	color: #333;
	margin-top: 0;
	margin-right: 0px;
	word-spacing: 0px;
	display: block;
	}

.pill_m {
	padding: 0;
	width: 833px;
	height: 47px;
	float: right;
}

#pillmenu {
	float: right;
	margin: 0;
	padding: 120px 30px 0 0;
}

#pillmenu ul {
	margin: 0;
	padding: 0 20px;
	list-style: none;
}

#pillmenu li {
	float: left;
	margin: 0 2px;
	padding: 0;
	height: 22px;
	
}

#pillmenu li:hover {

}

#pillmenu li a#active_menu-nav {
	color: #ffffff;
	background: url(../images/menu_li.jpg) top right no-repeat;
	
	
}

#pillmenu li a {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 12px;
	float: left;
	display: block;
	line-height: 22px;
	padding: 0 8px 0 8px;
	color: #aa2607;
	text-decoration: none;
	font-weight: normal;
	
}

#pillmenu li a:hover {
	color: #d59383;
	
}

#leftcolumn ,#rightcolumn {
	margin: 0;
	width: 180px;
	float: left;
	text-align: left;
	padding: 0 10px 0 10px;
}

div#maincolumn {
	float: left;
	width: 520px;
}

div.nopad {
	overflow: hidden;
	padding: 0;
}

div.nopad ul {
	clear: both;
}

td.middle_pad {
	width: 20px;
}

#banner_l {
	text-align: left;
	padding: 0 0 0 24px;
}

#footer {
	margin: 0 auto;
	width: 902px;
	height: 50px;
	text-align: center;
	vertical-align: top;
	padding-bottom: 10px;
}

#footer p {
	height: 20px;
	text-align: right;
	padding: 10px 30px 0 0;
	color: #fff;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
	height: 22px;
	padding: 8px 0 0 10px;
}
table.blog {
	
}
h1 {
	padding: 0;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 20;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 16px;
	vertical-align: top;
	color: #666;
	text-align: left;
	float: left;
	font-weight: bold;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

h4 {
	font-family: Helvetica,Arial,sans-serif;
	color: #333;
}

h3, .componentheading, table.moduletable th, legend {
	margin: 0;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 14px;
	text-align: left;
	color: #555;
	padding: 0;
}
/* small text */
.small {
	font-size: 10px;
	color: #555;
	font-weight: normal;
	text-align: left;
}

.modifydate {
	height: 20px;
	vertical-align: bottom;
	font-size: 10px;
	color: #555;
	font-weight: normal;
	text-align: right;
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: 10px;
	color: #555;
	font-weight: normal;
	vertical-align: top;
	padding-top: 0px;
}

a.readon {
	display: block;
	float: right;
	line-height: 14px;
	font-size: 10px;
	text-decoration: none;
	padding: 1px 2px 1px 2px;
}

a.readon:hover {
	color: #333;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
	background-color: #f1f1f1;
	color: #333;
}

.ol-background {
	background-color: #f1f1f1;
	color: #333;
}

.ol-textfont {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 10px;
}

.ol-captionfont {
	font-family: Helvetica,Arial,sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	background-color: #f1f1f1;
	color: #333;
	text-decoration: none;
	font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {

}

.column_separator {
	
}

td.buttonheading {
	text-align: right;
	width: 0;
}

.clr {
	clear: both;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}



/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-bottom: 1px solid #666;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
  color: #333;
  font-size: 10px;
}

**RobertRoyal** · 06-09-2008, 03:44 PM

CSS part 2

Code:

/* content styles */
.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
}

table.contentpane td{
	text-align: left;
}

table.contentpane td.contentdescription {
	width: 100%;
}

table.contentpane  {
	text-align: left;
	float: left;
	width: 100%;
	margin: 8px;
}

table.contentpane ul li a .category {
	color: #FF8800;
}

table.contentpane ul li {
	color: #333;
}

table.contentpaneopen {
	margin: 2px 8px;
}

table.contentpaneopen li {
	margin-bottom: 5px;
}

table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #669933;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

table.contentpaneopen h4 {
	font-family: Helvetica,Arial,sans-serif;
	color: #669933;
}

.highlight {
	background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable, div.module {
  margin-bottom: 25px;
}

div.module_menu, div.module {
	margin: 0;
	padding: 0;
}

div.module_menu div, div.module {
	
}

div.module_menu div div, div.module div div {
	margin-bottom: 14px;
	padding: 0;
	background: url(../images/left_body.gif) bottom center no-repeat;
}

div.module_menu div div div, div.module div div div{
	padding: 0;
	width: auto;
	margin: 0;
	background: url(../images/left_top.gif) top center no-repeat;
}

div.module_menu div div div div, div.module div div div div {
	background: none;
	padding: 4px 8px;
}

div.module div div div form {
	padding: 0;
	width: 164px;
	margin: 0 auto;
}

div.module div div div form ul {
	margin: 0;
	padding: 0 0 10px 40px;
}

div.module_menu ul {
	list-style: none;
}

div.module_menu ul li{
	margin: 0;
	padding: 0;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
	font-weight: bold;
	background: transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	padding: 2px 0 2px 25px;
	line-height: 24px;
}


#leftcolumn div.module table ,#rightcolumn div.module table {
	
}

#leftcolumn div.module table.poll {

}

#leftcolumn div.module table.poll td {
	text-align: left;
}

/* LEFT COL H3 */
#leftcolumn h3, #rightcolumn h3 { 	
	color: #F9F9F9;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 12px;
	text-align: left;
	height: 30px;
	width: 174px;
	text-decoration: none;
	padding: 0 0 0 6px;
	background: url(../images/h3.jpg) top center no-repeat;
	font-weight: normal;
	line-height: 24px;
	margin: 0;
}

#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c, 
#rightcolumn .moduletable_menu, #rightcolumn .moduletable, #rightcolumn .moduletable_text, #rightcolumn .c {
	margin: 0 0 16px 0;
	padding: 0 0 8px 0;
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	width: 164px;
}

#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin: 0;
	padding: 0;
}

#leftcolumn ul.menu li:hover, #rightcolumn ul.menu li:hover {

}

/*LEFT COL LINK*/
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	line-height: 18px;
	padding: 0 0 0 8px;
	text-decoration: none;
	color: #666;
	font-weight: normal;
	font-size: 11px;
	background: url(../images/menu_row.gif) center left no-repeat;
	margin: 0;
	height: 18px;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	color: #333;
}

/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	line-height: 18px;
	padding: 0 0 0 8px;
	text-decoration: none;
	color: #333;
	font-weight: normal;
	font-size: 11px;
	background: url(../images/menu_row.gif) center left no-repeat;
	margin: 0;
	height: 18px;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	
}

/*LEFT COL SUB LINK*/
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link {
	text-decoration: none;
	color: #666;
	margin: 0 0 0 6px;
	font-size: 11px;
	background: url(../images/submenu_row.gif) center left no-repeat;
	font-weight: normal;
	display: block;
	line-height: 18px;
	padding: 0 0 0 18px;
	border: none;
	height: 18px;
}

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover {
	font-size: 11px;
	margin: 0 0 0 6px;
	padding: 0 0 0 18px;
	text-decoration: none;
	border: none;
	color: #333;
	background: url(../images/submenu_row.gif) center left no-repeat;
	height: 18px;
	line-height: 18px;
}
/*SUBMENU POSITION*/
#leftcolumn ul.menu li#current ul {
	margin: 0;
	padding: 0;
}

#leftcolumn ul.menu li#current ul li {
	margin: 0;
	padding: 0;
}

/*CURRENT SUBMENU POSITION*/
#leftcolumn ul.menu li ul {
	margin: 0;
	padding: 0;
}

#leftcolumn ul.menu li#current ul li a:hover {
	color: #333;
}

#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	list-style: none;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin: 6px 0;
	padding: 0;
	list-style: none;
}

#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin: 0;
	padding: 0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

form#form-login fieldset { 
	border: 0 none; 
	margin: 0; 
	padding: 4px 7px 9px 7px;
}
form#form-login ul li{ 
	padding: 0; 
}

form#form-login ul li a {
	text-align: left;
	padding: 0;
	font-size: 10px;
	color: #555;
}

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #333; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #333; text-align: center; }

/* Parameter Table */
table.paramlist {
	margin-top: 5px;
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
	font-family: Helvetica,Arial,sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f8;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
	text-align: left;
}

/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 15px;
}

legend {
	margin: 0;
	padding: 0 10px;
}

td.key {
	border-bottom:1px solid #eee;
	color: #333;
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul { 
	background: #C3D2E5;
	padding: 0;
	margin: 0;
}

/* System Error Messages */
#system-message dd.error ul { 
	color: #c00; 
	background: #E6C0C0; 
	border-top: 3px solid #DE7A7B; 
	border-bottom: 3px solid #DE7A7B;
	padding: 0;
	margin: 0;
}

/* System Notice Messages */
#system-message dd.notice ul { 
	color: #c00; 
	background: #EFE7B8; 
	border-top: 3px solid #F0DC7E; 
	border-bottom: 3px solid #F0DC7E;
	padding: 0;
	margin: 0;
}



/* ****************************************************************************** */
/* blue */
input, button {

}
/* blue */
input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color: #fff;
	font-family: Helvetica,Arial,sans-serif;
	text-decoration: none;
}
a.sgfooter:hover {
	color: #333;
	font-family: Helvetica,Arial,sans-serif;
	text-decoration: none;
}
#sgf {
	font-size: 12px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	color: #333;
	font-family: Helvetica,Arial,sans-serif;
}
.sgf {
	text-align: right;
	font-size: 12px;
	font-family: Helvetica,Arial,sans-serif;
	color: #333;
	text-decoration: none;
}
.sgf1 {
	font-size: 12px;
	font-family: Helvetica,Arial,sans-serif;
	color: #333;
	text-align: left;
}

a.sglink:link, a.sglink:visited {
	color: #333;
	font-size: 12px;
	font-family: Helvetica,Arial,sans-serif;
	text-decoration: none;
}
a.sglink:hover {
	color: #333;
	font-family: Helvetica,Arial,sans-serif;
	text-decoration: none;
	}

**RobertRoyal** · 06-09-2008, 03:44 PM

Any help would be greatly appreciated.

Thank you very much for your time,
Robert

**Minos** · 06-09-2008, 04:35 PM

Firefox really isn't hard to troubleshoot, Click Tools>Error Console, and it tells you certain issues. I'll point out the ones I see for now:

template.css
Line 89 - Typo. Left only has one t :P. "left"
Line 319 - The padding value requires a unit. IE will kindly default to px, FF does not. "20px"

**Medyman** · 06-09-2008, 07:00 PM

Hi Robert,

The first issue I see is that your CSS is within the <body> tag. It should be in the <head> tag. This might be a Joomla thing and your styles might work fine even when in the <body>, so I don't know. But, if you do have access to the <head>, your CSS styles belong there.

The second thing I would suggest is to validate your markup. Validating in itself might not 100% cure your problems, but it'll take some big variables out of the equation.

If it's still not working for you after that, post back and we'll be glad to delve deeper into the CSS.

**RobertRoyal** · 06-11-2008, 07:07 PM

Thank you both for your responses. I fixed the errors and validated the markup, however neither effort addressed my issues. After I continued researching the alignment issue I discovered I need to "clear" the CSS at that point in the index file.

That addressed the footer issue, however I am still unable to determine why the image (content.png) will not tile/repeat in the content body in Firefox. It works fine in IE. I am going to lose my freakin' mind trying to figure this out. Please, if someone could take a moment to investigate I would be eternally grateful. I used to hate IE, but I think my CSS incompetence is changing my mind about it...

Robert

**boogyman** · 06-11-2008, 07:54 PM

you need to assign the repeat value for the background image

Code:

background: url('/path/to/image') repeat-x top right;

repeat-x will make it tile across the Xaxis (horizontal)

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

repeat-y will tile across the Yaxis (vertical)
Y
Y
Y
Y
Y
Y
Y
Y

repeat will tile across Xaxis (horizontal) AND Yaxis (vertical)

XYXYXYXYXYYX
YXYXYXYXYXYX
YXYXYXYXYXYX
XYXYXYXYXYXY
XYXYXYXYXYXY

no-repeat will force the image to not repeat at all

**RobertRoyal** · 06-11-2008, 07:54 PM

Ok, I am patting myself on the back. Stupid mistake. It was an overflow: hidden/visible error elsewhere in the code.

Thread: Firefox Layout Problem

Thread Tools

Search Thread

Firefox Layout Problem

Bookmarks

Bookmarks

Posting Permissions