Frederik Dohr a écrit :

Hello all,

We're having a little trouble with our (minor) CSS modifications of the default Monobook skin. The goal is to reduce the page's size to 90% and center it horizontally (so there's a small margin or gap on each side).

for the 90% : in main.css change this :

/* scale back up to a sane default */ #globalWrapper { font-size: 127%; width: 90%; margin: 0 auto; padding: 0; }

for the tabs : in monobook.php, add a wrapper <div id="p-cactions-wrapper"> inside p-cactions (and its </div> at the end)

<div id="p-cactions" class="portlet"> <div id="p-cactions-wrapper"> <h5><?php $this->msg('views') ?></h5> <div class="pBody"> <ul> <?php foreach($this->data['content_actions'] as $key => $tab) { ?> <li id="ca-<?php echo Sanitizer::escapeId($key) ?>"<?php if($tab['class']) { ?> class="<?php echo htmlspecialchars($tab['class']) ?>"<?php } ?>><a href="<?php echo htmlspecialchars($tab['href']) ?>"<?php echo $skin->tooltipAndAccesskey('ca-'.$key) ?>><?php echo htmlspecialchars($tab['text']) ?></a></li> <?php } ?> </ul> </div> </div> </div>

then in main.css

#p-cactions { position: absolute; top: 1.3em; /*left: 11.5em;*/ margin: 0 auto;/*auto is for left-right centering*/ white-space: nowrap; width: 90%;/*76%;*/ line-height: 1.1em; overflow: visible; background: none; border-collapse: collapse; padding-left: 0;/*1em;*/ list-style: none; font-size: 95%; }

and

#p-cactions-wrapper { margin-left: 12.2em; }

you'll have to do the same for the logo and the personnal tools blocks, moreover there might be a cleaner way to do this (without changing php code)

While this works fine in Firefox, we just can't get it to work in IE6; the sidebar is stuck at the window's left side, and the tabs at the top are misaligned as well.

Speaking of tabs: There's a tiny (1px) gap between inactive tabs and the content area in IE (in the default skin, not related to our modifications), which becomes very visible when changing the page's background color. Unfortunately, we have not been able to fix this either.

Does anyone have some experience with such issues?

Yes

I'd greatly appreciate some tips!

I think (it was months ago) I had to change the skins/monobook/IE##Fixes.css file for each version ## of IE (at least for the 1px issue : it's because IE doesn't understand margin and padding properties the same way as other browsers do)

using those dedicated css, you can correct all IE bugs

e.g. for IE60Fixes.css : change

#p-cactions li a { display: inline-block !important; vertical-align: top; padding-bottom: 1px;//this is the pixel you were missing border: solid #aaa; border-width: 1px 1px 0; }

#p-cactions li.selected a { border-color: #fabd23; padding-bottom: 0.17em !important;//!important is to ignore (for the selected tab) the pixel you added above }