Forum Moderators: not2easy
I'm currently working on a site for a client, and I'm having problems with how the content of the site centers in IE (the same problem shows up in IE6, IE5.01, and IE5.5). I'm fairly new to CSS positioning, but I'm guessing that the problem has something to do with the box model.
The div (the "main div") which holds all of the content is 760px wide. I've confirmed with a screen ruler that this is, in fact the case (at least as far as the apparent width of the div, if that makes sense - not counting any padding, borders, or margins).
The problem is that in an 800 x 600 resolution, that div is pushed over to the right slightly so that the site does not appear centered. And in fact, the problem creates a horizontal scroll bar.
I'm guessing that somehow the problem can be traced back to some padding setting (so that the actual width if 760px plus the amount of that padding setting - again, I hope that makes sense - my recollection is that we're not allowed to post links to actual pages on webmasterworld, so I'm trying to describe the problem as best I can).
In the selector I'm using for the main div, I have width set to 760px, padding set to 0px, and margin set to auto. In the body selector, I have text-align set to center. Some of the other divs (hierarchically within the main div) have padding and margin settings greater than zero, but since the apparent width of the main div is 760px, I'm thinking that's not the problem.
Does any of this ring a bell for anyone?
I should also add that when I first started building the style sheet, I was using the simplified box model hack that is a part of the layoutamatic generator at inknoise so that the container selector included this code:
width: 760px;
\width: 780px;
w\idth: 760px;
But that actually seemed to cause a problem in IE5.01 and IE5.5 (I thought it was supposed to solve problems in those browsers!). It put 10px of extra space on either side of various elements on the page - when I removed the two lines with the escape character, those problems went away.
So I'm at a loss right now. Any help anyone could give me would be greatly appreciated. Also, feel free to let me know if I can post more information (in terms of urls that would show the problem, files, etc.).
Thanks!
Frank Johnson
have you cleared the default padding/margins off the <html> and <body> elements? these could be affecting the overall page width..
html, body {margin: 0; padding: 0;}
btw.. you might also need to set margin: 0 auto; on the container div to center it in the more compliant browsers.. text-align: center; on the body is required for IE5.x and IE6(quirks) so it's best to leave that in...
Suzy
Thank you so much! Adding the margin and padding settings to the html, body selector seems to have done the trick (I'm testing it on a local machine now because I'm away from my office - I'll check it on the live site tonight, but it seems to have worked!).
Any idea why the simplified box model hack would seem to be causing the problem it is supposed to solve in IE5.01 and IE5.5? On one hand, removing the hack fixed the problem, so why worry? On the other hand, most of what I do in css (especially css positioning) is trial and error because I'm pretty certain I don't have a solid understanding of the principles. So "making it work" might be okay in the short-term, but could cause problems later on. That's why I'm at least interested in why the hack seems to be causing a problem.
Thanks again - I really appreciate your help!
Frank
It could be that you are using a Strict Doctype in which case the box model is in line with other browsers and so doesn't require the hack.
IE introduced the !Doctype switch to provide some "enhancements" [msdn.microsoft.com] ;) one of which was to fix the Box Model
Suzy
