layout issue between IE9 and Comodo Dragon(Chrome Base Browser)

Guber-X · 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;
					}

Guber-X · 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

Sign In

layout issue between IE9 and Comodo Dragon(Chrome Base Browser)

Recommended Posts

Guber-X

Link to comment

Share on other sites

Guber-X

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information