All Browsers Agree
It’s well known that various browsing devices have their differences in the way CSSs are interpreted. It may seem that these differences are irreconcilable as well at times. Of the various differences the most annoying affects the positioning of various containers such as <divs> and <tables> on the pages. I’m not going to write about that, though. That’s not what this short article is about. Instead I want to mention something all of the browsers have in common, then explain the advantages of its exploitation.
The common-denominator of which I write is a measurement, yet it’s not. It is represented as a percentage. And as a square of the font size or em, in pixels and points and what have you. It is found in all of these. It is zero. Zero is zero regardless of browser or user agent. 0px is the same as 0em is the same as 0%. And all browsers agree.
So, how can this information be advantageous to the average web developer? Well, let’s imagine a container. A <div> let’s say. Now position it on a page. In most instances one might apply padding to the content block level elements to offset them. You know, so the text isn’t flush with the border; so the page looks good. But this can be unsafe if done incorrectly. By unsafe I mean that the page may only produce the expected results with a certain browser type. There are certainly many ways to avoid this to those who have the experience, even to those who don’t if they mess around a bit trying different combinations of the measurements. This can be done in the CSS. It may also be done by way of browser-detection scripts (not recommended) and conditional commenting (also not recommended).
There’s yet another way. Instead of bashing your head against the wall trying to please various user agents by making various measurement concessions or by way of other methods, try to employ the universal measurement instead. Namely, zero. Now let’s imagine that same container. Give it a background color of #666 or a medium gray. Now insert a second container within the first (unlike <table>s, it’s okay to nest <div>s). Temporarily make its background #999 or light gray. Normally one might not apply positioning to that container, instead of opting to use padding to hold tight the contents. Don’t. Instead try using margin and positioning to get the second container where you want it. Try something like this:
div#id {
background : #999;
position : absolute;
margin-left : 20px;
margin-top : 20px;
}
When the second container is where you want it you should be able to change the background color to #666 to match the container in which it is housed. If you now add content to the inner container, you may do so using zero padding. Since there are no conflicts with that measurement so you should be good to go. The offset of the content will be determined by the position (using a much safer “margin”) thus if you positioned the left side of the container 20px. from the top and left, that’ll be your offset. The right side should be taken care of by the width of the container (make it less wide by, say, 40px., 20px. on each side). The bottom should be fine by the default padding of the blocklevel element(s) within. If not, add margin-bottom and the distance you desire.
Now, if you want to get fancy and do things like add drop shadows (by way of background images) and whatnot, simply use three containers, all nested. The outer container will provide over all page position and a line of demarcation. The middle div will contain the transition from outer to inner and this is where the shadow will reside, the inner container will contain the content. The offset will be provided visually by use of the graphics of the middle container. In other words, let’s say the margin between the outer and middle containers is 30px. 2opx. of it may be the shadow and background color transition, if applicable. The remaining 10px. needs to be space and must have the same color as the inner background.
Timothy Johnson responds:
Posted: October 31st, 2005 at 3:32 pm →
Very original content. I really like your site.