Webpage design: how does one translate margin or border values like "medium", "thin", etc. into numbers?

Question

I am trying to develop a webpage containing 2 tables whose column widths should be in sync (i.e. column widths can vary dynamically based on the tables' content but the corresponding columns'widths in both tables are to be kept the same so columns match up with each other).

For the correct calculation I need to take borders, margins, padding and what not into account (it's a nightmare!).

On FF my calculations finally work fine, i.e. the two tables look good and match up, but in IE my calculations yields NaN's and consequently exceptions when later setting the column widths.

The reason as I found out is that some of the padding values return values like "medium" instead of a numerical value and then my calculation goes havoc. Is there either a way to query the numerical value or else, how does one translate "thick", "medium", "thin", etc. into their corresponding numerical values?

Michael

Answer 1

These keywords are only for border-width, you can't set them on padding. The standard deliberately doesn't specify what the keyword values mean, but in IE, thin, medium and thick are 1px, 3px and 5px respectively.

Other browsers probably don't matter as I guess for those you will be using getComputedStyle to find the border width. The computed style will be resolved to a proper length. It's only the non-standard IE currentStyle interface that gives you the value in its original form which may be a keyword.

Either way, you might get lengths that are not in pixels, which can be a pain to convert (especially %). Have you considered determining the amount of border+padding by comparing the clientWidth to the offsetWidth? This would seem generally simpler.