User:Ring/Userboxes/Testing

As far as I know, the CSS properties height and width specify the internal dimensions of an element, where padding, border and margin are not included. If you have a lot of left-floating boxes, a difference of 1px in height might break a clean formatting.

Testing

 * According to default values of the template, the overall dimension should be at least 240&times;49px (=238&times;47px + 1px border)
 * i.e. compared to using only div containers instead of td's
 * width/height: 45px + 1px padding + 1px border = 49px total height (47px width for id)
 * According to Firebug the id-td dimension are 43&times;43 + 1px padding, overall dimensions are 238&times;45px + 1px border


 * Now, another div-container surrounds the id text, with specified dimensions of 45&times;45px &rArr; dimensions seem correct
 * However, the default b-tag in the id makes the xhtml invalid as we have a block element inside an inline element now and valign is broken


 * Example from Guild_Wars_Wiki:Templates
 * The image size is 45&times;45px, yet the td-dimensions are 46&times;46px + 1px padding &rArr; 240&times;50px
 * possibly due to default padding of 1pt (not 1px)!?


 * Well, the image is resized to 43px now, padding is still 1pt and the td has 45&times;44px + 1px padding! WTF?
 * overall dimensions: 238&times;46px + 1px border...
 * also, image seems to be off a little to the top right

Possible reason
My current explanation - to make sense of it all - is, that height, width and padding are calculated differently for td-elements than for other block-elements in Firefox. I don't usually use tables, as I didn't have to present data in this form yet, but I can see that they have certain advantages for userboxes (well, actually valign only). Heavy testing confirmed the assumption: Firefox includes padding and border in table cell height calculations, but not in width...

Further attempts
After all, it seems that the intended behaviour is a default size of 240&times;47px including 1px border, which I initially misinterpreted.

Originally, I wanted an image in the id field with a 1px border (i.e. padding) around it. However, during testing, I noticed that one problem of this is that if the border color is similar to the id background, it might look like there's a 2px border to the top, left and bottom and none or a smaller one to the right.)


 * 1) darker border, padding is 0, image size 43px (nah, failed)
 * 2) darker border, padding is 1px, image size 43px (still failed)
 * 3) padding is 0, image size 45px (okay, but not quite what I want)
 * 4) padding is 0 1px 0 0, image size 45px (also okay, small border to the right due to padding, but barely noticeable and still not what I want)
 * 5) darker border, padding 1px, image size 43px, using div's (looks okay, but broken xhtml)
 * 6) darker border, padding 1px, image size 43px (2px padding left, no padding to right with id-p=0, darn)
 * 7) current implementation of "skill border cropping" (looks okay, but actually 2px padding to right and broken xhtml)
 * 8) same as above, with border to right (still failed)

Also, all boxes might still look very different in IE...

This seems to require a custom implementation: User:Ring/Userbox

If I'm missing the obvious - which happens quite often - and you read this, please tell me...