Page MenuHomePhabricator

White border around thumbs
Closed, ResolvedPublic

Description

Thumbnailed images outside NS0 have big white border in Standard skin (and possibly others except
Monobook).

I believe it is because of the "border-color: white;" specification added in r18303, as non-NS0
pages in Standard do not have white background (they have explicit bgcolor="#ffffec" set by
Skin::getBodyOptions).


Version: unspecified
Severity: trivial
URL: http://en.wikipedia.org/wiki/Wikipedia:Pictures?useskin=standard

Details

Reference
bz8814

Event Timeline

bzimport raised the priority of this task from to High.Nov 21 2014, 9:34 PM
bzimport added a project: MediaWiki-Parser.
bzimport set Reference to bz8814.
bzimport added a subscriber: Unknown Object (MLST).
  • Bug 5879 has been marked as a duplicate of this bug. ***

I checked this with modern, monobook and standard and they all look the same for the given URL. If indeed fixed, please close.

Created attachment 6181
Screenshot of standard exhibiting the bug

No, it has not been fixed. See the attached screenshot (taken right now on http://en.wikipedia.org/wiki/Wikipedia:Pictures?useskin=standard running 1.15alpha (r48811)).

Attached:

Border-in-standard-screenshot.png (480×315 px, 52 KB)

chinchi29 wrote:

Perhaps it could be fixed with a "background-color:inherit" around the thumb.

Note that this issue is no longer VISIBLE in the English Wikipedia because of customizing [[MediaWiki:Common.css]] with the following CSS;

/* Remove white border from thumbnails */
div.thumb {

border: none;

}
div.tright {

border: none;
margin: 0.5em 0 0.8em 1.4em;

}
div.tleft {

border: none;
margin: 0.5em 1.4em 0.8em 0;

}

The issue still exists in the default skins.

See bug 16272 comment 1 for why the borders are there at all. But the desired effect (preventing h2 lines from connecting to floated thumbs) can be achieved in a simpler and more general way by applying overflow:hidden to the h2 elements.

This would work for all floats, not just thumbnails, and also fix bug 1629, but has side-effects:

  • overflow:hidden does nothing in IE 6. If that's a problem, the desired effect can be achieved by triggering hasLayout. In IE 7, it works because overflow:hidden has become a hasLayout trigger. It finally works as it should in IE 8.
  • Headings would become invisible in IE/Mac, see bug 1629 comment 40 and http://l-c-n.com/IE5tests/overflow/#overflowblock. If that's a problem, it can be he hidden from this ancient browser.
  • Bug 1629 comment 38 is about unspecified problems with RTL and Firefox that would have to be looked into.

Besides that, I wonder why every skin needs to contain a copy of this code. Can't this at least be consolidated in shared.css and commonPrint.css? At the German Wikipedia, we have the same workaround as in comment 5 scattered across the local skin-specific CSS files, and there is no consensus to put them in Common.css as long as it's scattered upstream.

Note that overflow:hidden can clip content if a heading contains a very long unbreakable word and there is a right float before it. With overflow:visible, content is pushed down the float, but not with overflow:hidden; it's clipped instead.

If it's not worth this risk, I'd suggest to just remove the white borders. They may serve a purpose, but cause rendering inconsistencies (other floats like infoboxes don't have such borders), and many wikis (enwiki, dewiki, commonswiki at least) remove them locally anyway.

*** Bug 26423 has been marked as a duplicate of this bug. ***

See also bug 26423.

Fixed in r79010 & r79011.

Similar demo on TranslateWiki, which uses the trunk where it'll appear soon
http://translatewiki.net/w/i.php?title=Sandbox&oldid=2584255
(compare with http://www.mediawiki.org/w/index.php?title=Sandbox&oldid=371897 )