scherpenzeel Posted March 26, 2006 Share Posted March 26, 2006 (edited) 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 Link to comment Share on other sites More sharing options...
raimo Posted March 26, 2006 Share Posted March 26, 2006 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. Link to comment Share on other sites More sharing options...
scherpenzeel Posted March 26, 2006 Author Share Posted March 26, 2006 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.. Link to comment Share on other sites More sharing options...
scherpenzeel Posted March 26, 2006 Author Share Posted March 26, 2006 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. Link to comment Share on other sites More sharing options...
playmenow Posted March 27, 2006 Share Posted March 27, 2006 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" Link to comment Share on other sites More sharing options...
scherpenzeel Posted March 27, 2006 Author Share Posted March 27, 2006 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...) Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 2, 2006 Author Share Posted April 2, 2006 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 Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 25, 2006 Author Share Posted April 25, 2006 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. Link to comment Share on other sites More sharing options...
DenisK Posted April 25, 2006 Share Posted April 25, 2006 I just realised clear both did not worki am trying to work on the website right nowmaybe i can figure it out. Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 25, 2006 Author Share Posted April 25, 2006 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? Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 25, 2006 Author Share Posted April 25, 2006 Great Thanks in advance. Link to comment Share on other sites More sharing options...
DenisK Posted April 25, 2006 Share Posted April 25, 2006 I think i fixed it ..just a minute i will get the code for you.... Link to comment Share on other sites More sharing options...
DenisK Posted April 25, 2006 Share Posted April 25, 2006 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;} Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 25, 2006 Author Share Posted April 25, 2006 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. Link to comment Share on other sites More sharing options...
DenisK Posted April 25, 2006 Share Posted April 25, 2006 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) Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 26, 2006 Author Share Posted April 26, 2006 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. Link to comment Share on other sites More sharing options...
DenisK Posted April 27, 2006 Share Posted April 27, 2006 When i looked at your new style sheet it was still the sameyou have to get rid of #site {height:400px; <---------- THIS} Link to comment Share on other sites More sharing options...
scherpenzeel Posted April 29, 2006 Author Share Posted April 29, 2006 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 Link to comment Share on other sites More sharing options...
DenisK Posted April 30, 2006 Share Posted April 30, 2006 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;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now