Quick Question

[oo7ml]

Lets say i have a DIV and i set the height to 100px and the width 100px and i apply a border to it of 2px. Now lets say i want to put an image in this DIV to fill it, should the image be 100px X 100px or should it be 98px X 98px to allow for the boder...

I guess what i am asking is:

When a border is applied to a an element such as a DIV or TABLE etc... does the border go on the outside of the element or the inside or where does it go?

[KDLA]

Depends on the browser displaying it. FX keeps the div at 100px, placing the border on the "outside"; IE places the border "inside," making the div 98px wide.

It's the classic "broken box model" of IE.

Resource: http://css-discuss.incutio.com/?page=BoxModelHack

[oo7ml]

thanks man or Lady

[Centauri]

????

When using a complete and valid doctype on the page (which should be always), IE6 and above follow the same rules as any other browser - the set sizes of an element are the internal size, and padding and borders are added to this. The box model problem exists in versions of IE less than version 6, and the user base for these is very small and diminishing, so most don't worry about supporting it.

[KDLA]

I thought only IE7 fixed this issue.... (?)

[Centauri]

In standards mode (with a complete doctype), IE6 follows the proper box model, but reverts to the broken model in quirks mode. Quite often I find people inadvertantly put IE6 into quirks mode by omitting the uri section of the doctype.

[KDLA]

In standards mode (with a complete doctype), IE6 follows the proper box model, but reverts to the broken model in quirks mode. Quite often I find people inadvertantly put IE6 into quirks mode by omitting the uri section of the doctype.

Ah -- the URI. I know it's an issue with WYSIWYG editors; I had to change DW's string in the "normal" template for it to be correct.