Border zoom bug

An ongoing experiment to bring you more information than you would ever want to know about problems zooming with a border.

Note: you will need to set the zoom in your browser to less than 100% to see the bug

This is the normal styling, with no padding, margins or borders

div b

div c

1 pixel border on "div b" (Width reduced by 2 pixels for proper box-model width)

Triggers bug

div b

div c

1 pixel border on "div c" (Width reduced by 2 pixels for proper box-model width)

Triggers bug

div b

div c

Both "div b" and "div c" have a 1 pixel border (Width reduced by 2 pixels for proper box-model width)

Triggers bug

div b

div c

1 pixel border on 1 side of "div b" (Width reduced by 1 pixel for proper box-model width)

Triggers bug

div b

div c

1 pixel border on 1 side of "div b" and "div c"(Width reduced by 1 pixel each for proper box-model width)

Triggers bug

div b

div c

2 pixel border on "div b" (Width reduced by 4 pixels for proper box-model width)

breaks at about 45% in IE or smallest setting in Firefox

div b

div c

2 pixel border on left side of "div b" and 1 pixel border on right side of "div b"(Width reduced by 3 pixels for proper box-model width)

breaks at about 50% in IE, next to smallest setting in Firefox

div b

div c

1 pixel padding on "div b" (Width reduced by 2 pixels for proper box-model width)

works

div b

div c

1 pixel margin on "div b" (Width reduced by 2 pixels for proper box-model width)

works

div b

div c

This last one will trigger double margin float bug in IE 6 becaue it has a margin on the side it is floated to. Set div .b to display:inline to fix. But, you probably knew that already :)