tags:

views:

27

answers:

2

This CSS works perfectly in Firefox but not in IE8.

.toc {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    border:black 1px solid;
    color:white;
    max-height:50%;
    max-width:25%;
    overflow:auto;
    padding:10px 10px 10px 0;
    position:fixed;
    right:20px;
    top:40px;
}

.toc li { color:black; list-style-type:circle; margin:5px 0;}

Instead of a floating menu on the right side, IE8 renders the menu as first paragraph on top of the page. Where is my fault?

Update:

The relevant HTML:

<div class="toc">
<ul>
<li><a href="#toc_1">DOCS</a></li>
<li><a href="#toc_2">TODO</a></li>
<ul>
<li><a href="#toc_2.1">Vorlagen</a></li>
<li><a href="#toc_2.2">Taeglich</a></li>
<li><a href="#toc_2.3">ADVARIS</a></li>
<li><a href="#toc_2.4">CRM</a></li>
<li><a href="#toc_2.5">QIS</a></li>
<li><a href="#toc_2.6">SAP</a></li>
<li><a href="#toc_2.7">Verschiedenes</a></li>
</ul>
<li><a href="#toc_3">URLs</a></li>
<ul>
<li><a href="#toc_3.1">Dev</a></li>
<li><a href="#toc_3.2">NEWS</a></li>
<li><a href="#toc_3.3">Vim</a></li>
</ul>
</ul>
</div>

Firefox-Screenshot

IE-Screenshot

A: 

Going by just the code you provided (not enough) it seems to work identical in both IE and FF

http://www.jsfiddle.net/p6Kzu/

Gaby
+1  A: 

Based of Gaby's provision, when I switch IE to render in Quirk's mode, then I believe I see your problem. Check your Doctype and other things that would through you into Quirk's mode, that's probably what is causing the issue.

Scott
It was the missing Doctype. Thank you very much!
vbd