Last modified: 2012-12-15 02:05:27 UTC

Wikimedia Bugzilla is closed!

Wikimedia has migrated from Bugzilla to Phabricator. Bug reports should be created and updated in Wikimedia Phabricator instead. Please create an account in Phabricator and add your Bugzilla email address to it.
Wikimedia Bugzilla is read-only. If you try to edit or create any bug report in Bugzilla you will be shown an intentional error message.
In order to access the Phabricator task corresponding to a Bugzilla report, just remove "static-" from its URL.
You could still run searches in Bugzilla or access your list of votes but bug reports will obviously not be up-to-date in Bugzilla.
Bug 26449 - Add { overflow: hidden; } to H1, H2, H3, H4, H5, H6; this fixes bunching.
Add { overflow: hidden; } to H1, H2, H3, H4, H5, H6; this fixes bunching.
Product: MediaWiki
Classification: Unclassified
Interface (Other open bugs)
All All
: Normal normal (vote)
: ---
Assigned To: Nobody - You can work on this!
: 72 27051 (view as bug list)
Depends on:
  Show dependency treegraph
Reported: 2010-12-27 15:41 UTC by Erwin Dokter
Modified: 2012-12-15 02:05 UTC (History)
7 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---

Screenshot of the cut-off problem (39.83 KB, image/png)
2010-12-29 16:00 UTC, Derk-Jan Hartman

Description Erwin Dokter 2010-12-27 15:41:13 UTC
Add { overflow: hidden; }  to H1, H2, H3, H4, H5, H6 in main-ltr.css (and main-rtl.css).

Originally, TheDJ proposed to add overflow:hidden; to H2 in order to prevent the header lines from touching various right-floating elements. But I discovered that applying this to all headers fixes a major problem: Bunching (where the edit links are pushed down the page). With overflow:hidden;, headers respect the margin of all floating elements, causing the edit links to stay in bounds of the headers. 

Tested in IE8, Firefox 3.6 and Chrome 8 with Vector, I found no adverse effects. Long headers still line-wrap, so nothing is actually hidden. This is presumed to be beneficial for all skins.
Comment 1 Krinkle 2010-12-27 15:43:53 UTC
This also needs testing in Firefox 2, IE7 and IE6.

If it degrades in those browsers to the current behaviour that would be fine, haven't tested yet though.
Comment 2 Erwin Dokter 2010-12-27 16:09:37 UTC
Tested in IE6 and FireFox 2.0; although IE6 apparently does not suffer from the bunching bug, the fix has no adverse effects. In FireFox 2, the bunching is fixed with this code.
Comment 3 Derk-Jan Hartman 2010-12-27 19:46:25 UTC
Tested in Opera 10. Looks very promising. Testing further on enwp.
Comment 4 Derk-Jan Hartman 2010-12-27 20:10:48 UTC
I couldn't belief we hadn't checked this before, and as a matter of fact, we did check it before. See #1629

This change was made in 2007, but reverted, because it broke on rtl wiki's and on IE for Mac. ( r24253 and r24254 )

Now of course, we don't care about IE for Mac anymore, but perhaps we can make this fix ltr specific this time and be done with it ?

I wonder which browsers exposed the rtl issues....
Comment 5 Krinkle 2010-12-27 20:14:11 UTC
For one, there is no longer a direction-specific stylesheet in Vector with ResourceLoader, as there shouldn't since content and style should be seperated and could cause extension writers or gadget makers to assume overflow:hidden and it not being there for RTL languages is wrong (or the other way around).

A possible reason I can imagine it broke with RTL is the fact that overflow:hidden can sometimes (or always?) cause the float to be cleared.
Comment 6 Derk-Jan Hartman 2010-12-27 20:25:43 UTC
I note that the rtl wiki he.wikipedia has had the same code for a while now.מדיה_ויקי%3ACommon.css&action=historysubmit&diff=8718954&oldid=8691454
Comment 7 Krinkle 2010-12-27 20:46:19 UTC
A little story, see r79010. I fixed the white whitespace around the thumb by making them transparent. This causes the underlines from the <h#> to go all the way to the edge of the thumb. I dont really see a problem with it, but it's fixed by using overflow:hidden and that border around thumbs should be margin anyway (see r79086)
Alright, I'll add this to Vector tonight but not so that it fixed bunching but so that the room around the thumbnails is preserved (since without overflow:hidden underlines continue through margin)

See also

We could solve the bunching by simply not floating them. I remember prototypes in vector that had it next to the title as well.
Comment 8 Krinkle 2010-12-27 20:53:32 UTC
Added to vector skin in r79087.
Comment 9 Fomafix 2010-12-27 20:54:48 UTC
See and #c7

overflow:hidden can clip long words. Workaround for Firefox:
 h1, h2, h3, h4, h5, h6 { min-width: -moz-min-content }

On Firefox it is not possible to mark a text with mouse beginning inside the
overflow:hidden container and ending outside.

Despite the problems, I believe overflow:hidden is the best solution.
Comment 10 Erwin Dokter 2010-12-27 23:07:21 UTC
I think the risk of clipping long words is negligable. How about other skins. I know the problem exists in monobook. Is it worth fixing that as well?
Comment 11 Krinkle 2010-12-27 23:24:19 UTC
Added to other core skins with the same heading/thumb styling in r79091.
Comment 12 Derk-Jan Hartman 2010-12-29 16:00:47 UTC
Created attachment 7940 [details]
Screenshot of the cut-off problem

This screenshot shows the problem that fomafix is describing. The browser was Safari.
Comment 13 Krinkle 2010-12-29 18:38:20 UTC
Without overflow:hidden the text of too-long-words continues outside the layout and requires scrolling.
Overflow:hidden hides that part. This can be fixed by adding:

word-wrap: break-word;

which is supported in CSS3 and in IE.

See also:
Comment 14 Fomafix 2011-01-13 17:33:22 UTC
(In reply to comment #12)
Some more examples of long words in an overflow:hidden container and in particular floating objects are here:

vector, monobook have
/* Tables */
table {
	/* we don't want the bottom borders of <h2>s to be visible through
	 * floated tables */
	background-color: white;

I think by h2 { overflow:hidden } this is no longer necessary.
Comment 15 Fomafix 2011-01-13 18:51:38 UTC
(In reply to comment #14)
I created a separate bug 26708 to remove table { background-color: white; }
Comment 16 MZMcBride 2011-01-30 21:54:43 UTC
*** Bug 27051 has been marked as a duplicate of this bug. ***
Comment 17 Leinad 2011-03-16 01:39:38 UTC
Please look at bug28041, I'm not sure is it the same problem.
Comment 18 Krinkle 2012-06-03 14:55:37 UTC
*** Bug 72 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.