28/
I kind of like tables in HTML. They're a convenient way to present information in an easy to grasp manner.
But a few months ago, suddenly there were no lines (also knows as borders) around the cells. That makes nicely presented info confusing.
Yesterday I found out why. It is something in my CSS. I wasn't sure if it was my mistake or that some browsers don't fully adhere to the standards.
Anyway, it does work now. Details below.
In hindsight, the problem started when I switched from Firefox to Chrome. When testing again now, I find this (under Windows Vista ™ Home Premium, Service Pack 2):
| Browser | Tested version | Borders |
|---|---|---|
| Google Chrome | 4.1.249.1064 unknown (45376) | No |
| Opera | 10.53, Build 3374 | No |
| Firefox | 3.6.3 | Yes |
| Internet Explorer | 8.0.6001.18904 | Yes |
My CSS contained the following:
table, td, th
{
padding-top : 0.3ex;
padding-bottom: 0.7ex;
padding-left : 0.5em;
padding-right : 1.0em;
border : 0.03em solid #007777;
}
After consulting an internet source I can't find again now, I know that this might have been better and clearer:
border : thin solid blue;
After some experimenting, I found that the reason for some browsers ignoring my request was in using "em" as a size unit. Using points "pt" instead, it now works in all four browsers.
border : 1.5pt solid #007777;
I had used "em"s because I wanted the borders to scale in accordance to font size. But that probably doesn't make sense, because text has a size, but within a "td" (table division) the size used need not be the same.
What still amazes me is that the CSS validator of w3.org didn't object to any variant of my CSS. This source however suggests that only pixels are allowed. So why do em's work in two browsers and points in all four?
Note that when using a number and a unit, there may be not space between the two. Some browsers accept this, but the validator does not.
Further experimenting revealed that the real problem was not in the unit used, but in the number itself and in default values that browsers use. The point (pun intended, hahaha) is that 0.03em is really very small, so small that some browsers rounded it to zero pixels and showed no borders at all. For 0.04em and up (in my examples) they too show borders. Apparently Explorer and Firefox have a rule that anything smaller than one pixel defaults to one pixel, not zero. The same applies when using points as a unit of line thickness.
This improvement affects several pages in my site:
Irregular verbs in Spanish and Portuguese
Os sons da Língua portuguesa - The pronunciation of the Portuguese of Portugal
The pronunciation of the Portuguese of Portugal - Alphabetic listing
Sound sample acknowledgements and bibliography
Spanish de donde, from where, twice added de?
Portuguese words of Germanic origin
Why any next message in a thread is really nothing
Pranto and llanto, but not chanto
Uma queda queda
Tree names in Portuguese surnames
Names ending in "-es" and "-ez"
etc., etc.
Copyright © 2010 by R. Harmsen.