Lost footer in FF visoble in IE

[scherpenzeel]

Hi I have been working on a new layout for a website. But run into a strange problem. I have used css and html and tested the layout in both FF and IE.1. When looking in IE I have a nice footer (blue with a line of text in it) but displaying the website in FF i do not get this footer?? I can not find the problem wihich cousses this... So if anyone has an idea to solve thisThe link tot the testpage: My Webpage 2. Also I end up with differences in lining the boxes on the right. The idea was to have them lined out with the (left site) blue part of the heading. With an 15px white space on the right (in the header I also want to have 15px white on the right (beside the blue). 3. What I think should also show nicer is to have the logbox with the logo and text in it always lined out at the very bottum of the box. How can I achieve that?Here are the codes I used:The CSS:

/* -------------------hoofdonderdelen------------------- */* { margin: 0px 0px; padding: 0px 0px; }/* html{         weight: 100%;  margin-bottom: 0px;  text-align: center; } --had dit toegevoegd maar maakt niets uit aplied this but did not work*/body{	font-family:Trebuchet MS;	font-size:12px;	color:#003399;	background-color: #FFFFFF;	margin-left: 0px;	margin-right: 0px;	text-align: left;}table{	font-family:Verdana;	font-size:11px;	color:#666666;	background-color: #FFFFFF;}a{color:#666666;text-decoration:none;}a:hover{	color:#FFFFFF;	background-color: #003399;}#desite{	width:1002px;	background-color: #FFFFFF;}#header{	width:1002px;	background-color: #003399;	background-repeat: no-repeat;	height: 100px;	padding-left: 14px;	background-image: url(/afbeeldingen/bannerhierblauw5.gif);}#menu{	width:1002px;	padding-top:5px;	padding-bottom:2px;	padding-left:15px;	text-align:left;	font-size:90%;	background-color: #FFFFFF;	border-top-color: #003399;	border-bottom-color: #003399;	border-top-style: solid;	border-bottom-style: solid;	border-top-width: 1px;	border-bottom-width: 1px;	color: #003399;}#site{	height:395px;	width:1002px;	text-align:left;	background-color: #FFFFFF;	margin-left: 0px;	margin-right: 0px;	margin-top: 0px;	float: left;	margin-bottom: 0px;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 0px;}#inhoud{	height:395px;	width:72%;	text-align:left;	float:left;	background-color: #FFFFFF;	padding-top: 15px;	padding-left: 15px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	padding-right: 0px;	padding-bottom: 0px;}#rechts{	height:395px;	width:25%;	float:right;	background-color: #FFFFFF;	padding-left: 0px;	padding-bottom: 0px;	font-size: 90%;	padding-top: 15px;}#linkerkant{	float:left;	width:44%;	background-color: #FFFFFF;}#rechterkant{	float:right;	width:49%;	margin: 0;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	padding: 0;	padding-bottom: 0px;	padding-right: 0px;}#info{float:left;width:100%;}.nieuws{width:98%;border:0px solid #000000;border-top:0px;}.info{width:99%;border:0px solid #000000;border-top:0px;}.nieuws a{color:#003399;text-decoration:none;}.nieuws a:hover{color:#003399;text-decoration:underline;}.titel{	text-align:left;	color:#FFCC33;	font-weight:bolder;	padding: 3px;	padding-left:10px;	text-transform: uppercase;	font-size: 110%;}.nieuwsbody{	text-align:justify;	padding:5px;	background-color: #FFFFFF;}.infobody{	text-align:justify;	padding:5px;	background-color: #FFFFFF;}#footer{	width:1002px;	background-color: #003399;	border-top-color: 003399;	height: 15px;	border-top-style: solid;	border-top-width: 1px;	padding: 0;	margin: 0;}.footertekst {	color: #FFFFFF;	padding-left: 15px;}.fotobody {	width:100%;	height: 119px;}.fotosblokje_links {	width: 158px;	height: 119px;	float: left;	background-color: #FFFFFF;}.fotosblokje_rechts {	float: right;	width: 158px;	height: 119px;	background-color: #FFFFFF;	margin: 0;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	padding: 0;}.topboxrechts {	width:100%;	border:1px solid #003399;	background-color: #FFFFFF;	height: 119px;	float: right;	margin: 0;	padding-top: 0px;	padding-bottom: 0px;	padding-left: 5px;	padding-right: 0px;}#current {	color:#003399;	font-weight: bold;}.logobox {	width:100%;	background-color: #FFFFFF;	float: right;	border-color: #003399;	line-height: 0.9;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	color: #003399;	padding-left: 5px;	padding-bottom: 10px;	padding-top: 10px;	margin-top: 170px;	margin-right: 0px;	margin-left: 0px;	margin-bottom: 0px;}.fotobodyonder {	width:100%;	border-top-color: #003399;	border-right-color: #003399;	border-bottom-color: #003399;	border-left-color: #003399;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	margin-top: 15px;}

and the website:

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><link href="/css/style1.css" rel="stylesheet" type="text/css" /></head><body><div align="centre"><div id="desite"><div id="site"><div id="header"></div><div id="menu">  <a href="http://www.websitemaken.be" div id="current">Home</a> | <a href="meedenken.php">Meedenken</a> | <a href="contact.php">Actie </a>| <a href="contact.php">Interim </a>| <a href="contact.php">Missie</a>| <a href="contact.php">Referentie</a> | <a href="contact.php">Contact</a> | Uw <a href="contact.php"> resultaat </a> - - -  Officiële test-site</div><div id="inhoud">  <div id="linkerkant"><div class="nieuws"><div class="titel">Hier een kopje </div><div class="nieuwsbody">  <p align="left"><em>......komen en   gaan. hollen en stilstaan. </em></p>  <b><a href="meedenken.php">Lees meer...</a></b></div></div><br /><div class="nieuws"><div class="titel">Hier een kopje </div><div class="nieuwsbody">  <p> </p>  </div></div><br /></div><div id="rechterkant"><div class="fotobody">  <div class="fotosblokje_links"><img src="/afbeeldingen/knaller.jpg" alt="hierbegint het met een knal.." width="158" height="119" /></div>  <div class="fotosblokje_rechts"><img src="/afbeeldingen/knaller.jpg" alt="Met een knal begint het!" width="158" height="119" /></div></div><br /><div class="fotobodyonder"><img src="/afbeeldingen/part2.jpg" alt="testafbeelding" width="347" height="262" border="0" usemap="#Map" /><map name="Map" id="Map">  <area shape="circle" coords="162,129,128" href="#" alt="een circle" />  </map></div></div></div><div id="rechts"> <!-- kolom rechts --><div class="topboxrechts"></div><br /><div class="logobox">  <p><img src="/afbeeldingen/Hocom_dvies.gif" alt="marketing & communicatie www.hierbeginthet.nl " width="98" height="45" /><br />      <br />            Meer weten over de service van<br />     Hocom @dvies? Bel ons met   uw vragen<br />     op 0343 574 600 of stuur een <a href="mailto:i@.n l" target="_blank">e-mail<br />    </a></p>  </div><p> </p></div></div><div id="footer">  <div class="footertekst">Hocom @dvies - Marketing & Communicatie      © 2006 - Maarsbergen    </div></div></div></div></body></html>

Please advise me how to get this right. Thanks in advance PS I have validated the html and there is only one problem i have not solved has to do with "current". Should that be replaced by "active" ??

Edited March 26, 2006 by Jonas

[raimo]

HTML:<div align="centre">should be as <div align="center"><a href="http://www.websitemaken.be" div id="current">Home</a> | ...div can't be inside of a-element like thatCSS:(from Firefox Console2):Error: Error in parsing value for property 'border-top-color'. Declaration dropped.Source file: http://testsite.covata.nl/css/style1.css Line: 173There is no #-mark in border-top-color#footer{ width:1002px; background-color: #003399; border-top-color: 003399;Fixing those will help You to get it with Firefox too.

[scherpenzeel]

That's what I call good help. Thanks a lot. I will try this and see if it works but i already think it does.How should I than solve the problemwith that div id"current" ? Is it better change the menu into an ul an line in style? Or is there an other way to set the current active url / or page..

[scherpenzeel]

Hi getting a step further all the time. But now I can see the footer in FF and IE but in FF it is not at the bottum...... I tried with clear both but does not work..What might be the solution here?Also I cant get the right boxes the same width as the blue part of the header..Anyone a idea here?Thanks again.

[playmenow]

put this in CSS:#footer{width:1002px;background-color: #003399;border-top-color: 003399;vertical-align: bottom;...}if that's still not working, use this:valign="bottom"

[scherpenzeel]

Thans voor your reply. I have tried option 1. the vertical-align: bottom;but this has no effect.. Your other option I have tried tha as well but was not sure how you meant it: Like this:valign: bottom; ?? That did not work either. So whats next...)

[scherpenzeel]

Thans voor your reply. I have tried option 1. the vertical-align: bottom;but this has no effect.. Your other option I have tried tha as well but was not sure how you meant it:  Like this:valign: bottom; ??  That did not work either. So whats next...)

<{POST_SNAPBACK}>

I have not yet found a solution for my problem with the footer in FF showing up not at the bottom but halve of the page...Anyone a Idear how to solve this..??the site is now available at: My Webpage

[scherpenzeel]

I have not yet found a solution for my problem with the footer in FF showing up not at the bottom but halve of the page...Anyone a Idear how to solve this..??the site is now available at: My Webpage

<{POST_SNAPBACK}>

Anyone out theere canhelp me solve this problem in FF. In IE its looking perfect. But in FF it stil is not good.Looking forward to your adviceThanks.

[DenisK]

I just realised clear both did not worki am trying to work on the website right nowmaybe i can figure it out.

[scherpenzeel]

I just realised clear both did not worki am trying to work on the website right nowmaybe i can figure it out.

<{POST_SNAPBACK}>

Hi I have tried that but no difference. Any other Idea?

[scherpenzeel]

Great Thanks in advance.

[DenisK]

I think i fixed it ..just a minute i will get the code for you....

[DenisK]

replace your #site with this one

#site{	width:999px;	text-align:left;	background-color: #FFFFFF;	margin-right: 0px;	margin-top: 0px;	float: left;	margin-bottom: 0px;	padding: 0px;}

[scherpenzeel]

replace your #site with this one

#site{	width:999px;	text-align:left;	background-color: #FFFFFF;	margin-right: 0px;	margin-top: 0px;	float: left;	margin-bottom: 0px;	padding: 0px;}

<{POST_SNAPBACK}>

I am sorry but still the same problem.

[DenisK]

Thats wierd because it worked on minebut just try putting the footer outside the #site divfrom this<div id="site"><div id="footer"> </div></div>to this<div id="site"></div><div id="footer"> </div>and putt clear:both; to ypur footer.and could i see the link to your website (if its different)

[scherpenzeel]

Thats wierd because it worked on minebut just try putting the footer outside the  #site divfrom this<div id="site"><div id="footer"> </div></div>to this<div id="site"></div><div id="footer"> </div>and putt clear:both; to ypur footer.and could i see the link to your website (if its different)

<{POST_SNAPBACK}>

The link is stil the same as above. I will try your advise.

[DenisK]

When i looked at your new style sheet it was still the sameyou have to get rid of #site {height:400px; <---------- THIS}

[scherpenzeel]

When i looked at your new style sheet it was still the sameyou have to get rid of #site {height:400px;  <---------- THIS}

<{POST_SNAPBACK}>

Hi well... I made the changes and the result is already much better.. However on certain pages where the lefthand boxes having more content and are longer they wil still go under the footer and show the sam effect as before...Maybe I still overlook something ? see here what happensMy Webpage

[DenisK]

try putting your footer out of the site divfrom this<div id="site"> content <div id="footer"></div></div>to this<div id="site"> content</div><div id="footer"></div>and also change your footer to this one

#footer{	background-color: #FFFFFF;	border-top:1px solid #CCCCCC;	height: 17px;	padding-top: 3px;	padding-left: 15px;	padding-bottom: 3px;margin-top: 10px;	border-bottom:1px solid #CCCCCC;	clear: both;}