Ie6 e problemi con menu css

**francylosvitato** · 18-03-2011, 20:22

Salve a tutti...
ho cercato già, ma non riesco a trovare soluzione.
Ho un sito dove ho inserito un menu css orizzontale, la classica lista <ul> con i sottoelementi.
Ho impostato lo z index di quest ultima a 9999, e la position a relative. Tutto ok con chrome, mozilla e ie7 +. Il problema, gigante, è con ie6. Il menu va sotto gli altri elementi della pagina. Se metto lo z index di questi elementi a -1, con position relative, tutto ok, ma perdo completamente i collegamenti ipertestuali negli altri browser. Non so come risolvere, il codice è nel sito online non credo di poter postare il link perchè farei pubblicità al sito stesso. In caso vi posto gli spezzoni di codice richiesti.
Grazie mille
Fra

**simo22** · 18-03-2011, 20:31

Prova ad abbassare lo z-index. Forse ie6 non gestisce zindex così alti.

**yeelach** · 18-03-2011, 20:55

Ciao francylosvitato.

Una domanda ma i tuoi div contengono position:absolute ?
Se si hai ragione di utilizzare lo z-index, ma se stai usando un posizionamento relativo, e la struttura segue un normale flusso senza sovrapposizioni è inutile usare lo z-index.
Prova ad eliminarlo e vedi che risultato ti dà, in alternativa posta il link al menu, che gli do un occhiata in firebug.

**francylosvitato** · 21-03-2011, 15:12

il position è stato messo dove serviva, come nel menu e non so se devo metterlo anche nei contenuti posti "sotto" il menu in questione. Comuqnue posto qui dei pezzi del codice in questione, dove vedete '####' è perchè ho oscurato i riferimenti al cliente... grazie mille

codice:

<body id="page1">

<header>
   	  <div class="container_24">
  			<p align="right">[img]images/star.png[/img]Aggiungi ai preferiti</p>
    <h1>######.Com <span style="font-size:16px;">™ - Roma - Milano - Torino - Palermo</span></h1>
    
    <form id="search" method="post" action="ricerca.php">
      <fieldset id="find">

        <div> <span class="bg">
           
<input class="find" type="text" name="whatdoreplace" value="Ricerca rapida" onClick="(this.value='')" onFocus="if(this.value=='Ricerca in corso...'){this.value=''}" onBlur="if(this.value==''){this.value='Ricerca in corso...'}"/>
          </span> 
         </div>
</fieldset>
    </form>
   
    <nav>
<span id="logo_index">[img]images/logo.png[/img]</span>
  <ul class="menu5">

	<li class="principale">Home
	<li class="principale">Deposito    
	<li class="principale">Traslochi
	
	<ul>
		<li class="subprod">Trasloco 4 Four
		<li class="subprod">Trasloco Facile

		<li class="subprod">Trasloco You &amp; Me   
		<li class="subprod">Economy                
		<li class="subprod">Trasloco Confort                        
		<li class="subprod3">Traslochi 
		
		<ul>
			[*]Traslochi in Citt&agrave;

			[*]Traslochi Italia
			[*]Traslochi Europa
			[*]Traslochi Groupage
		[/list]
		
		
	[/list]

	
	
	<li class="principale">Altri Servizi
	
	<ul>
		<li class="Traslocare_FACILE.php">Trasporto Pianoforti
		<li class="subprod">Trasporto Casseforti

		<li class="subprod">Trasporto Opere                          
		<li class="subprod3">NoloFacile.com
		
		<ul>
			[*]Nolo Piattaforme
			[*]Nolo Scale Aeree 
		[/list]
		

		
	[/list]
	
	
	<li class="principale">Preventivo online           
	<li class="principale" id="lasttttt">Contattaci    [/list]



<ul class="site-menu">[*]NoloFACILE.com
  <li class="middle">Parco macchine
  <li class="middle">Shop on line
  <li class="middle"> 4 - Four
  <li class="last">#####.Com
[/list]</nav> 
   <ul class="social">[*][img]images/facebook.png[/img][*][img]images/ita.png[/img][*][img]images/eng.png[/img][*][img]images/fra.png[/img][/list]
    
    
    	<div class="box1">
                <div id='coin-slider'>
            <a href="#" target="_blank">

               [img]images/header_box-1.jpg[/img]
                 
            </a>
         
            <a href="#">
               [img]images/header_box-3.jpg[/img]
                
            </a>
            
             <a href="#">
               [img]images/header_box-2.jpg[/img]
                
            </a>	
        </div>

        
     	
   		</div>
         
    
  </div>
  
</header>

questo è l header, poi dopo c'è il content, ne posto un pezzo giusto per far capire la struttura del sito.

codice:

<div class="wrapper">
  
  <section id="content" class="wrapper">
    <div class="container_24">
      <article class="p1-cont">

        <div class="grid_18">
          <div class="top1">
          <div class="clear"></div>
            <div class="grid_6 ">
              <div class="inner">
                <h4 class="title6">Preventivo on line IN 5 MINUTI</h4>
                

Richiedi subito un preventivo on line, gratuito e senza impegno.</p>
                

Go... !</p>

                

</p>
    
              </div>
            </div>
             <div class="grid_1">

        </div><div class="grid_1">

        </div><div class="grid_6 alpha omega">
              <div class="inner">
                <h4 class="title33">Telefonaci 24 h no stop</h4>

         <ul class="list11">[*]Roma <span class="spacing">[img]images/telefona.jpg[/img] 06  </span> [*]Milano <span class="spacing">[img]images/telefona.jpg[/img] 02  </span>[*]Torino <span class="spacing">[img]images/telefona.jpg[/img] 011  </span>
[*]Palermo <span class="spacing">[img]images/telefona.jpg[/img] 091  </span>                            
			[*]Fax UNICO<span class="spacing">[img]images/telefona.jpg[/img] 06  </span> 
			[*]<span class="spacing">info@######.Com
		[/list]

tutto ciò che è dentro <header> viene correttamente oscurato al passaggio del mouse sopra il menu (e quindi all'apertura degli elementi della lista), invece per gli elementi presenti da wrapper in giù funziona solo su mozilla, chrome e IE nuovi, su ie 6 il menu si interrompe all'inizio del div wrapper, posizionandosi quindi sotto al div stesso.

grazie
Fra

**francylosvitato** · 22-03-2011, 12:17

uppino!

**francylosvitato** · 22-03-2011, 23:28

ho provato a mettere delle istruzioni condizionali per ie 7, del tipo

codice:

<!--[if lte IE 7]>
<style type="text/css">
 
.box1 { z-index:-1; }
 .coin-slider { z-index:-1;}
h4, h5, h6 {
	z-index:-1; position:relative; }

.list6 li{
z-index:-1;

 }

.grid_16, .grid_10, .grid_8, .grid_7 {
	z-index:-1;
	position:relative;
}

a {
z-index:999999;!Important
}
 
 

</style>
<![endif]-->

il risultato è che ora il menu viene correttamente posizionato al di sopra di tutti gli altri elementi della pagina, ma si sono disabilitati tutti i collegamenti ipertestuali. Non capisco perchè ie non capisca i z-index settandoli ad un valore inferiore dello z-index del menu in questione, ed invece accetti z-index:-1.

grazie,
Fra

**MaxSimon** · 23-03-2011, 15:09

IE non lavora molto bene con gli z-index: forse ti può essere d'aiuto questa discussione.

Ciao.

**francylosvitato** · 23-03-2011, 22:57

grazie del consiglio, ora ho provato con position:static ma non cambia molto, che stress questo ie...
comunque è la versione 7 che mi da problemi, per il resto si vede bene ovunque.

Discussione: Ie6 e problemi con menu css

Strumenti discussione

Ricerca discussione

Visualizza

Ie6 e problemi con menu css

Permessi di invio