Forums

Amethystmoon

I've spent all day trying to get the site I'm working on to look okay in Firefox and IE. No matter what I've tried I can't work out how to get the footer to sit in the coloured background in either browser. Here's the site: http://www.peacefulwillow.com/hangout/

I tend to work things out as I go along with css but this has me stumped.

Here's my css:

/* Global Style */

body	{
	margin-top:10px;
	padding:0;
	height:100%;
	font-size:8pt;
	font-family:arial,sans-serif;
	background:#695E49;
	color:#232323;
	}

h1 	{
	color:green;
	font-size:10pt; 
	text-align:left;
	}

h2 	{
	color:#000000;
	font-size:10pt;
	text-align:left;
	}

p 	{
	line-height:1.2em;
	text-align:left;
	}

.center {
	text-align:center;
	}

.justify {
	text-align:justify;
	}

hr	{
	height:1px;
	color:#695E49;
	border-color:#695E49;
	}

li 	{
	margin: 0; 
	padding: 0; 
	}

blockquote {
	margin-left: 40px;
	color:#660066;
	}

a:link 	{
	color:#002B74;
	text-decoration:none;
	}

a:visited {
	color:#002B74;
	text-decoration:none;
	}

a:hover {
	text-decoration:underline;
	}

a:active {
	text-decoration:underline;
	}


/* Structure and minor style */

#wrap	{
	position:relative;
	margin:0 auto;
	padding:0;
	width:759px;
	border:0;
	background:#ffffff;
	}

#container { 
	margin: 0px auto;
	padding:1em;
	min-height:500px;
  	height:auto !important;
  	height:500px;
	}

#topadvert	{
	margin-bottom:10px;
	padding:0;
	width:100%;
	height:80px;	
	}

#top 	{
	margin:0;
	padding:0;
	width:100%;
	height:255px;
	background:url(/hangout/images/hangban1.jpg) no-repeat;
	}

#left 	{
	width:155px;
	padding-right:8px; 
	float:left;
	}

#content {
	margin:0;
	padding:0;
	width:570px;
	float:right;
	}

#indexleft {
	width:155px;
	padding-right:8px; 
	float:left;
	}

#indexright {
	width:235px;
	padding-left:10px; 
	float:right;
	}

#indexcenter {
	margin-left:165px;
	margin-right:245px;
	}

#navcontainer ul  {
	margin: 0;
	padding: 0;
	font-size: 9pt;
	list-style-type: none;
	}

#navcontainer li { margin: 0 0 .3em 0; }

#navcontainer a  {
	display: block;
	color: #FFF;
	background-color: #695E49;
	width: 10em;
	padding: .2em .8em;
	text-decoration: none;
	}

#navcontainer a:hover  {
	background-color: #D4CAB6;
	color: #FFF;
	}

#bluefeature {
	margin:0px;
	padding:4px;
	height:100%;
	background:#E3E3FD;
	}

#pinkfeature {
	margin:0px;
	padding:4px;
	height:100%;
	background:#FFD9EC;
	}

#brownfeature {
	margin:0px;
	padding:4px;
	height:100%;
	background:#CCC1AA;
	}

#bot 	{
	margin:0;
	padding:0;
	height:35px;
	clear:both;
	font-size:90%;
	background:#BAAB8B;
	}

#bot p 	{
	text-align:center;
	color:#fff;
	}

#bot a 	{
	text-align:center;
	color:#fff;
	text-decoration:underline;
	}

#support {
	margin:0;
	padding:0;
	text-align:center;
	background:none;
	}

#google {
	margin-top:0;
	padding:5px;
	text-align:center;
	background:none;
	color:#000
	}

<!--[if IE 6]>
<style type=\"text/css\" media=\"screen\">
@import \"/ie6.css\";
</style>
<![endif]-->

cybershot

well you have a height of 35px on the id="bot" which you have attached to your footer. You also have far more code in the bot div that makes it much larger than 35 pixels. I would try moving the footer div up below the actual footer and move the google div below that. something like this


<!-- FOOTER --> 
<div id=\"bot\"> ï»¿<p>\"The Hangout\" is a Youth Intiative brought to you by <a href=\"/\">Peaceful Willow</a><br> 
Copyright &copy; 2008 Peaceful Willow. All rights reserved | <a href=\"/hangout/terms.html\">Terms of Use</a></p> 

 </div><!--END Footer-->

<div id=\"google\"> 
<script type=\"text/javascript\"><!--
google_ad_client = \"pub-9446952226803110\";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = \"728x90_as\";
google_ad_type = \"text\";
google_ad_channel = \"\";
google_color_border = \"6728B2\";
google_color_bg = \"FFFFFF\";
google_color_link = \"0000FF\";
google_color_text = \"000000\";
google_color_url = \"008000\";
//--></script> 
<script type=\"text/javascript\"
  src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\"> 
</script> 
 
<!-- FIREFOX --> 
<p><font color=\"#ffffff\">This site looks best in...</font> <a href=\"http://www.getfirefox.net\" target=\"_blank\"><img border=\"0\" alt=\"This site looks best in Firefox\" title=\"This site looks best in Firefox\" src=\"http://sfx-images.mozilla.org/affiliates/Buttons/80x15/white_2.gif\"></a></p> 
 
<!-- ADDFREESTATS.COM AUTOCODE V4.0 --> 
<script type=\"text/javascript\"> 
<!--
var AFS_Account=\"00527058\";
var AFS_Tracker=\"auto\";
var AFS_Server=\"www5\";
var AFS_Page=\"DetectName\";
var AFS_Url=\"DetectUrl\";
// --> 
</script> 
<script type=\"text/javascript\" src=\"http://www5.addfreestats.com/cgi-bin/afstrack.cgi?usr=00527058\"> 
</script> 
<noscript> 
<a href=\"http://www.addfreestats.com\" > 
<img src=\"http://www5.addfreestats.com/cgi-bin/connect.cgi?usr=00527058Pauto\" border=0 alt=\"AddFreeStats.com Free Web Stats!\">Web Stats</a> 
</noscript> 
<!-- ENDADDFREESTATS.COM AUTOCODE V4.0  --> 
 
</div><!--END google div -->
 
</div><!-- end Wrap --> 
 
 
</body> 
</html>

Amethystmoon

Thanks for the quick reply. I actually had an idea after I made my post and it worked...you wouldn't believe ti!

I added margin:-9px to the footer's p coding instead of the footer itself...

#bot p {
margin-top:-9px;
padding:3px;
text-align:center;
color:#fff;
}

It sits well now. Do you think I should still change it to the way you mentioned...e.g would that be a better solution overall?

cybershot

if it works that is great, i would still change it to my suggestion due to the simple fact that it makes better code. That way anyone coming along in the future won't have to try and figure out how you got it working.

Amethystmoon

Thanks a lot for that. :D I've changed it because I prefer to have the coding done the right way if I can help it.

treehouse : what would you like to learn today?

Forums

Footer too low