Display DIV Same Size (FF & IE)

Dysan

hi, the following code displays a div 100x100 in Internet Explorer, but not in FireFox (108x108). How do I get it to display at 100x100 in both browsers?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
  MARGIN: 18px;
  PADDING: 0px;
}

div
{
  WIDTH: 100px;
  HEIGHT: 100px;
  BORDER: 4px solid rgb(0,0,0);
}
</style>
</head>

<body>
<div></div>
</body>
</html>

leatherback

Hi,

AFAIK, IE and Firefox handle boxes differently. ie correctly assumes that a border is part of the box-size (using outer dimensions) whereas FF places the border around the specified box. Bot much you can do about it, I think.

That being said.. You could hack it using nested boxes?

Weedpacket

leatherback wrote:
ie correctly assumes that a border is part of the box-size (using outer dimensions) whereas FF places the border around the specified box.

Just to correct this: Firefox gets it right in putting the border outside the box, and IE's making it part of the box size (at least in some versions/circumstances) is the mistake. (Margin, border and padding are all outside the box so that its size only needs to depend on the size of its actual content.)

NogDog

It may help to use a fully qualified doctype declaration to ensure that IE is not in "quirks mode" (just using a doctype is not enough, it must be "fully qualified"):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [color=red]"http://www.w3.org/TR/html4/loose.dtd"[/color]>

Better yet, since you are presumably creating a new page, consider using a Strict doctype unless you have a specific, valid reason for using the Transitional one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

leatherback

Weedpacket wrote:
Just to correct this: Firefox gets it right in putting the border outside the box, and IE's making it part of the box size (at least in some versions/circumstances) is the mistake. (Margin, border and padding are all outside the box so that its size only needs to depend on the size of its actual content.)

Hm.. Somewhere I read that IE got this one right, for once and FF was the odd one. Dunno what the reason was why that argument stuck.. Was some argument whether or not you should be able to specify full-outer-dimensions of a box, so tha tyou always know the size required when stacking them

Weedpacket

leatherback wrote:
Was some argument whether or not you should be able to specify full-outer-dimensions of a box, so tha tyou always know the size required when stacking them

I still maintain that what's missing from CSS is indirection, so that you can say in effect "well, this is the same height as that, whatever height that is" or "the left border is twice as wide as the right border, and the sum of both plus the width of the box should be half the width of the container."

leatherback

Weedpacket wrote:
I still maintain that what's missing from CSS is indirection, so that you can say in effect "well, this is the same height as that, whatever height that is" or "the left border is twice as wide as the right border, and the sum of both plus the width of the box should be half the width of the container."

Yeah.. the box dimension stuff is really tricky. You should be able to specify:
box-outer-width = 450px
or
box-inner-width = 450px

depending on your reference.

And then depending on whether outer or inner width is set, the border & padding are inside or outside. I.M.H.O. margins should always fall outside the specified size definition. Untill that has been implemented, we are stuck with calculations OR not caring (I do the latter 😃, fluid design, minimized styling is my thing).

Oh.. hm.. Can you imagine the trouble with it if FF en ie both try to implement this sort of rules.. brr

NogDog

As the spec. pretty clearly shows, the width or height of a box is the sum of its content width/height (which is what the width/height properties specify) plus the applicable padding, border, and margin values. Thus the padding, border, and margin are all outside the area specified by the width or height property. IE, however, when in "quirks mode" includes the border and padding inside of the stated width/height.