z-index..IE?

Status
Niet open voor verdere reacties.
S

steenbok1988

Gebruiker
Lid geworden
7 dec 2009
Berichten
6
Beste allemaal,

Inmiddels, na wat vragen te hebben gesteld, staat mijn website er bijna.
Nu heb ik nog 1 klein vraagje waar ik niet uitkom, ook niet met behulp van de tientallen forums die er al over bestaan. Wellicht dat het hier mij een uitkomst kan bieden.

Zoals welbekend gaat IE niet goed om met z-index. Het is dan ook overbodig om te melden dat het allemaal werkt behalve in IE. Op internet wordt gemeld dat ik dan grote getallen moet gebruiken, ook dit lijkt niet te werken.
Het enige wat lijkt te werken is om de krullen bovenaan in de html te zetten. Dit is echter geen goede oplossing, gezien de krullen naar onder moeten worden gedrukt, bij het langer worden van de tekst. Heeft iemand anders mogelijke oplossingen? Ik ben je erg dankbaar!

Het betreft de tekst in de span class die moet vallen over div class="krullinkervlak".

Groeten,
Eefje

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> </title>
    <link href="opmaak.css" type="text/css" rel="stylesheet"/> 
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="Scripts/javascript.js"></script>
</head>

<body >
<!--start maincontainer-->
<div id="container_main">
    
    <div id="container_header">
        <div class="logo">Plaats van het logo</div>
        <div class="hoofdmenu">de menubalk</div>
    </div>

    <div id="container_content">    
        <div id="kolomrechts">
            Hier staat de content. Dit vlak is schaalbaar. De rechterkolom schaalt dan ook mee. De footer blijft ook altijd onderaan geplakt.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at massa vitae turpis ullamcorper porta. Nulla pulvinar risus vel mauris elementum accumsan. Vivamus nulla est, faucibus sit         
            amet tempor in, blandit sed ligula. Vestibulum vulputate sodales urna, in convallis ligula bibendum sed. Nam tortor orci, placerat sed commodo vel, euismod at urna. Nullam ut suscipit     
            turpis. Aliquam sed enim ac ipsum posuere auctor. Nulla facilisi. Quisque neque quam, sodales vel viverra ac, rutrum vitae ligula. Pellentesque semper risus sit amet dui dignissim bibendum 
            pharetra magna semper. Donec consequat facilisis dolor vel tempus. Integer sit amet lorem libero.
        </div>    
           
      <div id="foto-slider">Hier komt de slideshow/foto's op elke pagina</div>

        <div id="content">
             <span class="tekst">
            Hier staat de content. Dit vlak is schaalbaar. De rechterkolom schaalt dan ook mee. De footer blijft ook altijd onderaan geplakt.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at massa vitae turpis ullamcorper porta. Nulla pulvinar risus vel mauris elementum accumsan. Vivamus nulla est, faucibus sit         
            amet tempor in, blandit sed ligula. Vestibulum vulputate sodales urna, in convallis ligula bibendum sed. Nam tortor orci, placerat sed commodo vel, euismod at urna. Nullam ut suscipit     
            turpis. Aliquam sed enim ac ipsum posuere auctor. Nulla facilisi. Quisque neque quam, sodales vel viverra ac, rutrum vitae ligula. Pellentesque semper risus sit amet dui dignissim bibendum 
            pharetra magna semper. Donec consequat facilisis dolor vel tempus. Integer sit amet lorem libero.
            Hier staat de content. Dit vlak is schaalbaar. De rechterkolom schaalt dan ook mee. De footer blijft ook altijd onderaan geplakt.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at massa vitae turpis ullamcorper porta. Nulla pulvinar risus vel mauris elementum accumsan. Vivamus nulla est, faucibus sit         
            amet tempor in, blandit sed ligula. Vestibulum vulputate sodales urna, in convallis ligula bibendum sed. Nam tortor orci, placerat sed commodo vel, euismod at urna. Nullam ut suscipit     
            turpis. Aliquam sed enim ac ipsum posuere auctor. Nulla facilisi. Quisque neque quam, sodales vel viverra ac, rutrum vitae ligula. Pellentesque semper risus sit amet dui dignissim bibendum 
            pharetra magna semper. Donec consequat facilisis dolor vel tempus. Integer sit amet lorem libero.
            Hier staat de content. Dit vlak is schaalbaar. De rechterkolom schaalt dan ook mee. De footer blijft ook altijd onderaan geplakt.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at massa vitae turpis ullamcorper porta. Nulla pulvinar risus vel mauris elementum accumsan. Vivamus nulla est, faucibus sit         
            amet tempor in, blandit sed ligula. Vestibulum vulputate sodales urna, in convallis ligula bibendum sed. Nam tortor orci, placerat sed commodo vel, euismod at urna. Nullam ut suscipit     
            turpis. Aliquam sed enim ac ipsum posuere auctor. Nulla facilisi. Quisque neque quam, sodales vel viverra ac, rutrum vitae ligula. Pellentesque semper risus sit amet dui dignissim bibendum 
            pharetra magna semper. Donec consequat facilisis dolor vel tempus. Integer sit amet lorem libero.</span>
        </div>
            
            <div class="krullinkervlak"></div> 
            <div class="krulrechtervlak"></div>
    </div>
        
</div>
<!--einde maincontainer-->


<!--start sticky footer-->
<div id="container_footer">

  <div id="container_sitemap">
        <ul class="footerbalk">                            
                    <li class="footerbalk1">Dislaimer</li>                                
                       <li class="footerbalk1">© intrige</li>        
                     <li class="footerbalk1">16/3/2010</li>
                    <li class="footerbalk1">LinkedIn</li>        
                    <li class="footerbalk1">Facebook</li>
                    <li class="footerbalk1">Tripadvisor</li>        
                    <li class="footerbalk1">Babyfriendlybotlholes</li>
                    <li class="footerbalk1">Add this</li>        
                    <li class="footerbalk1">Add this</li>
        </ul>
        
        <ul>                            
            <li class="kopjes">Kolom1</li>                                
                       <li>Verticaal</li>        
                     <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
        </ul>
        
        <ul>                            
            <li class="kopjes">Kolom 2</li>                            
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
        </ul>
        
      <ul>                            
            <li class="kopjes">Kolom3</li>    
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
      </ul>
        
      <ul>                            
            <li class="kopjes">Kolom4</li>                        
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
                    <li>Verticaal</li>        
                    <li>verticaal</li>
        </ul>
    </div>
</div>
<!--einde sticky footer-->
    
        
</body>
</html>

CSS:
HTML: 
*{
        margin: 0;
        padding: 0;
        outline: 0;
}

body {
    background-color:#fffce8;
    z-index:-1;
}

/* Basisindeling grote vlakken */ 
#container_main{
        margin: 0 auto;
        width:960px;
        background-color:#fffce8;
        height:auto;
        position:relative;
        overflow-x: hidden;
}

    /* Top */
    #container_header{
            width:100$;
            height:155px;
            background-color:#666666;
    }

        .logo{
                width:183px;
                height:101px;
                margin-top:20px;
                background-color:#FCF;
                float:left;
                position:relative;
        }
        
        .hoofdmenu{
                width:755px;
                height:25px;    
                float:right;
                background-color:#9CF;
                margin-top:130px;
        }

    /* Content */
    #container_content{
            width:960px;
            height:auto;
            background: url(images/bg-faux-content.gif) repeat-y right;
            position:relative;
            overflow: hidden;
            z-index:1;
}

        
        /* Left */            
                #container_content #foto-slider{
                        width:674px;
                        height:268px; 
                        float:left;
                        margin-top:12px;
                        background-color:#0F9;
                }
            
                #container_content #content{
                        width:693px;                        
                        min-height:400px;                        
                        height:auto  !important;
                        height:400px;
                        float:left;
                        position:relative;
                }

        #kolomrechts{
                width:267px;
                min-height:680px;
                height:auto !important;
                height:680px; 
                position:relative;
                float:right;
        }

/* Footer */
#container_footer{
            background-image:url(images/footer.jpg);
            background-repeat:no-repeat;
            width:960px;
            min-height:175px;
            height:auto !important;
            height:175px;
            position:relative;
            margin:auto;
}


        #container_sitemap{
                    position:absolute;
                    width:960px;
                    margin-bottom:50px;
        }
        
                    #container_sitemap ul {
                            float:left;
                            padding-left:100px;
                            padding-right:60px;
                    } 
                    
                    #container_sitemap ul li{  
                            list-style:inside;
                            
                    }
                    
                    #container_sitemap ul li.kopjes{
                            list-style:none;
                    }
                    
                    #container_sitemap ul.footerbalk{
                            margin:45px auto;
                            max-width:980px;
                    }
                    
                    #container_sitemap ul li.footerbalk1{
                            list-style:none;
                            display:inline;
                            margin-bottom:50px;
                            margin-left:10px;
                    }


.krullinkervlak{
        background-color:#399;
        width:193px;
        height:125px;        
        bottom: 0;    
        left:0;
        position:absolute;
        z-index:1000;
}

.krulrechtervlak{
        background-color:#399;
        width:149px;
        height:220px;
        margin-left:693px;
        bottom: 0;    
        left:0;
        position:absolute;
}

.tekst{
    position:relative;
    padding-top:50px;
    z-index:3000;
}
 
Hoi steenbok Eefje,
Deze al eens geprobeerd?
Code: 
[FONT="Courier New"][SIZE="2"]#container_content #content { 
   z-index: 2;
   }
.tekst{
/* z-index: 3000; *** kan weggelaten worden *** */
   }
.krullinkervlak{
   z-index:1;
   }[/SIZE][/FONT]

Met vriendelijke groet,
CSShunter

PS:
De truc met de grote getallen was nogal in omloop in de tijden van IE5 en IE5.5, maar heb ik nooit zo begrepen. Ik heb Internet Explorer veel rare fratsen zien uithalen, maar nooit beter zien reageren op z-index: 2000 / z-index: 1000 dan op z-index: 2 / z-index: 1. De truc werkte vooral bij lieden die loeiveel laagjes maakten, en om er van af te zijn voor de toplaag een hoog z-getal namen dat ze onderweg zeker niet gebruikt hadden. ;)

PS-2:
Ik zou er zeker nog even een
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
bij zetten in de <head>, dan weten alle browsers op dezelfde manier wat ze met alle er op volgende lettertekens in de html aan moeten. Daar worden browsers heel blij van (en de html-validator ook).
Ik zou verder de DOCtype-variant "Strict" nemen, als dat maar enigszins mogelijk is. Meestal is er geen enkele contra-indicatie, als de html correct is.

[edit]O, is het niet Babyfriendlyboltholes i.p.v. botlholes?[/edit]
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan