I was frustrated that when I tried to reduce the font size on our home page with CSS, it didn't work. I had tried a bunch of things, using percent, "em" units, pixels, etc. This was a problem in both IE and Firefox. I had even tried using the FireBug plugin to debug it.
It turns out that content inside of tables, which is all of the content on our home page, is set by the font-size for tbody, vs. body. Oddly, the other attributes such as font-family and color can be set just in body, but size must be set for tbody.
So this will give you red text, but will NOT reduce the size of content in tables:
body {
color: #80000;
font-size: 0.9em;
}
But this fixes the problem:
body, tbody {
color: #80000;
font-size: 0.9em;
}
I haven't seen an explanation for this online yet, and it seems very specific to the size directive, and had the same problem in two completely different browsers. Weird.
Comments