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.
<!-- m --><a class="postlink" href="http://mattheandesign.com/md/Change">http://mattheandesign.com/md/Change</a><!-- m --> 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%; }Thanks. I was wondering if having the margin in the body was what was creating the problem.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.
<!-- m --><a class="postlink" href="http://mattheandesign.com/md/Change">http://mattheandesign.com/md/Change</a><!-- m --> 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%; }Thanks. I was wondering if having the margin in the body was what was creating the problem.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.