2010/5/28 Rob Lanphier <robla(a)wikimedia.org>rg>:
Is there anyone here who can look at the CSS and offer
up a better version
of what's there?
I think I've discovered the main problem.
The div with the lock icon (div#mw-fr-revisiontag) is positioned with
position: absolute; . This doesn't really mean it's gonna be
positioned with absolute coordinates, but it means it'll be
postitioned relative to the closest parent element that has a
position: property set. In Monobook, this is div#content, whereas in
Vector this is div#bodyContent (a child of div#content). Because there
are children of div#content preceding div#bodyContent (div#siteNotice
and h1#firstHeading), they start at different heights, so the same CSS
(something like position: absolute; top: -2.5em;) will cause the icons
to be positioned differently in each skin.
The way I see this (and, mind you, I'm not a CSS ninja at all, just
someone with a more-than-basic knowledge of CSS), there's two ways to
solve this (assuming you want the lock icon to be next to the page
title, above the horizontal line):
1) Use different positioning offsets for each skin. This is ugly, but
will probably work. For Monobook, top: 3.6em; seems to work for me,
whereas on Vector, top: -2.5em; produces the same effect. You can do
skin-specific CSS with rules like body.skin-monobook
.flaggedrevs_short { top: 3.6em; } , but again, you don't want to be
doing this (there's another half dozen skins out there) and I have no
idea whether these offsets will work well in other browsers.
2) Move div#mw-fr-revisiontag to just before or just after
h1#firstHeading and position it right from there. That way you're sure
the closest positioned parent will be div#content, but it's probably
even easier to position it relatively.
Roan Kattouw (Catrop