ie problem

[Jochen Fuhrmann]

div {width:11px;
height:11px;
border-width:2px;
border-style:solid;
border-color:rgb(0,0,0);
background-color:rgb(255,255,255)}

why does this css code produce a square that is higher than wide when
run with the ie? it does the right thing with firefox ... jochen

 

[brucie]

In alt.html Jochen Fuhrmann said:

div {width:11px;
height:11px;
border-width:2px;
border-style:solid;
border-color:rgb(0,0,0);
background-color:rgb(255,255,255)}

div{width:11px;height:11px;background:#fff;border:2px solid #000;}

why does this css code produce a square that is higher than wide when
run with the ie?

IE sucks.

please supply a url to examples in future.

 

[Toby Inkster]

div {width:11px;
height:11px;
border-width:2px;
border-style:solid;
border-color:rgb(0,0,0);
background-color:rgb(255,255,255)}

why does this css code produce a square that is higher than wide when
run with the ie?

Try fiddling with the font-size and line-height properties.

 

[Jochen Fuhrmann]

ok, that does it. but the problem is, that the ie sees the 11px as the
total size of the box and mozilla only as the not-framed part, but i
want the square to be shown as a 15x15 square with a 2px frame in both
browsers, how can i do that?

jochen

 

[Toby Inkster]

ok, that does it. but the problem is, that the ie sees the 11px as the
total size of the box and mozilla only as the not-framed part, but i
want the square to be shown as a 15x15 square with a 2px frame in both
browsers, how can i do that?

Sounds like IE's box model bug. Read up on doctype switching and Tantek
Celik's box model hack.