Chrome: larger font-size in tables

sman · #1 (**permalink**) 02-10-10, 06:45 AM

Hello,

i am regulating my font-size on websites globally with 9pt for the body-tag. There is no other font-size attribut in my css code for any subtag.

All browsers but IE6-7 and Google Chrome (I only tested version 3) display texts correctly.
The IE bugs displaying text in tables much larger is well-known and can be corrected by little IE hacks.

But why the new Chrome also displays text in tables with much larger font-size

and how can i fix that?

Thank you in advance

wirehopper · #2 (**permalink**) 02-10-10, 06:55 AM

Can you post the for the font size and the related HTML?

sman · #3 (**permalink**) 02-10-10, 07:21 AM

Just following my describtion, you can easily write a minimum test file

HTML Code:

<html><head>
<style>body { font-size: 9pt; }</style>
</head><body>
Text for testing purpose.
<table><tr><td>Text for testing purpose.</td></tr></table>
</body></html>

I was surprised that this results in a larger font-size in the table for ALL browsers, why?

Now, using the doctype i was using as i found my problem:

HTML Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'[]>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>body { font-size: 9pt; }</style>
</head><body>
Text for testing purpose.
<table><tr><td>Text for testing purpose.</td></tr></table>
</body></html>

The font-size is displayed as i described, both are the same in Firefox3 and IE8, but not in Chrome3, the table text is still larger. But i still like to know: Why is the font-size interpretation changing as the doctype is changed?

On my way to play with this test file, I found a solution even for Chrome, just adding the following style to the existing one:

HTML Code:

body * { font-size: 100%; }

But it leads again to the fundamental question: What is the reason for that stupid behaviour?

I hope to learn from you and maybe get to know more insight into that weird display behaviours of CSS.

wirehopper · #4 (**permalink**) 02-10-10, 10:02 AM

Be sure to validate your code. It will save you a lot of time.

The W3C Markup Validation Service

sman · #5 (**permalink**) 02-10-10, 11:49 AM

Thank you very much wirehopper for answering one-liners and no help.

This is a minimum test code, which properties are generally defined as having the same behaviour as the real code.
Naturally, i have validated my code before i posted the issue.

As you wish, here is exactly the same but validated code, behaving exactly the same weird way:

HTML Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'[]>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>foo</title>
<style type="text/css">
body { font-size: 9pt; }
</style>
</head><body>
<p>Text for testing purpose.</p>
<table><tr><td>Text for testing purpose.</td></tr></table>
</body></html>

Again: Chrome shows larger font sizes in the table.
Any ideas or hints?

wirehopper · #6 (**permalink**) 02-12-10, 07:50 AM

I'm sorry my suggestions didn't help you. I don't have an answer, or I would have posted it.

When I have one browser that's behaving differently, my solution has been to create a stylesheet that forces the page to display as I want it to, then use the server to check the browser and include that stylesheet if necessary.

Or, I just allow that browser to display slightly differently.