Bug 22336 – Regional Charts on Google Trends Rendered Incorrectly

• Component: DOM
• Status: RESOLVED DUPLICATE

[Jon@Chromium]

The subregion and city graphs are just thin gray lines instead of being 
red and blue.  See this link http://www.google.com/trends?
q=chocolate,diamond&ctab=0&geo=US&geor=all&date=mtd&sort=0

These graphs appear correctly in IE7 and FF3.  The problem appears to be that the bars in trends are constructed so:

<style>
table.bar td {
    border-bottom: none;
    padding:0;
}
table.bar {
  padding:0;
  border-top: 1px solid #E8EEF7;
}
</style>

<table cellspacing="0" width="60" height="4" class="bar"><tbody><tr><td bgcolor="#4684ee"/></tr></tbody></table>
<table cellspacing="0" width="62" height="4" class="bar"><tbody><tr><td bgcolor="#dc3912"/></tr></tbody></table>
<table cellspacing="0" width="61" height="4" class="bar"><tbody><tr><td bgcolor="#ff9900"/></tr></tbody></table>

the webkit rendering engine doesn't display the colored bars because there is nothing in the td that is renderable (so the bgcolor defined for the td doesn't show up)...
as you know, this doesn't happen in IE, FF etc.

Trends can work around this. here are a couple of options:
putting something within the td so it renders:
<table cellspacing="0" width="60" height="4" class="bar"><tbody><tr><td bgcolor="#4684ee"><img src="" width=1 height=1/></td></tr></tbody></table>
moving the bgcolor attribute to the table tag:
<table cellspacing="0" width="60" height="4" class="bar" bgcolor="#4684ee"><tbody><tr><td/></tr></tbody></table>

However, is this actually a problem that should be resolved in WebKit?  The cell for the table appears to be rendered but it is lacking the background color.

This was originally opened against Chromium but happens in WebKit nightly and Safari as well. See http://code.google.com/p/chromium/issues/detail?id=1283

[Jon@Chromium]

Found the Dupe.

*** This bug has been marked as a duplicate of 18129 ***