Stylesheets - Firefox messing up table borders

Author

Firefox messing up table borders

Harlan Messinger

2007-07-12, 6:16 pm

A large collection of tables is accessible from

http://nces.ed.gov/nationsreportcard/hsts/tables/

The formatting of these tables is governed by two CSS files:

http://nces.ed.gov/nationsreportcar...ndard-stats.css
http://nces.ed.gov/nationsreportcard/inc/hsts-stats.css

The former defines styles to use in tables of class="stattable". The
latter overrides the colors used for cells and borders when those tables
are within a body of class="hsts".

The formatting works well in IE, and *many* of the tables look right in
Firefox 2, including

http://nces.ed.gov/nationsreportcar...les/hsts001.asp
http://nces.ed.gov/nationsreportcar...les/hsts002.asp

However, many of the tables are rendered correctly only sometimes, while
at other times the borders disappear. This becomes especially apparent
when moving back and forth among the tables using the navigation bar
between the page heading and the table. For example, pull up

http://nces.ed.gov/nationsreportcar...es/hsts043a.asp

and click through the tables from there using the "Next table" link on
the navigation bar. You'll see that sometimes the borders appear,
sometimes they don't--or they appear and then disappear--and the
behavior varies even for a particular page.

Any suggestions about how to cover come this? Any chance that Firefox is
working on a fix?

Harlan Messinger

2007-07-12, 6:16 pm

Harlan Messinger wrote:
> A large collection of tables is accessible from
>
> http://nces.ed.gov/nationsreportcard/hsts/tables/
>
> The formatting of these tables is governed by two CSS files:
>
> http://nces.ed.gov/nationsreportcar...ndard-stats.css
> http://nces.ed.gov/nationsreportcard/inc/hsts-stats.css
>
> The former defines styles to use in tables of class="stattable". The
> latter overrides the colors used for cells and borders when those tables
> are within a body of class="hsts".
>
> The formatting works well in IE, and *many* of the tables look right in
> Firefox 2, including
>
> http://nces.ed.gov/nationsreportcar...les/hsts001.asp
> http://nces.ed.gov/nationsreportcar...les/hsts002.asp
>
> However, many of the tables are rendered correctly only sometimes, while
> at other times the borders disappear. This becomes especially apparent
> when moving back and forth among the tables using the navigation bar
> between the page heading and the table. For example, pull up
>
> http://nces.ed.gov/nationsreportcar...es/hsts043a.asp
>
> and click through the tables from there using the "Next table" link on
> the navigation bar. You'll see that sometimes the borders appear,
> sometimes they don't--or they appear and then disappear--and the
> behavior varies even for a particular page.
>
> Any suggestions about how to cover come this? Any chance that Firefox is
> working on a fix?

In my development environment I deleted all the code specific to body of
class="hsts" to see if cutting down on the amount of rules processing
would help. But while this left the default colors in place for the
table cell backgrounds instead of replacing them with the HSTS-specific
ones, the borders are still funky.

Harlan Messinger

2007-07-12, 6:16 pm

Solved. I added

empty-cells: show;

to the styles for these tables. Then, for Firefox only (using a
construct that IE doesn't recognize, because these changes killed the
look in IE) I changed the border model from collapsed to separate and
tweaked a couple of other properties:

html>/**/body table.stattable { border-collapse: separate;
border-spacing: 0; }

html>/**/body table.stattable th,
html>/**/body table.stattable td { border-left-style: hidden;
border-top-style: hidden; }