Guber-X Posted March 14, 2012 Share Posted March 14, 2012 I am trying my best to make my website compatible with all browsers. everything was going good until I had a page with long content and page needed to scroll. In IE9, everything is fine. but I hate IE overall... I like using Comodo Dragon which is a open source Chrome base browser. when view my page in Comodo... my header and footer go out by 1px when content is longer than the page. When content is short everything is fine. just when I have long content. I have a few pics of what is going on and I will provide my code as well. If anyone has any idea's on how this can be fixed, please let me know HTML Code: <!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=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script.js"></script> <title>GuberX Web Development</title> </head> <body> <div id="page"> <div id="header"><img src="images/main/title.png" style="float:left;" /> <div id="menu"> <a href="index.php" onmouseover="document.home.src=home2.src" onmouseout="document.home.src=home1.src"><img src="images/main/menu/Home-1.png" name="home" border="0" /></a><sup> ¦ </sup> <a href="services.php" onmouseover="document.services.src=serv2.src" onmouseout="document.services.src=serv1.src"><img src="images/main/menu/Services-1.png" name="services" border="0" /></a><sup> ¦ </sup> <a href="portfolio.php" onmouseover="document.portfolio.src=port2.src" onmouseout="document.portfolio.src=port1.src"><img src="images/main/menu/Portfolio-1.png" name="portfolio" border="0" /></a><br /> <a href="contact.php" onmouseover="document.contact.src=contact2.src" onmouseout="document.contact.src=contact1.src"><img src="images/main/menu/Contact-1.png" name="contact" border="0" /></a><sup> ¦ </sup> <a href="about.php" onmouseover="document.about.src=about2.src" onmouseout="document.about.src=about1.src"><img src="images/main/menu/About-1.png" name="about" border="0" /></a> </div> </div> <div id="main"> Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br /> Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br /> Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br /> Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br /> Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br />Test <br /> </div> <div id="footer"> <table cellpadding="0" cellspacing="0" border="0" height="59" width="800"> <tr> <td valign="middle" align="center">Copyright 2012 by GuberX. All Rights Reserved</td> </tr> </table> </div> </div> </body> </html> CSS code: * { margin:0; padding:0; } HTML, body { background:url(images/main/main-bg.png) top center repeat-y; background-color:#C0C0C0; height:100%; margin:0; padding:0; min-height:100%; font-family:Verdana, Geneva, sans-serif; text-align:center; } #header { background:url(images/main/header-bg.png) no-repeat; height:148px; width:800px; padding-left:5px; text-align:left } #menu { padding-left:286px; text-align:center; vertical-align:top; color:#FFFFFF; font-size:40px; } #page { width:800px; position:relative; margin:0px auto; min-height: 100%; height:100%; text-align:left; } #main { font-size:14px; text-align:left; width:800px; padding-left:10px; padding-top:10px; } #footer { background:url(images/main/footer-bg.png) no-repeat; height:59px; width:800px; position:relative; bottom:0; text-align: center; font-size:10px; } Quote Link to comment https://forums.phpfreaks.com/topic/258949-layout-issue-between-ie9-and-comodo-dragonchrome-base-browser/ Share on other sites More sharing options...
Guber-X Posted March 15, 2012 Author Share Posted March 15, 2012 okay, so i fixed it myself lol... all i did was make my main background wider... like i made it to 2000px wide, most monitor displays dont go over 1920 in this day in age... lol now everything seems to work great Quote Link to comment https://forums.phpfreaks.com/topic/258949-layout-issue-between-ie9-and-comodo-dragonchrome-base-browser/#findComment-1327507 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.