Click to See Complete Forum and Search --> : Width difference in IE and Firefox


spufi
09-19-2004, 05:10 AM
It isn't a box model hack because there isn't really any padding, or borders going on. What is happening is that IE is taking the things that are defined as 90% width and making it 90% of the width of what the elements are contained in. Let's say an outer <div> is set at 90% width. The inner element is also set for 90% and thus 80% in IE. Firefox is making it 90% of the user's resolution. I tried the standard box model hack to give IE, Opera, and Firefox different values, but IE 6 seems to be ignoring the hack work around. I looked for IE6 hacks and I still get nothing. I put the hack attempted code in for the "version" <div>. If it worked, it needs to go in for the footer too.

http://mattheandesign.com/md/

Fang
09-19-2004, 08:01 AM
Change these:
body {background:#FFF; color:#000; padding:0;margin:0;}
div#logo { margin:15px 5% 0 5%; display:block; font-size:1em; background:#FFF url(b.gif) no-repeat top right; border-bottom:3px solid #638776; }
div#footer { text-align:center; border-top:3px solid #638776; position:absolute; left:5%;bottom:0; width:90%; }

spufi
09-19-2004, 10:13 PM
Thanks. I was wondering if having the margin in the body was what was creating the problem.

Fang
09-20-2004, 12:56 AM
Not really, it's the absolute positioning.
I find that fewer problems arise if the container of an absolute positioned element is defined as relative.
See what happens when the body is positioned relative in your original css.