SID-02047: different display of table in different browsers

Status:	Answered	TWiki version:	6.0.0	Perl version:	5.8.8-14.7
Category:	CategoryRendering	Server OS:	SLES 10 SP2 X86 64	Last update:	10 years ago

I have a table with the following description

%TABLE{ sort="on" tableborder="0" cellpadding="4" cellspacing="3" cellborder="0" headerbg="#D5CCB1" headercolor="#666666" databg="#FAF0D4, #F3DFA8" footerrows="1" }%

You see a value for cellspacing="3". If I look at the topic in Windows XP - Firefox 36.0.4 I see a table without any white lines (cellspaces) at all. And the titels of the columns are all alligned left. If I look at the topic in Windows XP - IE 8 I see a table with white lines around the cells (cellspacing and cellpadding) and the titles of the columns are all alligned left. If I look at the topic in a Citrix-environment - IE 8 I see a table without any white lines and the titles of the columns are all alligned to center. Three combinations of Browser and environment and three different looks.

WHY????

-- Peter Starek - 2015-04-01

Discussion and Answer

Welcome to the world of browser madness

Unfortunately, I know of no easy and systematic way to fight that problem. I am slightly surprised that even two IE 8 installations yield different results, but basically the root cause of the problem is the so-called "default style sheet": Every browser has some initial attributes for everything, these come into effect if the web page doesn't specify an attribute. Only that every browser has a different default style sheet. The good news is that, over time, browsers have converged from vastly different settings and interpretations (is "width" the minimum or maximum width of a table cell?) to something which should not make web pages too ugly. IE 8 is more than five years old, and Windows XP even older than that, so there are chances that current browsers will perform better.

TWiki tries to accommodate for this challenge by specifying almost everything in its skin style sheets. However, the fact that table layouts can be controlled by both CSS and "direct" attributes doesn't make things easier (direct attributes win almost all the time). The layout attributes provided by the %TABLE{}% are all the "old", direct-style ones, but you did not specify text-alignment.

The TablePlugin has an attribute headeralign which helps to overcome the left vs. centered ambiguity. However, with the stray white-space, there's just guesswork: You can try to set a couple of CSS variables to see whether the problem goes away. I have created Sandbox.TableLayoutExperiments to demonstrate how table attributes and CSS can be used in TWiki pages. Note that the HTML is not "correct" in the strict sense because the <style> element is only allowed in the HTML header, but browsers accept them in the body, too.

-- Harald Jörg - 2015-04-01

Thanks to Harald for the explanation. But I have now another funny thing. If I write the %TABLE twice with 2 empty lines between like%BR% %BR% %TABLE{ sort="on" tableborder="0" cellpadding="4" cellspacing="3" cellborder="0" headerbg="#D5CCB1" headercolor="#666666" databg="#FAF0D4, #F3DFA8" footerrows="1" }%

%TABLE{ sort="on" tableborder="0" cellpadding="4" cellspacing="3" cellborder="0" headerbg="#D5CCB1" headercolor="#666666" databg="#FAF0D4, #F3DFA8" footerrows="1" }%

-- Peter Starek - 2015-04-02

And in IE11 are only horizontal lines thin black, vertical are no lines and no spaces to see. As Harad says -- "Wellcome to browser madness"

-- Peter Starek - 2015-04-02

Closing this question after more than 30 days of inactivity. Feel free to reopen if needed. Consider engaging one of the TWiki consultants if you need timely help. We invite you to get involved with the community, it is more likely you get community support if you support the open source project!

-- Peter Thoeny - 2015-12-03

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.