Page 1 of 1

IE/FF rendering css page widths differently

Posted: Thu Nov 22, 2012 3:01 am
by Sargent Duck
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
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
<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>

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 22, 2012 3:31 am
by lethal
try first using a doctype declaration on the html page (i.e. put <!DOCTYPE html> as the first line, before <html>), as IE may try to render in some weird compatibility mode if it isn't sure of what kind of document it is rendering.

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 22, 2012 3:06 pm
by Sargent Duck
Thanks Lethal.

I'm teaching myself css as I go along so forgetting !DOCTYPE I'll chalk up to a newbie mistake. Once I added that it did change the layout of the page, but I was able to fix that once I realized some of my code wasn't up to spec.

However the width issue still persists. !DOCTYPE didn't fix it.

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 22, 2012 3:30 pm
by cubical10
While not directly on topic, I strongly suggest that you look into using a responsive web design framework (RWD), such as Bootstrap.
These frameworks take most of the hard work to make your layouts render nearly identical across browsers.
An if that is not reason enough, Bootstrap is based on a grid system, so that your page automatically re-sizes and re-stacks to accommodate a variety of screen dimensions.
Therefore, you get a mobile version of your website with very little extra effort. And really, mobile/tablets are what you should be targeting if you are starting a new site design.

More on topic, W3C Markup Validator and W3C CSS Validator Service are handy tools.

My 2 cents...

Re: IE/FF rendering css page widths differently

Posted: Fri Nov 23, 2012 11:02 pm
by Sargent Duck
Thanks cubical10.

I ran it through those validators and it did find a few things (the html validator hated my <-------seperator------->) as well as a few code optimizations, it didn't find anything relating to the width issues I'm seeing.

The responsive web design is very interesting. Something I'll look more closly at in the future. I don't know any java and I'm the kinda person that wants to know what's going on...or at least pretend I know what's going on. I do like the concept however of just modifying a basic template.

Re: IE/FF rendering css page widths differently

Posted: Sat Nov 24, 2012 3:26 pm
by mortifiedPenguin
Sargent Duck wrote:
java

To clarify, that should be "JavaScript". Despite the naming, Java has little to do with JavaScript. In any case, it's not too difficult to learn and can do more than a few things that static HTML+CSS can't. I've found that W3Schools is a decent beginner's resource for all sorts of basic web development, so you can try taking a look there. I'm sure the "real" web developers have better resources they can link to.

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 29, 2012 12:42 pm
by Sargent Duck
Thanks for the clarification mortifiedPenguin. Shows you how much I know about language.

I did manage to find out what the problem was. Turns out that by default, Firefox displays at 100% but IE actually had some zoomage applied by default (125% on a friends computer, 110% on mine). Once we set IE to 100%, everything lined up correctly.

Weird, but glad I got that resolved.

Thanks for all your help guys.

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 29, 2012 1:04 pm
by SuperSpy
I think IE tries to pick up on the font scaling options in the windows control panel, which FF ignores.

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 29, 2012 1:31 pm
by steelcity_ballin
Padding and borders handled differently in IE from every other browser. I hate IE, it is a terrible browser (or was) and I'll never recommend anyone use it, ever. I don't care what they have done to it in XYZ version, it's been a giant piece of crap require frustrating work arounds for as long as I can recall. Long live the * hacks.

http://www.456bereastreet.com/archive/2 ... box_model/

Re: IE/FF rendering css page widths differently

Posted: Thu Nov 29, 2012 1:55 pm
by RickyTick
Sargent Duck wrote:
Thanks for the clarification mortifiedPenguin. Shows you how much I know about language.

I did manage to find out what the problem was. Turns out that by default, Firefox displays at 100% but IE actually had some zoomage applied by default (125% on a friends computer, 110% on mine). Once we set IE to 100%, everything lined up correctly.

Weird, but glad I got that resolved.

Thanks for all your help guys.


A CSS reset at the beginning of your stylesheet might fix it.
Maybe something like this. http://meyerweb.com/eric/tools/css/reset/
Hope that helps.