I've noticed that Netscape seems to add spacing to the total width and
height of a DIV if you use the padding attribute.  Internet Explorer doesn't
seem to do this.

For example, if I had something like this:

#myDiv {
 position:absolute;
 background-color:#CCCCCC;
 top: 10%;
 left: 260px;
 width: 150px;
 height: 400px;
 padding: 3px;
 z-index:1;
}

In Netscape 7, the total width of the above DIV would be 156 pixels (adding
3 on the left and right-hand sides), and the total height would be 406
pixels.

In IE, only the inside of the DIV is padded; the overall width of the DIV
seems to remain intact at 150x400.

Any explanation for this?  Or is it another example of the whole "don't ever
expect even the latest browsers to interpret the XHTML doctype the same way"
kind of thing?  This would seem to handicap a designer who wants to build a
totally tableless page when one browser is adding extra pixels.

The next question is:  which browser, based on the above, is actually
respecting the XHTML doctype the closest in this example?  Should the
padding actually add extra width to the DIV, or should it only pertain to
the content within the DIV?

Mike

• Web Designer Courses
• Off the Shelf Training Courses

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA