Bug 12218 – wikipedia.org: infobox is displayed incorrectly

• Component: Tables
• Status: RESOLVED CONFIGURATION CHANGED

[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.

[Ahmad Saleem]

@Brent & @Karl - I am unable to reproduce and all browsers seems to match now Safari 26.2 Beta, Chrome Canary 144 and Firefox Nightly 147.

[Karl Dubost]

Created attachment 477564 [details]
rendering in safari, firefox, chrome

Same rendering everywhere.