On Fri, May 28, 2010 at 12:43 AM, Rob Lanphier robla@wikimedia.org wrote:
What we're struggling with is that the "[review pending revisions]" with the little lock icon beside it to look right in a cross-browser and cross-skin fashion. A couple of the problems we're seeing:
- In Vector, the placement of the text can be too high or too low,
depending on the browser in use 2. In Monobook, the problem is even worse. For example, in Chrome on Linux, the text hovers way up above article, covering up the "My contributions" link, for example
Try just putting your div right before the <h1 id="firstHeading"> or equivalent, and float: right it. You can put some margins or padding on the top and/or right to adjust it a bit if you like. Something like that should work. This will be much more reliable than trying to absolutely position it, because different skins will use different heights, and the heights won't be consistent at all in the face of things like site notices.
On Fri, May 28, 2010 at 6:53 PM, Rob Lanphier robla@wikimedia.org wrote:
I think this is the crux of the problem. From what Aaron tells me, Monobook and Vector are already using different offsets here. I've not had a chance to do a deep dive myself, so that I think you've identified what's the most challenging here. This is one of those areas in CSS where different browsers handle things very differently, so getting this right has been a bit of a mess.
This is CSS 2.1. All browsers we care about should handle it interoperably except for possibly IE 6 and 7. I see pixel-perfect identical results in recent Firefox, Opera, and Chrome on Linux for your Backmasking page. I even booted to Windows to check in IE8, and that was basically identical, just as it should be. (Not quite pixel-perfect, but seemingly only because different fonts were used.) Only in IE6 does it look correct -- in all the others it's mispositioned in exactly the same way.
You're not developing for IE6 and then trying to port to other browsers, are you? You should be doing the reverse.