Layout problem in IE6 for a selfmade Mambo template

[Meriadoc]

Hey guys,
I'm working on developing a Mambo-based website for a client. I've never worked with Mambo before, so it's had quite the learning curve. They need a custom template so I've just started with the default and ripped it apart. (therefore there are leftovers from SolarFlare II in the CSS and possibly the template file still)

My problem is this, in Firefox everything displays as it should - the main content displays. Yay. Now, in IE6 the main content box only displays when I'm on the home page. Once I click on any content item the main content area won't show up. A look into the source shows that the text is being loaded, but I must have some error in my CSS which IE is balking on (or FF is fixing for me). I'm posting the CSS and template files here, as well as attaching screenshots from FF and IE. I'd appreciate any help on this as I can't seem to find the root of the problem.

Cheers!

CSS

Code Select Expand


/*--------------------------------------
MAIN PAGE INFORMATION
--------------------------------------*/
*
{
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;

font-family: Trebuchet MS, Arial, Helvetica, Sans-Serif;
font-size: 8pt;
color: #000;
background: #ccc url(../images/bg.jpg);
}
#container
{
position: relative;
min-height: 100%;
min-width: 776px;
max-width: 1000px;
background-color: #fff;
border-right: 1px solid #dde;
}
/*--------------------------------------
LAYOUT
--------------------------------------*/
#header
{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 230px;
background: #dde url(../images/header_background.jpg) no-repeat;
border-bottom: 1px solid #cdc;
z-index: 30;
}

#topStrip
{
position: relative;
top: -27px;
width: 100%;
height: 30px;
z-index: 40;
}

#search
{
position: absolute;
left: 0px;
margin-left: 15px;
z-index: 100000000;
}
#breadcrumb
{
padding-top: 3px;
margin-left: 190px;
}

#leftSidebarBackground
{
position: absolute;
top: 0;
left: 0;
width: 175px;
height: 100%;
background: #DDF1B8 url(../images/nav_background.gif);
border-right: 1px solid #cdc;
z-index: 10;
}
#leftSidebar
{
position: relative;
float: left;
top: -27px;
left: 0;
width: 175px;
z-index: 20;
}
#ywamlogo
{
position: relative;
left: 50%;
margin-left: -50px;
margin-top: 5px;
width: 100px;
height: 83px;
background-image: url(../images/ywamlogo.jpg);
}

#mainContent
{
position: relative;
margin-left: 190px;
margin-right: 15px;
z-index: 20000;
}

#footer
{
position: relative;
margin: 0 auto;
left: 95px;
bottom: 0;
width: 60%;
border-top: 1px dashed #999;
text-align: center;
font-size: 6.5pt;
clear: both;
z-index: 100;
}

/*--------------------------------------
TEXT
--------------------------------------*/

/* MAIN FONTS - beats me why it's in a td and not an div or span */
td
{
text-align: left;
font-size: 8pt;
}

.contentheading
{
height: 30px;
background: url(../images/contenthead.png) top left repeat-x;
color: #333;
text-indent: 15px;
font-weight: bold;
font-size: 8pt;
white-space: nowrap;
}

/*--------------------------------------
LINKS
--------------------------------------*/

a:link, a:visited
{
color: #408640;
text-decoration: none;
font-weight: bold;
}

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

/* NAVIGATION LINKS */
a.mainlevel:link, a.mainlevel:visited
{
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 157px !important;
width: 174px;
display: block;
border-bottom: 1px solid #82A482;
vertical-align: middle;
text-align: left;
color: #000;
font-size: 6.5pt;
font-weight: bold;
text-decoration: none;
}

a.mainlevel:hover
{
color: #333;
font-size: 7pt;
font-weight: bold;
text-decoration: underline;
}

a.pathway:hover
{
color: #408640;
text-decoration: underline;
}

/*--------------------------------------
FORMS
--------------------------------------*/

div.search input
{
border: 1px solid #99a;
color: #445;
background: transparent;
}

/*--------------------------------------
ALREADY HERE STUFF
--------------------------------------*/
/** old stuff **/

.back_button {
float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
margin-right: 10px;
float: right;
}



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;
}







/* mambo core stuff */


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

table.contentpaneopen td {
   padding-right: 5px;
}

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



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

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

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

.button {
  color: #ff6600;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}

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

}

.contentcolumn {
padding-right: 5px;
}





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

table.searchinto {
width: 100%;
}

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

table.moduletable {
width: 156px;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

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

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

table.pollstableborder td {
  padding: 2px;
}

.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: #999999;
font-size: 11px;
font-weight: bold;
}

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

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

table.contenttoc td {
  padding: 2px;
}

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



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

a.sublevel:hover {
color: #C43C03;
text-decoration: none;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}

form {
/* removes space below form elements */
margin: 0;
padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  text-transform: normal;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}


template

Code Select Expand


<?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 = explode( '=', _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>
<?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;
$colspan = 0;
$right = 0;
// banner combos

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

//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
} 
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/bilbao_theme/css/template_css.css" rel="stylesheet" type="text/css" media="screen, projector" />
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#container
{
height: 100%;
width: 1000px;
}
#footer
{
margin: 0 -205px;
left: 50%;
}
/*]]>*/
</style>
<![endif]-->
</head>

<body>
<div id="container">

<div id="header"></div>
<div id="topStrip">
<div id="search">
<?php mosLoadModules ( 'user4', -1 ); ?>
</div>
<div id="breadcrumb">
<?php echo _YOU_HERE.' '; mosPathWay(); ?>
</div>
</div>

<div id="leftSidebarBackground"></div>

<div id="leftSidebar">
<div id="ywamlogo"></div>
<?php mosLoadModules ( 'left' ); ?>
</div>
<div id="mainContent">
<?php mosMainBody(); ?>
</div>

<div id="footer">
Content copyright JCUM Bilbao &lt;&gt; <a href="#">Colophon</a>
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
</div>

<?php mosLoadModules( 'debug', -1 );?>

</div>
</body>
</html>


source code (pulled from IE)

Code Select Expand


<?xml version="1.0" encoding="iso-8859-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>
<title>JCUM Bilbao - Mambo License Guidelines: Introduction</title>
<meta name="title" content="Mambo License Guidelines" />
<meta name="author" content="Administrator" />
<meta name="description" content="Mambo - the dynamic portal engine and content management system" />
<meta name="keywords" content="mambo, Mambo" />
<meta name="Generator" content="Mambo - Copyright 2000 - 2005 Miro International Pty Ltd.  All rights reserved." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="http://localhost/jobs/ywam/BilbaoSpain/dev/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://localhost/jobs/ywam/BilbaoSpain/dev/templates/bilbao_theme/css/template_css.css" rel="stylesheet" type="text/css" media="screen, projector" />
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#container
{
height: 100%;
width: 1000px;
}
#footer
{
margin: 0 -205px;
left: 50%;
}
/*]]>*/
</style>
<![endif]-->
</head>

<body>
<div id="container">

<div id="header"></div>
<div id="topStrip">
<div id="search">

<form action="index.php" method="post">

<div align="left" class="search">
<input alt="search" class="inputbox" type="text" name="searchword" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /></div>

<input type="hidden" name="option" value="search" />
</form> </div>
<div id="breadcrumb">
You are here: <span class="pathway"><a href="index.php" class="pathway">Home</a> <img src="http://localhost/jobs/ywam/BilbaoSpain/dev/templates/bilbao_theme/images/arrow.png" border="0" alt="arrow" />   Mambo License </span>
</div>
</div>

<div id="leftSidebarBackground"></div>

<div id="leftSidebar">
<div id="ywamlogo"></div>
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="index.php?option=com_frontpage&amp;Itemid=1&lang=en" class="mainlevel" >Home</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6&lang=en" class="mainlevel" id="active_menu">Mambo License</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2&lang=en" class="mainlevel" >News</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=blogsection&amp;id=0&amp;Itemid=9&lang=en" class="mainlevel" >Blog</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_weblinks&amp;Itemid=23&lang=en" class="mainlevel" >Links</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_contact&amp;Itemid=3&lang=en" class="mainlevel" >Contact Us</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_search&amp;Itemid=5&lang=en" class="mainlevel" >Search</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_newsfeeds&amp;Itemid=7&lang=en" class="mainlevel" >News Feeds</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=category&amp;sectionid=3&amp;id=7&amp;Itemid=25&lang=en" class="mainlevel" >FAQ's</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_wrapper&amp;Itemid=8&lang=en" class="mainlevel" >Wrapper</a></td></tr>
</table> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>
<!-- mbf_mod_version: [0.99] by www.mamboworld.net //--><div align="center">
<a href="index.php?option=com_content&task=view&id=5&Itemid=6&lang=es">Español</a>&nbsp;|&nbsp;<a href="index.php?option=com_content&task=view&id=5&Itemid=6&lang=en">English</a><!--Mambel fish V1.5 (2005-03-16)-->
<!-- &copy; 2003 Think Network, released under the GPL. -->
<!-- More information: at http://mamboforge.net/projects/mambelfish -->
</div> </td>
</tr>
</table>
</div>
<div id="mainContent">
<table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
Mambo License Guidelines </td>
</tr>
</table>

<table class="contentpaneopen">
<tr>
<td width="70%" align="left" valign="top" colspan="2">
<span class="small">
Written by Administrator </span>
&nbsp;&nbsp;
</td>
</tr>
<tr>
<td valign="top" colspan="2" class="createdate">
Thursday, 19 August 2004 </td>
</tr>
<tr>
<td valign="top" colspan="2">

<table cellpadding="0" cellspacing="0" class="contenttoc" align="right">
<tr>
<th>Article Index</th>
</tr>

<tr>
<td>
<a href="index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6&lang=en" class="toclink">Introduction</a>
</td>
</tr>

<tr>
<td>
<a href="index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6&amp;limit=1&amp;limitstart=1&lang=en" class="toclink">Guidelines</a>
</td>
</tr>
</table><div class="pagenavcounter">Page 1 of 2</div>Learn more about how Mambo is licensed and how this affects you.<br />  <br />  Mambo is released under the GNU General Public license (GNU GPL).The
GNU GPL provides for a person or persons to distribute Mambo for a fee,
but not actually charging for the software itself, because Mambo is
free. Mambo is free to share and change, but if you do change it in
anyway, can you also change the license and make it commercial? No! The
whole GPL is devoted to ensuring this does not happen. Copyright, a
much more refined and stringent law will prevent this as well.<br />  <br />  So with regard to Mambo, the GPL and copyright:  <p>You <strong>MAY</strong> distribute it and charge for that service. You <strong>MAY</strong> change it, add design and content to it and you <strong>MAY</strong> charge for that. You may <strong>NOT</strong> alter the license and you must <strong>NOT</strong> alter the copyright. You do <strong>NOT</strong>     have to show a 'Powered by Mambo' graphic, as it not a copyright notice.</p>  <p>In other words, you must NOT pretend that Mambo is yours, and you must NOT charge     people for Mambo.</p>
Use Mambo to empower yourself and your clients by taking away the
'Black Magic' that surrounds putting content on the internet. Charge
for the value you add and not for the hard work that Miro, the Mambo
Development Team and the Mambo community have put into it.<br />  <br />  <strong>Guidelines:</strong>  <p>Mambo is "free" software released under the GNU General Public License (GPL). </p>  <p>The
word "free'' has two legitimate general meanings; it can refer either
to freedom or to price. When we speak of "free software'', we're
talking about freedom, not price. (Think of "free speech'', not "free
beer''.) </p>  <p><em>Free software is a matter of the users' freedom
to run, copy, distribute, study, change and improve the software. More
precisely, it refers to four kinds of freedom, for the users of the
software:</em></p>  <ul>  <li>The freedom to run the program, for any purpose.</li><li> The freedom to study how the program works, and adapt it to your needs        <ul><li><em>Access to the source code is a precondition for this. </em></li></ul>    </li><li>The freedom to redistribute copies so you can help your neighbour.</li><li>The  freedom to improve the program, and release your improvements to the  public, so that the whole community benefits. <ul><li><em>Access to the source code is a precondition for this </em></li></ul>    </li>  </ul><br /><div class="pagenavbar"><div>Prev - <a href="index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6&amp;limit=1&amp;limitstart=1&lang=en">Next &gt;&gt;</a></div></div><br /> </td>
</tr>
<tr>
<td colspan="2" align="left" class="modifydate">
Last Updated ( Thursday, 19 August 2004 )
</td>
</tr>
</table>
</div>

<div id="footer">
Content copyright JCUM Bilbao &lt;&gt; <a href="#">Colophon</a>
<div align="center">Copyright 2000 - 2005 Miro International Pty Ltd.  All rights reserved.</div>
<div align="center"><a href="http://www.mamboserver.com">Mambo</a> is Free Software released under the GNU/GPL License.</div>
</div>


</div>
</body>
</html><!-- 1121870152 -->


Note that I cleaned up the source code and though it was messy, the structure seemed fairly sound, as far as no tables or divs were left unopened.
Notice in the attachments that IE is also stretching the white bit out further than FF - it doens't do this on the home page either.
Also feel free to pick apart any random CSS that I'm doing incorrectly

Thanks! I'm going to keep searching for the answer.

[Meriadoc]

interesting, as it turns out, this is a bug in IE. and it's not something you for just simple hacking around (like !important or something) IE just freaks when there is an odd combo of CSS commands. My problem was (or like) the Peek-a-boo bug talked about at Position is Everything and at this site

anyway, all working now. what a monster, differences are okay, you can get around them with some skill and sauve, but a bug like this is just annoying-as!

heh- so much for that big ol post and attachments

-Meriadoc