IE/FF rendering css page widths differently

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

IE/FF rendering css page widths differently

Postposted on 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
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>
Venii, vidii, vicii
Wii came, Wii saw , Wii conquered
Sargent Duck
Grand Gerbil Poohbah
Silver subscriber
 
 
Posts: 3073
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 22, 2012 3:31 am

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.
The Internet wrote:"[The] 360 starts at the factory, moves to retail shelves, into consumer's homes, back to Microsoft. So THAT'S why Microsoft called it the 360...It all comes full-circle ;)"
lethal
Graphmaster Gerbil
 
Posts: 1385
Joined: Sat Oct 04, 2003 12:22 pm

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 22, 2012 3:06 pm

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.
Venii, vidii, vicii
Wii came, Wii saw , Wii conquered
Sargent Duck
Grand Gerbil Poohbah
Silver subscriber
 
 
Posts: 3073
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 22, 2012 3:30 pm

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...
Cubical 10
I only know enough to be dangerous.

Do ubuntu? pfsense
cubical10
Gerbil First Class
 
Posts: 184
Joined: Fri Mar 03, 2006 2:52 pm
Location: Montreal

Re: IE/FF rendering css page widths differently

Postposted on Fri Nov 23, 2012 11:02 pm

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.
Venii, vidii, vicii
Wii came, Wii saw , Wii conquered
Sargent Duck
Grand Gerbil Poohbah
Silver subscriber
 
 
Posts: 3073
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

Postposted on Sat Nov 24, 2012 3:26 pm

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.
2600K @ 4.8GHz; XSPC Rasa/RX240/RX120 Phobya Xtreme 200; Asus P8Z68-V Pro; 16GB Corsair Vengeance 1333 C9; 2x7970 OC w/ Razor 7970; Force GT 120GB; 3x F3 1TB; Corsair HX750; X-Fi Titanium; Corsair Obsidian 650D; Dell 2408WFP Rev. A01; 2x Dell U2412m
mortifiedPenguin
Gerbil Elite
 
Posts: 812
Joined: Mon Oct 08, 2007 7:46 pm

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 29, 2012 12:42 pm

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.
Venii, vidii, vicii
Wii came, Wii saw , Wii conquered
Sargent Duck
Grand Gerbil Poohbah
Silver subscriber
 
 
Posts: 3073
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 29, 2012 1:04 pm

I think IE tries to pick up on the font scaling options in the windows control panel, which FF ignores.
Desktop: FX-8350 | 32 GB | XFX Radeon 6950 | Windows 7 x64
Laptop: i7 740QM | 12 GB | Mobility Radeon 5850 | Windows 8.1.1.1.1 x64
SuperSpy
Gerbil Jedi
Gold subscriber
 
 
Posts: 1598
Joined: Thu Sep 12, 2002 9:34 pm
Location: TR Forums

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 29, 2012 1:31 pm

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/
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11915
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: IE/FF rendering css page widths differently

Postposted on Thu Nov 29, 2012 1:55 pm

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.
Corsair 650D | Corsair AX750 | MSI XPower Big Bang X58 | Intel i7-950 | Corsair Hydro Series H80i | MSI GTX670 OC PE | 12gb GSkill Ripjaws DDR3 1600 | WD Caviar Black 1TB w/ Win 7 64-bit | MS Reclusa Keyboard | Logitech MX518 | Asus VW246H & VW224U
RickyTick
Gerbil Elite
 
Posts: 581
Joined: Fri Aug 03, 2007 2:29 pm
Location: North Carolina


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 1 guest