Module talk:Chessboard
Bug
Making the icons use position:absolute (i.e. inside a div instead of a table) caused an obscure and probably coincidental css rule for nested elements to give each of them a white background, effectively negating the svg/png transparency, to wit:
div.thumb div a img {
background-color: #FFFFFF;
}
I tracked this down in Firebug as having originated from the following url:
My edit to this module fixed the visual problem immediately by conveniently removing element "a" from the hierarchy and dodging the above css rule (see before & after screen-shot taken from Template:Chess diagram/doc) but I'm amazed nobody else had complained about it. If we really do want each chess-piece icon to link to the image page as they did before my edit, we will need some superseding CSS rule to work around this bug. ―cobaltcigs 09:20, 9 June 2013 (UTC)
- thank you. it's possible that this was recently-introduced. I have made a corresponding change to Module:Chessboard mxn, which probably wasn't necessary, since that template doesn't use transparent backgrounds, but it will make lack-of-link consistent. Frietjes (talk) 16:02, 9 June 2013 (UTC)
- thank you for reporting the problem. however, your solution caused collateral damage: when removing the "a" from the hierarchy (by adding link="), we lose the tooltip, which, for each piece, gave the square algebraic notation ("e6" etc.), the color and the piece name. i am undoing it, and instead will try something else (i think i'll just pack the image in some surreptitious element, maybe another "div" or "span" or something). i have no idea why monobook has this rule - i does not make too much sense: if such a rule is really needed, why just monobook? "div, thumb div a img" is clearly something to do with content and not interface, and i can't think of a good reason why same content with monobook should have white background to images while other skins leave the img background untouched. the correct solution, IMO, would be to remove this rule (unless someone can explain why monobook should have it). peace - קיפודנחש (aka kipod) (talk) 00:39, 10 June 2013 (UTC)
Sorry, I didn't notice we had customized/meaningful tool-tips until you told me so. My subsequent edit appears to keep them appearing by moving the title attribute (a.k.a. tool-tip) to the outer "span" element. This is the string which is normally forwarded to an "a" element from the final parameter of the [[Image:...]] syntax when parsing wikitext. A CSS rule has the same effect regardless of what elements are nested between those named in the rule. ―cobaltcigs 04:16, 10 June 2013 (UTC)
- yes, i found that out... i made some experiments, such as replacing the "div" element with some other element, but didn't get anything that actually worked, and i had to get away from keyboard. one thing i did do is to leave a message to the gentleman who created this css rule (back in 2005): User talk:Omegatron#request to undo ancient edit. the reason nobody noticed until now, is that it seem that few enough people use monobook, and of those, few enough people look at chess articles... well, thatks for solving it. peace - קיפודנחש (aka kipod) (talk) 06:08, 10 June 2013 (UTC)
- thanks for making the edit request. it appears this rule has now been removed, so we can go back to what we had before? Frietjes (talk) 19:39, 12 June 2013 (UTC)
Okay I've reverted it. This is not as an affirmation that linking to the svg description pages several times from every chessboard on the page is terribly important (wikibooks' boards, see e.g. QGA, have neither links nor tool-tips), only that doing so no longer obscures the square color. ―cobaltcigs 02:43, 13 June 2013 (UTC)
Bug In The Mobile Version
The styling of the chessboard breaks when using the mobile version of Wikipedia. It's really bad on Webkit, with both desktop and mobile versions of the browser (when viewing the mobile version of Wikipedia). Other browsers show somewhat broken (but still usable) layout.
To replicate:
1. Go to http://en.m.wikipedia.org/wiki/Fool%27s_Mate using any Webkit-based browser, either on a desktop computer, or on a mobile device
2. Note the broken display of chessboard, esp. in the "Details" section. Example screenshot.
Explanation:
The mobile version's CSS interferes with the styling of the chessboard, particularly with the padding and verical-align.
Fix:
Each <td> tag's style attribute must also contain the following: padding: 0; vertical-align: inherit;. I don't know how to edit modules on Wikipedia, otherwise I might've fixed this myself.
Disclaimer:
I've tested this solution on iOS Safari and Chrome, and on latest desktop Chrome, FF and IE. The fix worked in every case.