I have a class to assign width of a table such as: .FormField { width:120pt; vertical-align:top; }
It works fine in chrome and firefox as the computed width is width: 160px; but in explorer it’s width: 324.01px;. How can it deviates so much? Can somehow please tell me why and how can i solve it? Thank you in advance.
point sizes should be used only for print, not for screen display. 72pt = 1inch in print. A similar measurement of 1 inch on a display is entirely screen density/pixel dependent. The correlation of points or other fixed units of measure to screen densities is device dependent and not uniformly supported across all browsers.
Thanks for the reply ronpat. I agree with you and my preference is to use percentage to set the width. But the class is a standard and i am advised not to change it. Is there any possibilities that other issues cause this?
Not to my knowledge, but stay tuned… someone else will be along within the next several hours who may know.
In which version(s) of Internet Explorer so you see the problem?
The different widths in px are due to pt being a different measurement with there being no set conversion factor between the two. There is nothing to solve any more than there would be in working out how many blues make an elephant. .
The simple way is to change the CSS style further down the cascade to some other unit which will overwrite the initial style. .FormField { width:some-other-unit; }
Here is a link to a conversion table showing several units and the relationship between them. pt-px-em
As @ronpat has stated, the result is browser and screen dependent and may not give you the width you are expectting.
A length expressed in any of (cm, mm, in, pt and pc) will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen.