notes from cross browser compatibility
(
July 7, 2006 at 12:23 pm)
· Filed under browsers
, cross platform , css , firefox , msie6 , opera , safari
For tables,
border-spacing: 0px;
works fine in every browser (Opera (PC, Linux), Firefox (PC, Linux, Mac), Safari) except IE6 to eliminate the bit of padding around the table and its border and around each table cell. For IE6, it’s necessary to use
border-collapse: collapse;
which works all of the above browsers. I even checked Mac IE which didn’t recognize either, but it’s so dead in the water it can be ignored at this point.
According to W3, both seem to be valid markup (as opposed to made-up stuff introduced ad-hoc that no one should ever use).
This is the start box with no properties specified. Note the table background color peeking around the entire table and between each cell:
| with no properties | ||
|---|---|---|
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
With this next box, everyone but IE6 users should see a nicer alternating-row look:
| with border-spacing property | ||
|---|---|---|
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
With this one, everyone should see a nice alternating row color:
| with border-collapse property | ||
|---|---|---|
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
And now everyone (but the poor Mac IE users, of course) should see alternating rows:
| with both properties | ||
|---|---|---|
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
Brian Layman said,
July 13, 2006 @ 11:55 am
What browsers see a visual difference between the last two? In Ie6 at the office, I can’t determin what the visual difference is…
bct said,
July 22, 2007 @ 8:52 am
There are tools available nowadays for browser compatibility testing which can reveal the areas that are incompatible across browsers. infact when i have to fix BCT problems, i found http://www.essentiabct.com very useful tool