====== TOC FIXED :! ======

===== Some links =====

Everything about the fixed position of div in css and the bug off Ie 5.5 to 6, not in 7 about this argument.

http://www.howtocreate.co.uk/fixedPosition.html

Others ressources :

http://divinentd.com/experiments/emulating-position-fixed.html

http://www.quirksmode.org/css/condcom.html


Overflow :

http://www.designplace.org/tutorials.php?page=1&c_id=24

http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/


===== What we want (if we want it :)=====

We want to do the horrible tricks of the fixed div...
Why horrible because it is not recommanded.

Look to this horrible implementation :
[[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]]

The implementation of the toc in DokuWiki actually is good, it is just for special use that you can use this trick.

===== What we have to do=====

Just replace the declaration of "div.dokuwiki div.toc" in the design.css of your template folder.
For instance :\\ 
"/dokuwiki/lib/tpl/name of your template/design.css"\\
by this code ...









==== The css code ====

<code css>

/* ---------- table of contents ------------------- */
/* 
div.dokuwiki div.toc {
  margin: 1.2em 0 0 2em;
  float: right;
  width: 200px;
  font-size: 80%;
  clear: both;
}


*/


div.dokuwiki div.toc {
	/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
	margin: 1.2em 0 0 2em;
  	position: absolute; 
	right: 2px; 
	top: 100px; 
	z-index: 10; 
	width: 18%; /* could be improve */
	height: 80%; 
	overflow: auto; /* When the toc is too big ... */

}
body > div.dokuwiki div.toc {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  	position: fixed;
}

<!--[if gte IE 5.5]>
<![if lt IE 7]>

div.dokuwiki div.toc {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  	 position: absolute; 
  	right: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  	top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	z-index: 10; 
	overflow-Y:scroll;
}
<![endif]>
<![endif]-->

</code>

I use in the [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]] the cool and beauty template [[http://www.dokuwiki.org/wiki:tpl:templates?s=dark%20dokuwiki#dokuwiki_dark|dokuwiki dark]], to well implant the TOC i put this in layout.css : 

<code css>

/* Stop the web page from getting too wide */
/* If you need to support 800x600 you'll have to reduce, or remove this */
div.dokuwiki {
        width: 820px; 
	margin-left: auto;
	margin-right: 20%;
}



</code>

===== Limitations =====

I loose my implemantation of this on IE 6 looser explorer... i scream to god but i don't find the trick... but what for ?