Center Column Pushed Down in Firefox

[NosferatusCoffin]

Hello,

I am having some issues with a misbehaving center column in Firefox.

Relevant HTML file:
http://charlemagnewebdesigns.com/cus...work/city.html

Relevant CSS files:
http://charlemagnewebdesigns.com/cus...etwork/nav.css
http://charlemagnewebdesigns.com/cus...twork/city.css
http://charlemagnewebdesigns.com/cus...work/login.css
http://charlemagnewebdesigns.com/cus...k/calendar.css

Everything looks fine in IE and Firefox at 800x600 and in IE at 1024x768. However, in FireFox at 1024x768, #centercolumn keeps getting pushed down a good bit. I have tried everything under the sun to get that center column to go up under FF at that resolution, from adjusting height and width properties to trying many different DOCTYPES, but no dice.

As this is a client project whose deadline had already passed, any help with this would be greatly appreciated.

Thanks!

[marteki]

Hi,

The reason that your center column has such a large top margin is "clear: both". You're using it in city.css on the "calltoaction" and "cityweatherwrapper" DIVs.

/**********************/
/*** Call To Action ***/
/*********************/
#calltoaction {
  position: relative;
  width: auto;
  clear: both;
}

/********************/
/*** City/Weather ***/
/********************/
#cityweatherwrapper {
  width: auto;
  padding-top: 1em;
   clear: both;
  }

Try removing the "clear: both" statements from these DIVs, and adding one to the "wrapper" DIV (which is styled in threecolumns.css).

Hope this helps!

[NosferatusCoffin]

Thanks for the quick reply.

Unfortunately, that had no effect on the center column itself. The clear:both is needed under #cityweatherwrapper to make sure that the city name aligns vertically, so that it lines up properly with the weather forecast with is floated right. Although, taking away that clear does not break the site under IE in anyway. It is more a matter of appearance.

The only other thing I can think is that since the weather forecast is stored in IFRAME if the extra pixels that are usually needed to kill off the scrollbar are messing with FF.

Thanks again!

[marteki]

Thanks for the quick reply.

Unfortunately, that had no effect on the center column itself. The clear:both is needed under #cityweatherwrapper to make sure that the city name aligns vertically, so that it lines up properly with the weather forecast with is floated right. Although, taking away that clear does not break the site under IE in anyway. It is more a matter of appearance.

Hmm. That's odd.

Taking away the "clear:both" fixes it on my machine (Firefox 1.0 on Linux). I see what you mean about the need to align the city name and forecast. But... I'd suggest NOT using "clear: both" to do so.

The purpose of "clear: both" is to move an element down below previously floated elements -- which is exactly what it seems to be doing on both your copy of Firefox and mine. I'm confused as to why taking it away doesn't affect the center column in your version of the browser, though.

I snagged a copy of your site, and made the CSS changes I suggested above. I also added a "padding-top: 1em;" to the #weather style in city.css, to align the city name and forecast.

Here's a screenshot of how the site looks in my browser before CSS changes:

http://www.adinkracommunications.com...eindex-old.png

And after the CSS changes I suggested:

http://www.adinkracommunications.com...eindex-new.png

This is the best thing I can think of. If it still doesn't work, maybe someone else will be able to help you. Good luck!

[NosferatusCoffin]

No dice on that.

Thanks for taking the time to look over it, I appreciate that a lot.

Still seems to be the #centercolumn itself that is causing the problem. I changed DOCTYPES a few times after making the edits you suggested, just in case, but no change.

I also tried a few whitespace commands to see if that might clear it up, but nothing there either.

Thanks for suggestion on the clear:both under #wrapper. That at least saves a little code.

[Paul O'B]

Hi,

The problem is that Firefox 1.0 has taken to clearing all floats above it in the html and not just those in the ssame stacking context. My fix for this is to wrap the content that has the clear statements in a floatwrapper. This confines the clears to inside the float as it can't really clear itself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>PrideLists.com</title>
<style>
body {
 background-color : #FFFFFF;
 font-size: 9pt; 
 font-family: Arial, sans-serif, helvetica;
 color:#000000;
 margin-left : 5%; 
 margin-right : 5%;
 margin-top : 0; 
 }
/************************/
/*** Rail Containers ***/
/***********************/
 #wrapper {
   width: 100%;
 }
 
 #leftcolumn {
   position: relative;
   background: #FFFFFF;
   width: 19%;
   padding-top: .5em;
   float: left;
 }
 
  * html #leftcolumn {height:1%} /* for ie only */
 #rightcolumn {
   position: relative;
   background: #FFFFFF;
   width: 19%;
   padding-top: .5em;
   float: right;
 }
  * html #rightcolumn {height:1%} /* for ie only */
 
 #centercolumn {
   background: #FFFFFF;
   margin-left: 21%;
   margin-right: 21%;
   padding-top: .5em;
   text-align: justify;
 }
  * html #centercolumn {height:1%} /* for ie only */
 #centercolumn p {
   font-size: 9pt; 
   color : black;
   line-height : 125%;
   text-align: justify;
 } 
 #clearfooter {
	position: relative;
	margin: 30px auto;
 }
 #footer {
   width: 100%;
   padding-bottom: 1em;
   clear: both;
 }
 
 #footer p {
   line-height : 100%;
   text-align: center;
   color: #98208C;
 }
.main {
width: 100%;
border: .1px #98208C;
}
.month {
background-color: #98208C;
font: bold 9px verdana;
color: #FFFFFF;
}
.daysofweek {
background-color: #98208C;
font:bold 8px verdana;
color: #FFFFFF;
}
.days {
font-size: 8px;
font-family:verdana;
color:black;
background-color: #F4EEF4;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
/*******************/
/*** Login Form ***/
/******************/
#loginform {
  font-size: 9pt; 
  font-weight: 700;
  font-family: arial;
  color: #98208C;
  text-align: center;
  }
#loginform p {
  line-height: 100%;
  text-align: center;
  font-size: 8pt; 
  font-weight: 700;
  font-family: arial;
  }
  
#searchbutton {
  padding-top: .2em;
  padding-left: 10px;
  padding-right: 10px;
  float: right;
  }
  input.purple {background-color: #610958; font-weight: bold; color: white; margin-bottom: 0px; margin-top: 3px;}
  input.grey {background-color: #E9E9E9; margin-bottom: 0px; margin-top: 3px;}
  input {font-size: 10px;}
/********************/
/*** City/Weather ***/
/********************/
#cityweatherwrapper {
  width: auto;
  padding-top: 1em;
  clear: both;
  }
/*******************/
/*** City Title ***/
/******************/
#citytitle {
  position: relative;
  font-size: 18pt; 
  font-family: arial;
  color: #98208C;
  font-weight: 700;
  height: 80px;
  width: auto;
  float: left;
}

/****************/
/*** Weather ***/
/****************/
#weather {
  position: relative;
  height: 80px;
  width: auto;
  float: right;
}

/**********************/
/*** Call To Action ***/
/*********************/
#calltoaction {
  position: relative;
  width: 100%;
  clear: both;
}
/**********************/
/*** Main Body Text ***/
/*********************/
#mainbodytext {
  position: relative;
  width: 100%;
  clear: both;
}

/*************************************/
/*** Column Navigational Separator ***/
/*************************************/
#navseparator {
  background: #FFFFFF;
  height: 10px;
}

/*************************/
/*** Advertisement Row ***/
/************************/
#adrow {
  width: 100%
  text-align: left;
  font-size: 9pt; 
  font-family: arial;
  color: #98208C;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  padding-top: .5em;
  }

/******************/
/*** Separator ***/
/****************/
#separator {
  height: 2em;
}
/**************************/
/*** Top of Page Banner ***/
/**************************/
#bannertable {
 width : 760px;
 height : 130px;
}
#logo {
 position: relative;
 width : 50%;
 height : 100%;
 float : left;
 background : url(http://charlemagnewebdesigns.com/cus...ork/pllogo.jpg);
}
#adbanner {
 position: relative;
 width : 50%;
 height : 100%;
 float : right;
 background : url(http://charlemagnewebdesigns.com/cus...work/blank.jpg);
}
#header {
 position: relative;
 width: 100%;
 height: auto;
 clear: both;
}
#titlelabels {
 position: relative;
 width: 100%;
 background: url(http://charlemagnewebdesigns.com/cus...te16x16new.gif) repeat;
 clear: both;
 }

/*****************************/
/*** Top Level Navigation ***/
/***************************/
#nav {
   white-space : nowrap;
   background-color : #98208C;
   float : left;
   color : White;
   width : 100%;
   border-style : solid;
   border-color : #98208C;
   border-width : 1px 0 1px 0;
}
#nav ul {
   padding : 0;
   margin : 0;
   float : left;
}
#nav ul li {
   display : inline;
}
#nav ul li a {
   padding-left : 1em;
   padding-right : 1em;
   background-color : #98208C;
   color : White;
   font-weight : 700;
   text-decoration : none;
   float : left;
   border-right-color : #FFFFFF;
   border-right-style : solid;
   border-right-width : 1px;
}
#nav ul li a:hover {
   background-color : #98208C;
   color : #DDBBDD;
} 
/*****************************/
/*** Date/Member Container ***/
/****************************/
#datememberblock {
  position: relative;
  height: 20px;
  background: #F4EEF4;
  font-weight: 700;
  color: #98208C;
  width: 100%;
  padding-top: .2em;
  float: right;  
}
/********************/
/*** Member Block ***/
/********************/
#memberblock {
  position: relative;
  float: left;  
  padding-left: 10px;
}
/*******************/
/*** Date Block ***/
/******************/
#dateblock {
  position: relative;
  float: right;
  padding-right: 10px;
}
/***************************/
/*** Navigational Labels ***/
/**************************/
#navlabelblock {
  position: relative;
  width: 100%;
  font-size: 9pt; 
  font-family: arial;
  color: white;
  font-weight: 700;
  height: 18px;
  text-align: center;
  padding-top: .1em;  
  background: url(http://charlemagnewebdesigns.com/cus...prite20x20.gif) repeat;
  clear: both;
}
/**************************/
/*** Navigational Text ***/
/*************************/
#navlabeltext {
  position: relative;
  background: #FFFFFF;
  width: 100%;
  font-size: 8.5pt; 
  font-family: arial;
  color: #98208C;
  font-weight: 600;
  height: 20px;
  text-align: left;
  padding-left: 15px;  
  padding-top: .2em;
  padding-top: .2em;
}
#navlabeltext a:hover{
   text-decoration: none;
   background-color : #98208C;
   color : #FFFFFF;
} 
/***************************************/
/*** Columned Navigational Separator ***/
/***************************************/
#separator {
  background: #FFFFFF;
  height: 0em;
  clear: both;
}
/**********************************/
/*** Links Appearance Behavior ***/
/*********************************/
a:link {
 color: #98208C;
 text-decoration : none;
}
a:active {
 color: #98208C;
 text-decoration : none;
}
a:visited {
 color: #98208C;
 text-decoration : none;
}
a:hover {
 text-decoration : none;
 color: #98208C;
 font-weight: 700;
}
html>body #innercentre {width:99.9%;float:left;}

</style>
<script type="text/javascript" src="basiccalendar.js">
</script>
</head>
<body>
<!---------------->
<!---Start Logo--->
<!---------------->
<div id="bannertable"> 
  <div id="logo"> </div>
  <div id="adbanner"> </div>
</div>
<!-------------->
<!---End Logo--->
<!-------------->
<!---Start Header--->
<div id="header"> 
  <!------------------------------>
  <!---Start Topside Navigation--->
  <!------------------------------>
  <!--- Insert Navigation Button Labels --->
  <div id="nav"> 
	<ul>
	  <li><a href="javascript:void(0)">Home</a></li>
	  <li><a href="javascript:void(0)">Login</a></li>
	  <li><a href="javascript:void(0)">My Account</a></li>
	  <li><a href="javascript:void(0)">Register</a></li>
	  <li><a href="javascript:void(0)">Contact Us</a></li>
	  <li><a href="javascript:void(0)">Help</a></li>
	</ul>
  </div>
  <!---------------------------->
  <!---End Topside Navigation--->
  <!---------------------------->
</div>
<!---End Header--->
<!--- Start Weclome and Date Text--->
<div id="datememberblock"> 
  <div id="memberblock"> Welcome </div>
  <div id="dateblock"> 
	<SCRIPT LANGUAGE="JavaScript1.2">
  <!-- Begin
  var months=new Array(13);
  months[1]="January";
  months[2]="February";
  months[3]="March";
  months[4]="April";
  months[5]="May";
  months[6]="June";
  months[7]="July";
  months[8]="August";
  months[9]="September";
  months[10]="October";
  months[11]="November";
  months[12]="December";
  var time=new Date();
  var lmonth=months[time.getMonth() + 1];
  var date=time.getDate();
  var year=time.getYear();
   if (year < 2000)	
   year = year + 1900; 
   document.write(lmonth + " ");
   document.write(date + ", " + year);
  // End -->
  </SCRIPT>
  </div>
</div>
<!--- End Weclome and Date Text--->
<!-------------------------->
<!--- Start Main Content --->
<!-------------------------->
<div id="wrapper"> 
  <!--- Start Left Column Content --->
  <div id="leftcolumn"> 
	<!--- Show Calendar --->
	<div id="navlabelblock"> Calendar </div>
	<script type="text/javascript">
	 var todaydate=new Date()
	 var curmonth=todaydate.getMonth()+1   //get current month (1-12)
	 var curyear=todaydate.getFullYear()   //get current year
	 document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
	</script>
	<!--- End Calendar --->
  </div>
  <!--- End Left Column Content --->
  <!--- Start Right Column Content --->
  <div id="rightcolumn"> 
	<div id="navlabelblock"> Login </div>
	<!--- Start Login Form --->
	<div id="loginform"> 
	  <form style="margin-bottom: 0px; margin-top: 3px;">
		Username 
		<input class="grey" type="text" name="username" size="15">
		Password 
		<input class="grey" type="text" name="password" size="15">
		<input class="purple" type="submit" value="Submit" name="B1">
	  </form>
	  <p class="loginform"> <a href="javascript:void(0)">Forget Password?</a> 
	  </p>
	</div>
	<!--- End Login Form --->
	<div id="separator"> </div>
	<!--- Start Google Advertising --->
	<div id="navlabelblock"> Advertising </div>
	<div id="adrow"> Google-type Advertising can go here </div>
	<!--- End Google Advertising --->
  </div>
  <!--- End Right Column Content --->
  <!--- Start Center Column Content --->
  <div id="centercolumn"> 
    <div id="innercentre"> 
	  <!--- Start Call To Action --->
	  <div id="calltoaction"> 
		<div id="navlabelblock"> Call To Action </div>
		<!-------------------------------------->
		<!---Start Call To Action  Navigation--->
		<!-------------------------------------->
		<div id="nav"> 
		  <ul>
			<li><a href="javascript:void(0)">Events</a></li>
			<li><a href="javascript:void(0)">Reviews</a></li>
			<li><a href="javascript:void(0)">Fourms</a></li>
			<li><a href="javascript:void(0)">Marketplace</a></li>
		  </ul>
		</div>
		<!-------------------------------------->
		<!--- End Call To Action  Navigation --->
		<!-------------------------------------->
	  </div>
	  <!--- End Call To Action --->
	  <!--- Start City/Weather Wrapper --->
	  <div id="cityweatherwrapper"> 
		<!--- Show City Name --->
		<div id="citytitle"> Chicago </div>
		<!--- Show Weather --->
		<div id="weather"> <nolayer> 
		  <IFRAME SRC="http://www.superpages.com/cities/con...LZ014&W=220x70" MARGINWIDTH="0" MARGINHEIGHT="0" WIDTH="220" HEIGHT="70" HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no"> 
		  <a href="http://www.superpages.com/cities/weatherforecasts.html"> <img src="http://img.superpages.com/cities/wea...ns/console.gif" border=0 alt="SuperPages.com Weather for Chicago IL"> 
		  <br>
		  Weather Forecasts </a> </IFRAME>
		  </nolayer> <br>
		  <ilayer id="con" visibility="hide" width="220" height="70"> </ilayer>
		  <br>
		  <layer onload="moveToAbsolute(con.pageX, con.pageY); visibility='show';" visibility="hide" width="220" height="70" clip="220,70" src="<A href="http://www.superpages.com/cities/console.pl?T=Chicago&S=IL&filename=Chicago-weather-IL.html&Z=ILZ014&W=220x70"></layer">http://www.superpages.com/cities/console.pl?T=Chicago&S=IL&filename=Chicago-weather-IL.html&Z=ILZ014&W=220x70"></layer>
		</div>
		<!--- End Weather --->
	  </div>
	  <!--- End City/Weather Wrapper --->
	  <div id="mainbodytext"> Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 
		Filler Text Filler Text Filler Text Filler Text </div>
	</div>
	<!--- End Center Column Content --->
  </div>
</div>
<!----------------------->
<!--- End Main Content--->
<!----------------------->
<!-------------->
<!--- Footer --->
<!-------------->
<br style="clear:both" />
<div id="footer"> 
  <p class="footer"> Copyright 2004 - PrideLists.com - All Rights Reserved </p>
</div>
</body>
</html>

I have used this technique many times and it seems to work without hitch. Just be aware that the centre column is now a float and of course may need to be cleared at the very end etc.

Paul

[NosferatusCoffin]

Paul, you are a lifesaver! Thanks a ton! This one very annoying problem has been bugging me for days!

Thanks again!