Personal computing discussed

Moderators: renee, SecretSquirrel, just brew it!

 
Sargent Duck
Grand Gerbil Poohbah
Topic Author
Posts: 3220
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

IE/FF rendering css page widths differently

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
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>
No matter how bad the new homepage sucks or how bungled the new management is...

To all the original writers/contributors and volunteers, please know that I have nothing but the deepest love for you and the work you've done.
 
lethal
Graphmaster Gerbil
Posts: 1385
Joined: Sat Oct 04, 2003 12:22 pm

Re: IE/FF rendering css page widths differently

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 ;)"
 
Sargent Duck
Grand Gerbil Poohbah
Topic Author
Posts: 3220
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

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.
No matter how bad the new homepage sucks or how bungled the new management is...

To all the original writers/contributors and volunteers, please know that I have nothing but the deepest love for you and the work you've done.
 
cubical10
Gerbil First Class
Posts: 184
Joined: Fri Mar 03, 2006 2:52 pm
Location: Montreal

Re: IE/FF rendering css page widths differently

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
 
Sargent Duck
Grand Gerbil Poohbah
Topic Author
Posts: 3220
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

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.
No matter how bad the new homepage sucks or how bungled the new management is...

To all the original writers/contributors and volunteers, please know that I have nothing but the deepest love for you and the work you've done.
 
mortifiedPenguin
Gerbil Elite
Posts: 812
Joined: Mon Oct 08, 2007 7:46 pm

Re: IE/FF rendering css page widths differently

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
 
Sargent Duck
Grand Gerbil Poohbah
Topic Author
Posts: 3220
Joined: Thu Mar 13, 2003 8:05 pm
Location: In my secret cave that has bats

Re: IE/FF rendering css page widths differently

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.
No matter how bad the new homepage sucks or how bungled the new management is...

To all the original writers/contributors and volunteers, please know that I have nothing but the deepest love for you and the work you've done.
 
SuperSpy
Minister of Gerbil Affairs
Posts: 2403
Joined: Thu Sep 12, 2002 9:34 pm
Location: TR Forums

Re: IE/FF rendering css page widths differently

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: i7-4790K @4.8 GHz | 32 GB | EVGA Gefore 1060 | Windows 10 x64
Laptop: MacBook Pro 2017 2.9GHz | 16 GB | Radeon Pro 560
 
steelcity_ballin
Gerbilus Supremus
Posts: 12072
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: IE/FF rendering css page widths differently

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/
 
RickyTick
Gerbil Elite
Posts: 746
Joined: Fri Aug 03, 2007 2:29 pm
Location: South Carolina

Re: IE/FF rendering css page widths differently

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 450D | EVGA SuperNova G3 650W | Asus Z270 Prime-A | Intel i7-7700K | Cryorig H7 | MSI GTX1070 Gaming X 8G | 16gb GSkill TridentZ DDR4 3200 | Crucial MX300 M.2-2280 1TB | Corsair K70 Rapidfire | Logitech G502 | Asus ROG Swift PG279Q

Who is online

Users browsing this forum: No registered users and 1 guest
GZIP: On