I could never remember IE’s box model quirks, nor how it applied padding/margin to containers with specific widths/heights. These two rules dissolve the need to remember the fixes for either of them!
I decided this needed to be documented, since I’ve learned a process of designing in such a manner that IE6 doesn’t always have to be that ball-ache at the end of a project!
There are a few common practices I’ve begun to follow that can cut out a lot of the bug-fixing you inherently brace yourself for once a site is ‘complete’ in all other browsers. I worked these out over the last two projects I’ve worked on, which incidentally were both designed ‘in browser’ using Andy Clarke‘s Hardboiled methodology.
Before I go into specifics, note that I’m aware these may not necessarily be the best practices for your web site, and that everyone’s preferences for bug-fixing in IE are different. These are just the ones I use, and know to work every time!
display:inline; float:left;
This one’s the most important of all, in my opinion. It reduces the need for other ‘hacky’ CSS fixes that force a box model, such as ‘height:1%;’ or ‘zoom:1;’. Apply this to all container elements (e.g. DIVs, ULs), and anything else you may encounter box model issues with. They’ll express the exact same positioning behaviour in IE as they do in other browsers, if you globally apply these styles to your elements.
Always apply margin/padding to internal elements, not to containers
I’m aware there’ll always be exceptions to this rule, but to save yourself a great deal of headaches and IE conditional-commented CSS rewriting, follow this rule.
I usually give the containers specified widths with no padding or margin, then apply those spacing values to all of their internal elements. If this seems like too much of a hassle though, for example if there’s going to be many different types of elements inside this container, there’s an alternative route – embed another ‘inner’ container inside of the one you specified a width to. Give this container the necessary margin or padding, but don’t give it a width, and don’t give it a float. This way the contents will naturally span the width of the outer container, but have that left or right margin or padding applied.
No Comments