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[edit]
45 | id should be 45×45px + 1px padding = 47×47px |
- According to default values of the template, the overall dimension should be at least 240×49px (=238×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×43 + 1px padding, overall dimensions are 238×45px + 1px border
45
|
id should be 45×45px + 1px padding = 47×47px |
- Now, another div-container surrounds the id text, with specified dimensions of 45×45px ⇒ 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×45px, yet the td-dimensions are 46×46px + 1px padding ⇒ 240×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×44px + 1px padding! WTF?
- overall dimensions: 238×46px + 1px border...
- also, image seems to be off a little to the top right
Possible reason[edit]
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[edit]
After all, it seems that the intended behaviour is a default size of 240×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.)
This user believes in the power of Animal Companions. |
This user believes in the power of Animal Companions. |
- darker border, padding is 0, image size 43px (nah, failed)
- darker border, padding is 1px , image size 43px (still failed)
- padding is 0, image size 45px (okay, but not quite what I want)
- 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)
- darker border, padding 1px, image size 43px, using div's (looks okay, but broken xhtml)
- darker border, padding 1px, image size 43px (2px padding left, no padding to right with id-p=0, darn)
- current implementation of "skill border cropping" (looks okay, but actually 2px padding to right and broken xhtml)
- 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...