2010/5/28 Rob Lanphier <ro...@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

_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Reply via email to