Hey Guys and Gals ! It´s been a while since i written anything here, but hopefully you´ll still help me with this one. so i´m making a site for my brother. And now i need a bit help from you. The text is fine with FF but in IE7 and 8 the text is disappering behind the footer. Why´s that? The code should be ok. But here is it. I´d be glad if you´d checked it for me, and maybe spot the problem. Thanks in advance! http://www.hdaddy.net/www_mahalko/ <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Mahalko.fi</title> <link rel="stylesheet" type="text/css" href="mahalko.css"/> <script type="text/javascript" src="jquery-1.2.2.pack.js"></script> <script src="smoothscroll.js" type="text/javascript"></script> <script type="text/javascript" src="ddaccordion.js"> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> </head> <body> <div id="container"/> <div id="header"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Family</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Guestbook</a></li> </ul> </div> <div id="main"> <div id="left"> <div class="box"> <img src="kuvat/kirjekuori.png" alt="kirjekuori"> </div> </div> <div id="right"> <h1>Home</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tempor est, vel sagittis nisi ultricies id. Integer id euismod neque. Ut ultrices, odio at porta condimentum, sem tortor sagittis est, in luctus sem leo bibendum lacus. Suspendisse ultricies tempus congue. Maecenas sollicitudin bibendum dignissim. Integer eu orci nulla. Aenean a tincidunt dui. Integer et neque diam, nec varius magna. Integer orci turpis, sagittis nec euismod non, molestie quis quam. In hac habitasse platea dictumst. Fusce arcu arcu, laoreet in auctor varius, euismod quis enim. Nulla ultricies congue pretium. Vivamus lobortis pellentesque scelerisque. Curabitur congue, justo facilisis elementum gravida, ante elit commodo orci, vitae tempor nisl felis ut dui. Sed at neque ligula, id faucibus libero. Suspendisse nec massa hendrerit nunc adipiscing tincidunt. Phasellus ornare pulvinar pharetra. Pellentesque vel sapien id risus aliquam luctus nec in tellus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tempor est, vel sagittis nisi ultricies id. Integer id euismod neque. Ut ultrices, odio at porta condimentum, sem tortor sagittis est, in luctus sem leo bibendum lacus. Suspendisse ultricies tempus congue. Maecenas sollicitudin bibendum dignissim. Integer eu orci nulla. Aenean a tincidunt dui. Integer et neque diam, nec varius magna. Integer orci turpis, sagittis nec euismod non, molestie quis quam. In hac habitasse platea dictumst. Fusce arcu arcu, laoreet in auctor varius, euismod quis enim. Nulla ultricies congue pretium. Vivamus lobortis pellentesque scelerisque. Curabitur congue, justo facilisis elementum gravida, ante elit commodo orci, vitae tempor nisl felis ut dui. Sed at neque ligula, id faucibus libero. Suspendisse nec massa hendrerit nunc adipiscing tincidunt. Phasellus ornare pulvinar pharetra. Pellentesque vel sapien id risus aliquam luctus nec in tellus. </p> </div> <div class="clear"> </div> </div> <div class="clear"> </div> <div id="footer"> <p class="fleft">© Mahalko.fi 2009</p> <p class="fright">Design:<a href="mailto:henry.kiviaho@gmail.com">HDaddy</a></p> </div> </div> </body> </html> HTML: and the css: body { background: #F792E7 url(kuvat/bodybg.png) top center no-repeat; margin:0; padding:0;} .clear { clear:both; } h1 { font: bold 1em "Trebuchet MS" ; color: #9E3B81; margin:0; padding:5px 0 5px 5px; width:97%; border-top:2px solid #302F2F; border-bottom:2px solid #302F2F; } p { font:normal 1em "Trebuchet MS" ; color:#221711; padding:7px; margin:10px 0 0 0; } #container { background: ; width: 987px; margin: 0 auto; padding:0; } #header { background: url(kuvat/header.png) no-repeat ; width: 987px; margin: 0; padding:0; height: 422px; } #header a, a:hover{ margin: 0; padding:0; } #menu li { position:relative; top: 365px; left: 75px; display: inline; margin: 0; padding: 0; } #menu li a { margin: 0; font: normal 1.2em "Trebuchet MS" ; text-decoration: none; color: #fff; padding: 0 8px 8px 20px; line-height: 44px; } #menu li a:hover { margin: 0; color: #9E3B81; text-decoration: none; padding: 1px 8px 1px 20px; line-height: 44px; } #footer { font: normal 0.9em "Trebuchet MS" ; background: url(kuvat/footer.png) no-repeat ; width: 987px; margin-top: 7px; padding:0; height: 67px; } .fright { color: #fff; float: right; margin-top: 25px; padding-right: 125px; } .fright a{ color: #fff; text-decoration: none; } .fright a:hover { color: #9E3B81; text-decoration: none; } .fleft { margin-top: 25px; padding-left: 25px; color: #fff; float: left; } #main { background: ; width: 987px; height:500px; margin:0 auto; padding: 0; } #right { background: ; width: 650px; margin-right:10px ; padding: 0; float:right; } #left { background: ; width: 300px; margin-left:10px ; padding: 0; float:left; } .box { width: 202px; height:152px; margin: 5px auto; } #oikea { background:transparent; width: 380px; float:right; margin:0; padding:0; } Code (markup):
Change the height of the #main in your css from 500px or whatever it is to something greater... experiment with the height until it all fits.