User:Ring/Userboxes/Testing

From Guild Wars Wiki
Jump to navigationJump to search

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
Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses


  • 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)!?
Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses


  • 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.)

Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses
Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses
Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses
Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses
Signet of Capture.jpg
All of this user's wiki skills were captured from dead wiki bosses
Signet of Capture.jpg All of this user's wiki skills were captured from dead wiki bosses
Pounce.jpg
This user believes in the power of Animal Companions.
Pounce.jpg
This user believes in the power of Animal Companions.


  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...