[Mediawiki-l] Monobook modifications: IE issues

[Alexis Moinet]

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
}