scherpenzeel Posted May 26, 2006 Share Posted May 26, 2006 (edited) Hi I have a small problem in my css layout. I cant get the bakground right in FF for the site I am making. It looks like there is a box at the background which has not the proper hight? So now I have the backgrond color shining through.How to solve this:my site code here: <!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/screen.css" rel="stylesheet" type="text/css" /><link href="css/carex_style1.css" rel="stylesheet" type="text/css" /></head><body><div id="desite"><div id="site"><div id="header"></div><div id="menu"> <ul> <li><a href="/home.html">Home</a></li> <li><a href="hierbeginthet.htm">Aanleg</a></li> <li><a href="hierdetails.htm">Onderhoud</a></li> <li><a href="evenwegkwijt.htm">Vijvers</a></li> <li><a href="/missie.html">Bestrating</a></li> <li><a href="linknaarklanten.htm">Bedrijven</a></li> <li><a href="routebeschrijving.htm">Contact</a></li> <li><a href="showcase.htm">Resultaat</a></li> <li><a href="http://www.gardentalk.nl" target="_blank">Tuin van de maand!</a></li> </ul></div><div id="inhoud"> <div id="linkerkant"><div class="nieuws"><div class="titel"> Mei-maand Actie!! </div><div class="nieuwsbodykleur2"> <p>Vraag nu een offerte aan. De eerste tien offertes die wij daadwerkelijk uitvoeren ontvangen een leuk voorjaarspakket. Bestaande uit een barbecue met ...</p> </div></div><br /><div class="nieuws"><div class="titel">Tuin tip: </div><div class="nieuwsbody"> <p>Alles is nu weer volop in bloei. </p> <p>Tijd om te genieten dus. Maar wel belangrijk haal nu regelmatig het eerste onkruid weg. Dan heeft het later weinig kans om verder te groeien..<br /> </p> <p><a href="meedenken.html">Meer tips....</a></p> </div></div><br /></div><div id="rechterkant"> <div class="middentekst"><div class="titelhoofd">welkom bij Carex groenprojecten </div><div class="infobody"> <p> Hier een tekst over Carex Groenprojecten Hier een tekst over Carex Groenprojecten Hier een tekst over Carex Groenprojectenv Hier een tekst over Carex Groenprojecten</p> <p> </p> <p>Hier een tekst over Carex Groenprojecten Hier een tekst over Carex Groenprojecten</p> <p>Hier een tekst over Carex Groenprojecten</p> <p> </p> <p>Hier een tekst over Carex Groenprojecten Hier een tekst over Carex Groenprojecten Hier een tekst over Carex Groenprojecten.</p></div></div></div> </div><div id="rechts"> <!-- kolom rechts --><div class="topboxrechts"><img src="afbeeldingen/carex_erv.jpg" alt="18 jaar ervaring" width="246" height="117" /></div><div class="topboxrechts"> <p>Aanbieding:</p> <p> </p> <p> </p> <p>3 Klanten voor de prijs van 2 </p></div><div class="topboxrechts"> <p>Aanbieding:</p> <p> </p> <p> </p> <p>3 Klanten voor de prijs van 2 </p></div></div><div id="footer"> <div class="footertekst">Hocom @dvies © 2006 - Maarsbergen </div></div></div></div></body></html> and the css: /* -------------------hoofdonderdelen------------------- *//* ------------------- Copyright Hocom @dvies 2006 ----- */* { margin: 0px 0px; padding: 0px 0px; text-align: left;}html{ weight: 100%; text-align: center; background-color: #569313; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 1em; color: #666600; height: 100%;} body{ font-family:Geneva, Arial, Helvetica, sans-serif; color:#666600; background-color: #569313; margin-left: 0px; margin-right: 0px; text-align: left; font-size: 1em;}/* ------------------- standard links ------------------- */a{color:#003399;text-decoration:none;}a:hover{ color: #666600; background-color: none; text-decoration: underline;}/* ------------------- menu box boven ------------------- */#menu{ width:900px; padding-top:0px; padding-bottom:0px; padding-left:0px; background-color: #FFFFFF; border-top-color: #ddd; border-bottom-color: #ddd; border-top-style: solid; border-bottom-style: solid; border-top-width: 0px; border-bottom-width: 0px; height: 30px; padding: 0px; padding-right: 0px; margin: 0px; margin-top: 0.6em; margin-right:; margin-bottom: 0px; margin-left:; }/* ------------------- menu boven lijst opmaak ------------------- #menu li a{ color: #666600; text-decoration: none; font-size: 90%; padding: .2em .5em; background-color: #E9FFD2; text-transform: none;}#menu li a:hover{ color: #FFFFFF; background-color: #666600; text-decoration: none;} #menu li a:active{color: #666600; font-weight: bolder;}#menu ul{ width:900px; padding:0; margin:0; list-style-type:none; color: #003399;}#menu li{ display:inline; color: #003399;} *//* ------------------- opmaak met tabbladen ------------------- *//* code voor de lijst*/#menu ul{ margin: 0; padding: 5px 0; /* waarde die in IE nodig is */ border-bottom: 1px solid #ddd; font-size: 90% }/* hack om IE-tekortkoming te omzeilen */html>body #menu ul{ padding: 4px 0; /* eigenlijk gewenste waarde */}#menu ul li{ display: inline;}/* Het tabblad-achtige uiterlijk instellen */#menu li a{ padding: 0.2em 0.8em; 0.0em; border: 1px solid #ddd; list-style: none; display: inline; background-color: #ace5cd; text-decoration: none; }/* de geselecteerde tab een afwijkend uiterlijk geven */#menu li a.selected{ border-bottom: 1px solid #fff; background-color: #fff;}/* ------------------- de boxes ------------------- */#desite{ width:900px; background-color: #FFFFFF; margin: auto; padding: auto; height: 400px;}#header{ width:900px; background-repeat: no-repeat; height: 150px; background-image: url(/afbeeldingen/carexlogo2.jpg); background-position: center; border-bottom-color: #ddd; border-top-color: #3C9924; border-top-style: solid; border-bottom-style: solid; border-top-width: thin; border-bottom-width: thin; background-color: #E9FFD2;}.navigatie{ text-align:left; background-color: #FFFFFF; }#site{ height:400px; width:900px; text-align:left; background-color: #FFFFFF; margin-right: 0px; margin-top: 0px; float: left; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0; padding: 0;}#inhoud{ height:100%; width:70%; text-align:left; float:left; background-color: #FFFFFF; padding-top: 15px; padding-left: 5px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-right: 0px; padding-bottom: 0px;}#rechts{ height:100%; width:28%; float:right; background-color: #FFFFFF; padding-left: 0px; padding-bottom: 0px; padding-top: 15px; margin-bottom: 0px; margin-left: 0px; padding-right: 0px; margin-right: 0px; margin-top: 10px;}#linkerkant{ float:left; width:30%; background-color: #FFFFFF; height: 100%;}#rechterkant{ float:right; width:60%; margin: 0; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; padding: 0; padding-bottom: 0px; padding-right: 0px; height: 100%; background-color: #FFFFFF;}#info{ float:left; width:100%; background-color: #FFFFFF;}.nieuws{ width:100%; border-top:0px; background-color: #FFFFFF; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;}.middentekst{ width:100%; border:0px; background-color: #FFFFFF; float: right; margin-top: 15px; }.info{width:99%;border:0px solid #000000;border-top:0px;}.nieuws a{color:#003399;text-decoration:none;}.nieuws a:hover{ color:#FFFFFF; text-decoration:none; background-color: #FFCC33;}.titelhoofd{ text-align:left; color:#7E8A58; font-weight:bolder; padding: 3px; padding-left:10px; text-transform: uppercase; font-size: 80%; font-family: Arial, Helvetica, sans-serif;}.nieuwsbody{ text-align:left; padding:5px; font-size: 70%; background-color: #FFFFFF;}.nieuwsbodykleur1{ text-align:left; padding:5px; font-size: 70%; background-color: #FDEFB9;}.nieuwsbodykleur2 { text-align:left; padding:5px; font-size: 70%; background-color: #E2DBA9;}.infobody{ text-align:left; background-color: #FFFFFF; font-size: 70%; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 100%;}#footer{ width:900px; background-color: #DEDFD7; border-top-color: #CCCCCC; height: 17px; border-top-style: solid; border-top-width: 1px; valign: bottom; padding-top: 3px; margin-top: 10px; padding-bottom: 3px; float: left; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #CCCCCC; background-image: url(../afbeeldingen/carex_www.jpg); background-repeat: no-repeat; background-position: center; clear: both; color: #FFFFFF;}.footertekst { color: #FFFFFF; padding-left: 15px; font-size: 70%; float: left;}.footertekst_rechts { color: #003399; padding-right: 15px; font-size: 70%; float: right; margin-right: 90px; word-spacing: 2em;}.fotobody { width:100%; height: 119px; float: right;}.fotosblokje_links { width: 158px; height: 119px; float: left; background-color: #FFFFFF;}.fotosblokje_rechts { float: left; width: 158px; height: 119px; background-color: #FFFFFF; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;}.topboxrechts { width:99%; background-color: #FFFFFF; height: 119px; float: left; margin: 0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}.logobox { width:158px; background-color: #FFFFFF; float: left; border-color: #CCCCCC; 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; margin-top: 10px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; font-size: 70%; font-weight: bold; height: 119px; padding-right: 5px; background-repeat: no-repeat;}.fotobodyonder { width:100%; margin-bottom: 0px; margin-left: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; height: 272px; visibility: hidden; z-index: auto;}/* ------------------- opmaakelementen ------------------- */.fotorechts { padding: 5px; float: right}.fotolinks { padding: 5px; float: left}.titel { text-align:left; color:#7F795F; font-weight:bolder; padding: 3px; padding-left:10px; text-transform: uppercase; font-size: 80%; font-family: "Courier New", Courier, mono;} Thanks in advance for your help.. Edited May 26, 2006 by aspnetguy Link to comment Share on other sites More sharing options...
scherpenzeel Posted May 26, 2006 Author Share Posted May 26, 2006 When I change in the css @ #desite the hight in 100% than it looks fine in FF but again not in IE ...grrrrrr :)So what to do here? Link to comment Share on other sites More sharing options...
scherpenzeel Posted May 26, 2006 Author Share Posted May 26, 2006 Problem solved. Have now in #desite height: auto and in #site I have the height: 100%. Now it looks both fine in FF and IE. Thanks for your help.. 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