Anger with Firefox 1.5.x and Maybe More

At home, I have perhaps the crappiest setup for a web-developer to test on. I code exclusively on my Ubuntu Breezy Badger Box, which features all of 1 web-browsers: Mozilla Firefox 1.5 (which i only recently upgraded from Firefox 1.0). In any case I'm working on a dynamic resizing library, and It turns out that Firefox 1.5 is severely boned in at least one category. My basic qualm is with what appears to be a lazy CSS rendering mistake. If you set the margin property with a percentage:


margin: 10%;


Then firefox will extrapolate this out to all of the margin properties individually, which can be read in Javascript with:


element.style.marginTop;
element.style.marginBottom;
element.style.marginRight;
element.style.marginLeft;


So all of those values will also be 10% after the element with the 10% margin is created and appended to the document object. The only problem is that all of these values in actual pixels are calculated solely based on the width of the parent object. So a marginBottom of 10% is actually 10% of the total width of the parent object, as opposed to being 10% of the total Height of the parent object. This is fairly intolerable.

This became noticable to me, while I was in the process of writing functionality to resize all of the children of a dynamic resizable element, and I noticed that when Y-Scaling would turn off, the top and bottom margins would grow/shrink, but when Scaling on the X-axis was turned off, the margins wouldn't change for either the X or Y axis. I hope this is fixed in FireFox 2, and also that I don't discover similar mistakes in IE, Opera, Safari et all.

Enjoy! (angrily)