z-indexy pod ie6/ie7 zgłupiały, bug, który nie wiadomo jak rozwiązać Opcje

[Fo]

Witam,

Dopiero co pomógł mi mortus na forum xml,ajax a już mam drugi problem, którego znowu nie mogę pokonać.

Trochę kodu:

[CSS] pobierz, plaintext 
#tabs .container {background:url(images/bg-container.jpg) repeat-x;padding:10px 0px 10px 10px;border:1px solid #ccc;position:relative;z-index:1;}
#tabs .col {list-style:none;margin:0;padding:0;}
#tabs .col li {float:left;width:240px;position:relative;}
#tabs .col li a {position:relative;z-index:1;}
#tabs .col .layer {position:absolute;}
#tabs .col .showit {background:red;width:500px;height:100px;display:block;position:absolute;top:0;left:0;z-index:100;}
#tabs .col .hideit {display:none;position:absolute;top:0;left:0;}
.clear {clear:both;font-size:0;}
[CSS] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 
$(document).ready(function(){
 
		$("#tabs .trigger").click(function(){
                        $(this).parent().find(".hideit").switchClass('hideit', 'showit', 200);
                        $(this).parent().find(".showit").switchClass('showit', 'hideit', 0);
			return false;	
		});
                $(".hideit").mouseout(function() {
                        $(this).switchClass('showit', 'hideit', 0);
                });
 
});
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
	<div id="tabs-2">
    <!-- container -->
    <div class="container">
		<ul class="col">
        	<li>
            	<a href="#" class="trigger">This is link</a>
                <span class="layer hideit">
                this is layer
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">This is other link</a>
                <span class="layer hideit">
                    to jest dupka
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">This is another link</a>
                <span class="layer hideit">
                    to jest dupka
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">And another one</a>
                <span class="layer hideit">
                here the same
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">and so on..</a>
                <span class="layer hideit">
                and here also
                </span>                
            </li>
 
        	<li>
            	<a href="#" class="trigger">This is link</a>
                <span class="layer hideit">
                this is layer
                </span>
            </li>
            <li>
            	<a href="#" class="trigger">This is other link</a>
                <span class="layer hideit">
                this is layer too
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">This is another link</a>
                <span class="layer hideit">
                and this is another
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">And another one</a>
                <span class="layer hideit">
                here the same
                </span>                
            </li>
            <li>
            	<a href="#" class="trigger">and so on..</a>
                <span class="layer hideit">
                and here also
                </span>                
            </li>
 
        	<li>
            	<a href="#" class="trigger">This is link</a>
                <span class="layer hideit">
                this is layer
                </span>
            </li>            
        </ul>
    <div class="clear"></div>   
    </div>
    <!-- //container -->
    <div class="clear"></div>
	</div>
 
[HTML] pobierz, plaintext 

Problem dotyczy IE6/IE7 - IE8 już nie.
Zobaczcie sobie jak to działa pod FF, nie zapomnijcie dołączyć sobie jquery bo ta warstwa się pokazuje dopiero po kliknięciu - czyli jquery niezbędne.

W momencie jak klikam na jakiś link to się pokazuje warstwa i ona przykrywa wszystko swoją szerokością i wysokością.
Niestety w IE6/IE7 jest jakby prześwit pozostałych linków i nie wiem jak to poprawić.

Z góry dziękuje za pomoc!

ps. chyba w złe forum wstawiłem ten temat, raczej powinien być w CSS - przepraszam i proszę o przeniesienie o ile trzeba.

Ten post edytował Fo 17.04.2010, 17:18:13

[pedro84]

Powinno być:

[CSS] pobierz, plaintext 
#tabs .col li a {position:relative;z-index:1;}
[CSS] pobierz, plaintext 

Tutaj zobacz jakie wartości może przyjmować display. Powinno pomóc.

[Fo]

tak faktycznie - pomyliłem display z position - już to poprawiłem w poście - ale to nadal nie pomaga pod ie6/ie7

dobra już znalazłem rozwiązanie dla problemu z-indexów pod ie6/ie7 - dla zainteresowanych: http://snipplr.com/view.php?codeview&id=18675