Page MenuHomePhabricator

Thumbnail styles in main.css and commonprint.css are too imprecise
Closed, ResolvedPublic

Description

Author: zocky

Description:
Main.css contains some imprecise definitions that screw up attempts to have divs
inside the image caption, and, are just badly coded. The first four definitions
under /*thumbnails*/ should be replaced with the following more precise code
which gives the same visual results:

/* thumbnails */
div.thumb {
border-style: solid;
border-color: white;
width: auto;
margin-bottom: .5em;
}
div.thumb > div {
border: 1px solid #ccc;
background-color: #f9f9f9;
text-align: center;
overflow: hidden;

padding:3px;

}
div.thumb > div > a img {
border: 1px solid #ccc;
}
div.thumbcaption {
font-size: 88%;
text-align: left;
line-height: 1.4em;
padding: .3em .3em .1em .3em;
}


Version: unspecified
Severity: normal

Details

Reference
bz5061

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 9:08 PM
bzimport set Reference to bz5061.
bzimport added a subscriber: Unknown Object (MLST).

zocky wrote:

See [[User:Zocky/Sandbox 5]] for an illustration of the problem.

There's no indication of a problem. The given sample page uses a
huge amount of hardcoded styles for no apparent reason, with no
indication why.

Resolving as INVALID. Reopen with more information if there is actually
some kind of problem.

zocky wrote:

Basically, we've been trying to make the {{legend}} template work properly
(without inserting characters, and preferably producing properly indented
multi-line labels). The only way to do that in html/css is by using divs, but
all divs inside thumbnail boxes inherit a bunch of formatting which is just
meant for the whole thumbnail box (or rather for its unnamed direct descendent
div, which is the visible gray box), not for each of its subparts.

Whether styles should be harcoded into templates or put into css files is a
somewhat broader question.

zocky wrote:

I've added another example at [[User:Zocky/Sandbox 5]] with no hardcoded styles
at all, which exhibits the same problem.

As I feared; the > child selector doesn't work in IE 6.

zocky wrote:

Could we name the currently unnamed div around the images and make that style
apply specifically to it, not all div descendants of its parent?

Created attachment 6434
Use div.thumbinner

Easy fix for the chick and simple skins, for a very old bug.

Attached:

Created attachment 6958
same patch, but for commonPrint.css

The same problem exists for commonPrint.css

Attached:

These are the same as r18303 did on monobook.
Applied on r61112. Thanks.