[RISOLTO] strano problema css - menu con voci sovrapposte...

[danix]

Ciao a tutti...
sto avendo uno strano problema con un menù orizzontale nelle mie pagine web. Il menù conta 5 voci ed è stilizzato tramite foglio di stile. Il problema sta nel fatto che a volte gli ultimi 2 "bottoni" si mettono sotto ai primi 2 invece di stare sulla stessa riga.
Ho scritto a volte perchè non sono riuscito a capire come fa a presentarsi l'inconveniente e non sono nemmeno in grado di riprodurlo... apparentemente avviene in maniera random... Un altra cosa che mi ha incuriosito è il fatto che basta fare il refresh della pagina perchè tutto torni alla normalità...

Non voglio fare spamming ne promuovere il sito, però se qualcuno volesse dare un'occhiata l'indirizzo delle pagine incriminate è http://www.studioprimopiano.net.


Spero mi saprete aiutare...
Ciau

[conraid]

a me ha sempre funzionato normalmente.
nel senso che ho ricaricato varie volte e sempre ok

ma vedo che mescoli display:table, display:block, float:left
farla sembrare una tabella non ti serve a niente e nemmeno usare il float

Questo è quello che ho usato io per slackers.it (tieni presente che il position:relative c'è per il form di ricerca, altrimenti non serviva)

Codice: Seleziona tutto

#menu {
   position: relative;
   margin: 0;
   padding: 0;
   text-align: left;
   background: #535353 url('images/menubg.gif') repeat-x bottom;
   width: 100%;
   font-size: smaller;
}

#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   padding: 10px 0;
   margin-right: 20px;
}
#menu ul li {
   display:inline;
   letter-spacing: 1px;
   text-align: center;
}
#menu ul li a {
   margin: 0px;
   padding: 10px;
   color: #eee;
   text-decoration:none;
   font-weight: bold;
}

#menu ul li a:hover {
   background-image : url('images/background2.jpg');
   background-color: #e4e4e4;
   color: #333;

}

Se vuoi usare due immagini, falla diventare una sola e poi fai qualcosa tipo, così eviti l'attesa del caricamento

Codice: Seleziona tutto

#menu ul li a {
   background : url('images/background2.jpg') top;
}

#menu ul li a:hover {
   background : url('images/background2.jpg') bottom;

}

[danix]

non ci capisco nulla neanche quì... non riesco a replicarlo, a volte mi succede nella pagina del form di contatto, a volte nella home, a volte nella galleria... poi un refresh e tutto torna normale...

in locale non mi è mai successo...

[danix]

IE non presenta questo problema, e nemmeno konqueror... Opera e FF si invece...

@conraid:
sto provando a semplificare il css del menu in alto, ma se tolgo il display:table il menu se ne va sulla sinistra... non riesco a farlo stare al centro correttamente...


grazie dell'aiuto...

[EDIT]
dovrei aver risolto...
ho alleggerito non poco il css riguardante quel menu... ho seguito in parte quello che mi hai consigliato tu, e in parte sono andato di testa mia...
Il problema era il display:block che spostava tutto sulla sinistra dandogli il float:left...
Ho tolto quelle proprietà e ho lavorato con il padding per rendere i link grandi abbastanza da mostrare lo sfondo del pulsante per intero, display:inline e il gioco è fatto...


Grazie dei suggerimenti, spero che questo problema sia chiuso, quindi metto risolto al titolo del post... domani mattina verifico da FF3 su icspi e vedo come va...


PS
se avete suggerimenti o critiche fateli pure, magari in pm per non andare ot ma io li accetto tutti e li tengo in grande considerazione...

[conraid]

sto provando a semplificare il css del menu in alto, ma se tolgo il display:table il menu se ne va sulla sinistra... non riesco a farlo stare al centro correttamente...

Non ho visto come hai risolto, ma un "blocco" si centra dando text-align:center al blocco superiore, e mettendo margin: 0 auto; a quello interessato.
In questo caso prende 0 come mergine verticale (puoi metterci quel che vuoi) e aggiusta da solo i mergini orizzontali per soddisfare la richiesta del blocco superiore che vuole tutto centrato.

[danix]

Non ho visto come hai risolto,

Codice: Seleziona tutto

        <div id="topmenu">
          <ul>
              <li class="current"><a href="index.php?p=home"><strong>home</strong></a></li>
              <li><a href="index.php?p=gallerie"><strong>gallerie</strong></a></li>
              <li><a href="index.php?p=prodotti"><strong>prodotti</strong></a></li>
              <li><a href="index.php?p=contatti"><strong>contatti</strong></a></li>
              <li><a href="index.php?p=studio"><strong>studio</strong></a></li>

          </ul>
        </div>


Codice: Seleziona tutto

#topmenu {
 margin:0;
 padding:0;
 text-align:center;
 width:100%;
}

#topmenu ul {
 margin:0; padding:10px 0;
 list-style:none;
 height:35px;
 font-size:11px;
}

#topmenu ul li {
 margin:;
 height:35px;
 line-height:30px;
 display:inline;
 text-align:center;
}

#topmenu ul li a {
 margin:0;
 padding:10px;
 text-decoration:none;
 cursor:pointer;
 background:url(../images/menu/pro_six_0a.gif) no-repeat;
}

#topmenu ul li a strong {
 padding:10px 20px 10px 10px;
 background:url(../images/menu/pro_six_0b.gif) no-repeat right top;
}

#topmenu li.current a {
 color:#fff;
 background:url(../images/menu/pro_six_2a.gif) no-repeat;
}

#topmenu li.current a strong {
 background:url(../images/menu/pro_six_2b.gif) no-repeat right top;
}

#topmenu li a:hover {
 color:#fff;
 background: url(../images/menu/pro_six_1a.gif) no-repeat;
}

#topmenu li a:hover strong {
 background:url(../images/menu/pro_six_1b.gif) no-repeat right top;
}

#topmenu li.current a:hover {
 color:#fff;
 background: url(../images/menu/pro_six_2a.gif) no-repeat;
 cursor:default;
}

#topmenu li.current a:hover strong {
 background:url(../images/menu/pro_six_2b.gif) no-repeat right top;
}



ma un "blocco" si centra dando text-align:center al blocco superiore, e mettendo margin: 0 auto; a quello interessato.
In questo caso prende 0 come mergine verticale (puoi metterci quel che vuoi) e aggiusta da solo i mergini orizzontali per soddisfare la richiesta del blocco superiore che vuole tutto centrato.

si, questo lo sapevo... solo che avendo dato display:block e float:left ai <li> non mi permetteva di farli stare al centro... ho parzialmente riscritto il css interessato e adesso funziona come puoi vedere...


Ancora grazie mille per l'aiuto...