Bug 12218 – Wikipedia infobox is displayed incorrectly

• Status: NEW
• Component: Tables

[Daniele Metilli]

Follow these steps:

1 - Load http://en.wikipedia.org/wiki/Template:Political_divisions_of_Serbia
2 - Load http://en.wikipedia.org/w/index.php?title=Template:Political_divisions_of_Serbia&action=submit
3 - Compare the two.

The infobox that says "Municipalities and cities of Serbia" is displayed incorrectly in the first case: it's too narrow.

This happens in shipping Safari, in the latest WebKit nightly, and also in OmniWeb. Gecko-based browsers display it correctly.

[Daniele Metilli]

Oops, the second link doesn't work. To make it work, just click on the "show preview" button below the text area.

[Matt Lilek]

Created attachment 12489 [details]
Reduction

The problem here is with table rows whose first table cell has 100% width.  You can cause all kinds of wierd stuff if you take the following code and mess around with the contents of the second cell.

<table><tr><td style="width: 100%">Text to show the bug</td><td>-</td></tr></table>

&nbsp; causes the table to stop at a width of 856px, a space stops it at 456px, and a -, 956px no matter how wide the browser is.  It seems to depend on how much content is in that cell as adding something long makes it behave properly.

The problem on wikipedia is actually this bug twice.  They have two of these nested within each other that cause it to shrink to the width of the content (despite having width: 100%), which then grows when the content is displayed via Javascript.

(Hopefully this makes sense).

[Brent Fulgham]

Safari and Chrome have the same behavior. Firefox is the outlier.