Border Width

Hi,

the following div is 38 pixels high in IE and Opera, however 42 pixels
in Firefox (apparently it calculates the height exclusively the border
width)

<div style="background-color: #000000; height: 38px; border: 2px
solid #FF0000;"></div>

Now, I dont know which of them is right, but I would like to know
whether there is a workaround.

Thanks,
Alexander

Du you have an example-page? Are there any elements within the div? Ist
there a padding wich might change the hight?
Maybe the div is just rendered right in Firefox and wrong in the two others:
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/...box-model.html

Chris


Alexander Mueller wrote:

Hi,

the following div is 38 pixels high in IE and Opera, however 42 pixels
in Firefox (apparently it calculates the height exclusively the border
width)

div style="background-color: #000000; height: 38px; border: 2px solid
#FF0000;"></div

Now, I dont know which of them is right, but I would like to know
whether there is a workaround.

Thanks,
Alexander

Chris Leipold wrote:

Du you have an example-page? Are there any elements within the div? Ist
there a padding wich might change the hight?
Maybe the div is just rendered right in Firefox and wrong in the two
others:
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/...box-model.html

Well, there isnt much of an example necessary. Just drop the code into a
file and see yourself . As I mentioned, I dont know who is actually
right, but would like to know whether there is a workaround.

Thanks,
Alexander

Alexander Mueller wrote:

[wrong box model in IE]

Now, I dont know which of them is right, but I would like to know
whether there is a workaround.

Short answer: Yes.
Longer answer: Search for "box model".
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Alexander Mueller wrote:

Chris Leipold wrote:
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/...box-model.html

As I mentioned, I dont know who is actually
right, but would like to know whether there is a workaround.

Did you read the stuff mentioned by Chris?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

saz wrote:

BTW - Is it really that big a deal? It's only 4 pixels, and unless you
have them side by side, you wont know the difference.

It is, as I still didnt find a way to center the content of a div
vertically.

Thanks,
Alexander

Johannes Koch wrote:

Did you read the stuff mentioned by Chris?

Not entirely.

Alexander

Alexander Mueller <postmaster (AT) 127 (DOT) 0.0.1> wrote:

the following div is 38 pixels high in IE and Opera, however 42 pixels
in Firefox (apparently it calculates the height exclusively the border
width)

div style="background-color: #000000; height: 38px; border: 2px
solid #FF0000;"></div

Now, I dont know which of them is right, but I would like to know
whether there is a workaround.

Firefox is right. Opera and IE6 and Mac IE5 (but no Win IE5) would
also get it right of you used a doctype that triggered standards mode
instead of quirks mode.

In CSS width and height are measured from the inside edge of the
padding. So any padding and borders should be in addition to the
width/height.

Steve

On Wed, 12 Jan 2005 15:40:30 GMT, Alexander Mueller <postmaster (AT) 127 (DOT) 0.0.1>
wrote:

Chris Leipold wrote:
Du you have an example-page? Are there any elements within the div? Ist
there a padding wich might change the hight?
Maybe the div is just rendered right in Firefox and wrong in the two
others:
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/...box-model.html

Well, there isnt much of an example necessary. Just drop the code into a
file and see yourself . As I mentioned, I dont know who is actually
right, but would like to know whether there is a workaround.

Ensure Standards mode rendering, and MSIE 6, Opera and Mozilla/Firefox
will all give the box the correct height: 42px.

In Quirks mode, Opera 7 and MSIE 6 emulate the MSIE 4-5 bug and make the
box 38 px high.

Mozilla can only be forced to emulate the MSIE 4-5 behavior with a special
stylesheet rule:

-moz-box-sizing: border-box;

To get MSIE 4-5 to show the correct 42 px height, you'll need to use the
box-model hack:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

I've you'd read the links Chris gave, you'd also have learned this BTW.

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

Alexander Mueller wrote:

It is, as I still didnt find a way to center the content of a div
vertically.

By the way, if anyone would have a suggestion for that, I wouldnt be mad
either .

Alexander