Container size difference in Explorer vs. Firefox.

Chris Passeno · #1 Dec 21st, 2005, 03:18

I have set up a site at http://www.chrispasseno.com/web-content/
and am having a problem getting it to look the same in Internet Explorer vs. Firefox.

Specifically, I am concerned with the container, which renders larger in Explorer. I remember something about a the way Explorer counts padding and such.

Is there a fix to satisfy both Explorer and Firefox?

My css is here: http://www.chrispasseno.com/web-content/style.css

and my html is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html><head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Collegiate Sunglasses</title>
</head>
<body>

<div id="header">
</div>

<div id="container">
<del class="container">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="sunglasses.html">Sunglasses</a></li>
<li><a href="distributors.html">Distributors</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</del>

<p>Collegiate Sunglasses was formed in June 2004 with the goal of bringing two things together that so many of us enjoy, sunglasses and college sports!</p>
<p>The line has been expanded to include The Ohio State University Buckeyes, The University of Michigan Wolverines and The University of Notre Dame Fighting Irish.</p>
<p>Our sunglasses, both frame and lens are polycarbonate (which means they're shatterproof) and they offer the maximum UV protection. In addition, our product exceeds FDA and ANSI standards. </p>
<p>We have plans for 2006 to expand the product line by up to 12 additional schools and possibly offer a premium lens, either polarized or melanin.</p>
<p>Please view our product on the following pages and let us know what you think. We'd like to know what other schools we should add to our line. In addition, if you need to locate a supplier for our product, e-mail us your location and we will provide you with either an Authorized Distributor or an Eye Care Professional that handles Collegiate Sunglasses.</p>
</div>

<div id="foot">
| <a href="index.html">Home</a> | <a href="sunglasses.html">Sunglasses</a> |
<a href="distributors.html">Distributors</a> | <a href="contactus.html">Contact Us</a> |<br/>
© 2005. Collegiate Sunglasses, LLC®. All Rights Reserved.

</div>
</body>

</html>

herkalees · #2 Dec 21st, 2005, 03:38

This article sums it up nicely: http://www.communitymx.com/content/a...989953B6F20B41

Pheonix · #3 Dec 21st, 2005, 03:41

use:
* { margin: 0px; padding: 0px; }
at the very top of your css file, then use only padding or margin to adjust your elements, not both, this should help. I personally never have an issue with the box model issue, but I guess that's just the way I code.

Chris Passeno · #4 Dec 21st, 2005, 12:45

herkalees- Thanks for the link, that article is golden.

pheonix- thanks for your input.

jpmitchell · #5 Dec 21st, 2005, 14:10

Great article Herkalees.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[Solved] firefox and IE difference	Phixon	Web Page Design	2	Apr 18th, 2008 10:06
Is it possible to better control changes by Internet Explorer->View->Text Size	Phil	Web Page Design	4	Jan 14th, 2008 11:11
DIV's overspilling container DIV in Firefox	Craigj1303	Web Page Design	4	May 16th, 2007 23:46
Container Problem in FireFox	asengh	Web Page Design	8	Dec 12th, 2006 16:23
container overlaps upon text resize in Firefox	eksquall	Web Page Design	4	Aug 1st, 2006 16:26

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Container size difference in Explorer vs. Firefox.