2010/5/28 Rob Lanphier robla@wikimedia.org:
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