You can’t get very far with CSS layouts before confronting IE’s broken box model. I have been trying to glide around it up until now with this website layout, but I can ignore it no longer.
The natural place to start is at Holly Bergevin and John Gallant’s Position Is Everything, a treasure chest of articles and tutorials dealing with CSS layouts in buggy browsers. From there, I found an article titled The Box Model Problem. I’m off to study it…
Hi, I’m back. Here’s the short version:
- IE6/Win in Quirks mode and IE5/Win mistakenly consider the width and height of a box to include padding and borders while the W3C standards say width and height are measured without padding or (obviously since they’re outside of padding) borders.
- To get everything to add up the way you expect, you need to serve different widths/heights to IE6/Win if you’re counting on quirks mode and IE5/Win in any case.
- Use the Tan hack to serve alternate widths and heights to these two browsers as necessary.
I’m not sure if this solves my problem with adding a background image that colors my sidebar and puts shadows around the edges of the main page wrapper. I may have been calculating widths incorrectly when making my graphics. We shall see.
