IE/FF rendering css page widths differently
Posted: Thu Nov 22, 2012 3:01 am
While creating a webpage, I've run into a little problem with IE (IE9) and Firefox (FF16) with width. I've linked to two screenshots which show the problem in detail. (IE is on top, FF is on bottom).
My page is a fixed width of 960px and I've set the margin on either side to auto so that the page is centered.
As you can see in Screenshot 1 (default) IE renders the page much wider than FF as shown by the red squares I've added. I originally thought this was a FF problem, but after many hours searching, it would seem that FF is the correct one (FF renders exactly whereas IE renders as it thinks you want it). In an attempt to get the two browsers to show the same width, I found a "hack" for FF that IE ignored, which you can see in
Screenshot 2. (The red box around the code) The banner is exactly 960px, so you can see in screenshot 2 that FF is rendering correctly, it's IE that is making the page wider.
So...I'm kinda stumped on what my next step would be. How would you guys tackle this? If the banner is 960px wide exactly and IE is scaling this up, any "hacks" I try to do with FF could drastically change the parameters of the picture.
I've posted my code below:
CSS
HTML
My page is a fixed width of 960px and I've set the margin on either side to auto so that the page is centered.
As you can see in Screenshot 1 (default) IE renders the page much wider than FF as shown by the red squares I've added. I originally thought this was a FF problem, but after many hours searching, it would seem that FF is the correct one (FF renders exactly whereas IE renders as it thinks you want it). In an attempt to get the two browsers to show the same width, I found a "hack" for FF that IE ignored, which you can see in
Screenshot 2. (The red box around the code) The banner is exactly 960px, so you can see in screenshot 2 that FF is rendering correctly, it's IE that is making the page wider.
So...I'm kinda stumped on what my next step would be. How would you guys tackle this? If the banner is 960px wide exactly and IE is scaling this up, any "hacks" I try to do with FF could drastically change the parameters of the picture.
I've posted my code below:
CSS
Code: Select all
body {
font-size: 16px;
line-height: 20px;
text-align: center;
background-color:#d4eef7;
}
html, body {
margin: 0;
padding: 0;
}
#page-container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: white;
}
<! ---------- FF "hack" ---------- >
html>body #page-container {
width: 1050px;
margin-left: auto;
margin-right: auto;
}
#header {
margin-top: 10;
margin-bottom: 10;
padding-top: 10;
padding-bottom: 10;
margin-left: 10;
margin-right: 10;
padding-left: 10;
padding-right: 10;
height: 100px;
}
#main {
margin-left: 10;
margin-right: 10;
padding-left: 10;
padding-right: 10;
}
HTML
Code: Select all
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Smarket - Home</title>
<meta name="Smarket" content="Smarket" />
<style type="text/css" media="all">@import "main.css";>
</style>
</head>
<body>
<div id="page-container">
<! ---------- Navigation ---------- >
<div id="navigation">
<div style="position:relative; height:250px;
background-color:#d4eef7;">
<div style="position:absolute; z-index:1">
<img src="images/test.jpg" alt="Smarket
banner"/>
</div>
<div style="position:absolute; top: 20px; left:
10px; z-index:2">
<a href="../index.html"><img
src="images/Smarket_Logo_web.png" alt="SMARKET" width="150px" height="78px"
border="0" /></a>
</div>
<div style="position:absolute; top: 45px; left:
160px; z-index:2">
<p class ="nav_text">|
<a href="../About.html"
class="nav">ABOUT</a>|
<a href="../Dragons_Den.html"
class="nav">DRAGONS' DEN</a>|
<a href="../contact.html"
class="nav">CONTACT</a>
</div>
</div>
<! ---------- Header ---------- >
<div id="header">
<p class="large center">Own the Stock Market</p><br>
<p class="large center">Rule the Business World</span></p><br>
<p class="small center">...or fail and end up bankrupt!</p>
</div>