Forum:Monobook visualization issue

Hi, I don't understand why a centered thumb image in this page (on the bottom) in Oasis is placed beside the infobox, but in monobook is placed under it, like there was a  propriety. Can it be fixed?

As you can see in the same page, in monobook the colors of the top template (the tabs) are messed up, why's that? The template is this one, I'm sorry but it was a template created long time ago on One Piece Wiki and was updated many times, I didn't have the time to make order in the code so it's a bit messy.

Oasis/Wikia is a fixed-width skin. You have 680px of content area, and you've chosen to center something which is 220px, next to an infobox which is roughly 320px (20em). Because your text is not longer than the height of the infobox, your picture can do nothing other than collide with the infobox. It's simple math.

You can correct it by:
 * adding more text, so that the picture is pushed down past the bottom of the infobox
 * removing the centered picture (do you really need two pics in that proximity of each other?)
 * making the pic left-aligned instead of center aligned
 * decreasing the widths of the pic, the infobox, or both

The reason why it looks like it's cleared in monobook is because monobook is not a fixed-width skin. You simply have your browser window open sufficiently wide that the two elements avoid collision. However, if you narrowed your browser window, you'd eventually be able to create exactly the same effect. 22:12: Thu 19 Apr 2012


 * I didn't understand why in Oasis the centered image was place next to the infobox (basically centered in the space left) while in monobook was centered under the infobox... shouldn't be the opposite? As test I tried to zoom in the page as you said but the picture always remain under the infobox... Anyway, I'd like to know if there is a way (CSS) to achieve the same thing in monobook and remove all that unused space between the text and the image... otherwise I'll simply left align it. For the tab template instead any ideas?


 * You could fix it by placing this CSS in the MediaWiki:Common.css page:

div.tnone {clear:none;}
 * In oasis, galleries and thumbs are rendered way different from monobook and that's the reason why styles are not consistent. --Category:Ciencia Al Poder (talk) -WikiDex 19:09, April 22, 2012 (UTC)
 * Shouldn't it be placed only in "monobook.css"? (I'm using the import in wikia.css) Not that would change anything, but I want to know if it's important for oasis too. And what about the tab template at the top of this page, why the colors are not rendered correctly? (at least for me) The template is this one
 * Monobook thumbs are the standard way of doin things, how core MediaWiki works (on Wikia, on WikiMedia or in your own installation) and it would work on every other "standard" skin like vector. That's why I suggest it to be placed on the Common.css instead of the Monobook.css. Oasis is just using their propietary way of doing things and won't be affected. Since Vector is disabled on Wikia and there's no other standard skin you can place the code on Monobook.css or Common.css since it won't make any difference (at least in the short term).
 * About the tab, it's an issue on Monobook since it has a forced white background (and black text color) on tables. You can safely disable that with this CSS, this time placed on MediaWiki:Monobook.css (I've also put that on my home wiki):

table, abbr, acronym, .explain { color:inherit; background-color:inherit; }
 * I've included other elements that also have that forced background, you may leave them or remove them as needed, --Category:Ciencia Al Poder (talk) -WikiDex 09:38, April 23, 2012 (UTC)