So then I spent some time on google looking for tutorials that could fix this problem. One (dated) tutorial suggested this hack:
* html div {
\\width: 140px;
w\\idth: 100px;
}
Then I found Tantek’s Box Model hack and I will see if this works. But I’d like to know if you guys are familiar with modern box model hacks or actual CSS3 methods to make sure that everything looks the same in any browser. I am designing my practice site in XHTML strict and I have the classic problem of trying to correct my columns after I applied padding to them.
Right now I am only using IE 8. I don’t understand why the following layout looks different between IE8 and other browsers whenever I apply a padding of 6px to one of the content columns.
What happens when you click the little “compatibility view” icon in IE 8? It’s otherwise known as the “completely-hose-the-site button,” but if for some reason you are in compatibility mode it may have switched to the IE box model instead of the standard box model.
Because of the IE fiasco that I just never set a padding or border on elements with a width. I don’t trust IE 8 either, even though it’s supposed to render pages with the standard box model. Users can still click that compatibility button.
Compatibility view won’t trigger the broken box model in IE it just triggers an ie7 mode I believe which is still in standards mode and still uses the correct box model. Iit’s only quirks mode that triggers the broken box model in ie6+. ( Ie5 is always in the broken box model mode but we can forget IE5 as it is dead and buried.)
There are a few simple reasons why you will have triggered quirks mode and it will be one of the following:
No doctype
Old html 4 transitional doctype without URI (or an even older doctype)
You have comments or code above the doctype
You have the xml declaration above the doctype in IE6
If you have done any of the above you will be in quirks mode. Just use a full modern doctype with no xml declaration and no comments or code above the doctype and then you will be in standards mode and use the correct box model.
are you using a reset? If not you may have default margins/paddings messing with you (since I’m not explicitly seeing them set).
perfect width on a layout tends to fail in many browsers, a negative margin on one of your elements can prevent ‘perfect width’ drop… though in your case, you’ve got one element with width, why does the other one need it? This is part of were I find it EASIER to design fluid, even if the overall layout is fixed.
raw10 hit it on the head, just don’t declare padding/border same time as width… for example instead of declaring a side padding on the container, declare side MARGINS or padding on the children.
lose the stupid clearfix nonsense and just declare overflow and a haslayout trigger on your wrapper.