Log in

View Full Version : Resolved Page width correct in Firefox but not IE... stumped


rsollman
07-01-2010, 04:27 PM
Hello all,

Usually CSS is pretty easy for me, but I just jumped into a project and have no idea what the first group did. Right now the page appears correctly in Firefox (3.6.4) but when I test it in IE6 it doesn't show the main content width correctly. We don't have any higher IE than 6 so I haven't check it on those browsers. I've finally admitted defeat and maybe someone can worm through their CSS and catch something I missed.

The page is: http://www.deaconess.com/defaultNEW5.cfm.
CSS file: http://www.deaconess.com/css/default1.css

If anyone could shed some light on this I would really appreciate it. I believe it has something to do with the margins or padding because the difference is roughly 30px between the two browsers.

thanks for taking a look!
rsollman
azoomer
07-01-2010, 05:35 PM
This is a known bug in IE 6 and it may also be present in IE 7. You can google the: IE 6 box model. It is not easy to fix within the regular css so often the solution will be to make separate stylesheets for those browsers. Something like this can be used

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
it is placed beneath the link to the regular css and you then make a new stylesheet called " ie7-and-down.css" ( in this example), and here you can target and override the specific problems, usually width. The conditional stylesheet in this example will be read by all IE browsers of a version lesser than IE8. Here is a link explaining (http://css-tricks.com/how-to-create-an-ie-only-stylesheet/) how to target different IE versions. Of course there are others ways it can be done but this might be the easiest in your case. To see the page in other browser versions you can use browsershots.org, allthough its a bit slow. Another posibillity is adobe browserlab
zip222
07-01-2010, 07:28 PM
You should really try to use a simpler, non-table based method for centering the layout. This will make things work a lot more consistently across the various browsers. here is basic framework of the method I use:



body {
text-align: center;
}

.pagewrap {
text-align: left;
width: 960px;
margin: 0 auto;
}

<body>
<div class="pagewrap">
Everything goes in here
</div><!-- /pagewrap -->
</body>
azoomer
07-01-2010, 07:49 PM
I agree, and using a Meyer css reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) is also very helpful. But the IE bugs are stubborn so you might end up having to use the conditional stylesheets nevertheless.
rsollman
07-06-2010, 02:11 PM
You should really try to use a simpler, non-table based method for centering the layout. This will make things work a lot more consistently across the various browsers. here is basic framework of the method I use:


I agree completely and non-table layouts is how I was taught, but the main project manager overseeing the redesign wants tables. Stuck in the old system and it's been extremely difficult to be allowed even styling divs and classes.

I've found the bug and it involved a change with width and margins/padding. Don't know exactly what fixed it because there were 3 people editing all at the same time.

Thanks for all of your help.