problema allineamento tendine

[barbarina]

Mi segnalano che il sito www.pernondimenticare.net/nuovo sito ha questo problema:
Tendine & co.: sia con Explorer sia con Safari (e derivati Mozilla)
purtroppo non è cambiato niente. La prima metà della parola del bottone
fa scendere la tendina del bottone precedente; cercare di mettere il
puntatore su uno dei contenuti di una tendina è - letteralmente - come
cercare di prendere del mercurio tra le dita.
Proposta. Le tendine sono solo una raffinatezza: se funzionano non
aggiungono molto alla leggibilità del sito, se funzionano male invece
la peggiorano assai
in locale a me funziona bene con Esplore, un po' meno con firefox e in opera ha un problema con il block sull'intetstazione che rinvia alla home.
il css è questo:

menu.css

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
div#hormenu {
margin: 0;
background: transparent url(sfondo_fcopia.gif) no-repeat scroll 0%;
width: 100%;
height: 107px;
float: left;
padding-top: 0;
text-align: left;
}
div#hormenu ul {
margin: 0;
padding-top: 82px;
list-style-type: none;
}
div#hormenu li {
margin: 0;
padding: 0;
width: 123px;
height: 18px;
float: left;
}
div#hormenu a {
padding: 5px;
display: block;
text-decoration: none;
font-weight: bolder;
font-size: 75%;
text-align: left;
}
div#hormenu a:hover {
width: 100%;
height: 100%;
text-decoration: underline;
font-weight: bold;
}
div#hormenu li ul {
display: none;
}
div#hormenu li:hover ul {
margin: 0px 0pt 0pt 0px;
background: transparent none repeat scroll 0%;
position: absolute;
display: block;
z-index: 1;
width: 123px;
PADDING: 0;
color: black;
font-weight: bold;
}
div#hormenu li li {
width: 123px;
background-color: #E2E2E2;


filter:alpha(opacity=.90);


-moz-opacity:0.90;
opacity:.90;






position: relative;
}
div#hormenu li li a {
padding: 2px 2px 2px 5px;
}
.alt {
background: transparent none repeat scroll 0%;
visibility: hidden;
}
div#home {
background: white none repeat scroll 0%;

filter:alpha(opacity=.0);


-moz-opacity:0.0;
opacity:.0;
position: absolute;
display: block;
top: 40px;
height: 50px;
left: 180px;
width: 500px;
}
#home a {
display: block;
width: 100%;
height: 100%;
}
<-- fine css-->

Sono una neofita, quindi chiede venia, olre che aiuto.
Grazie.

[barbarina]

up!

[Mich_]

Devi definire cosa sono per te le tendine.
Per qualcuno sono i campi di input tipo select,
per altri sono dei menu che scendono,
ma ci possono essere altri significati ...

Il link da te postato non funziona.
Funziona il sito base (senza il /nuovo), ma non ho visto tendine

[barbarina]

hai ragione, scusa.
il sito è
www.pernondimenticare.net/nuovosito

per tendine intendo menu a discesa sotto la barra di navigazione.

Grazie
Barbara

[Mich_]

Ho visto la pagina.

Ci sono degli errori HTML, che pero` non sono implicati nel problema:
<a> con attribtuo alt (non esiste quell'attributo, devi usare il title)
class="alt" (non e` buona cosa usare dei nomi usati dal DOM)


Invece vedo problematico l'uso che fai del position dentro i menu.
position: absolute;
sarebbe assolutamente da evitare; inoltre con l'absolute e` necessario definire anche top e left nello stesso blocco;

position: relative;
puoi usarlo, ma anche qui agisce sui top e left, che invece non vedo.

Ti consiglierei di provare a toglierli, e vedere l'effetto che fa.

[barbarina]

Peggio che andar di notte, la testata si muove tutta, sia in ie che in firefox.
Grazie comunque

[barbarina]

Ho aggiustato qualcosa:
qualcuno può per favore dargli un'occhiata e darmi un parere?

www.pernondimenticare.net/nuovosito

menu.css
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
div#hormenu {
margin: 0;
background: transparent url(sfondo_fcopia.gif) no-repeat scroll 0%;
width: 100%;
height: 107px;
float: left;
padding-top: 0;
text-align: left;
}
div#hormenu ul {
margin-left: -30px;
/margin: 0;
padding-top: 72px;
/padding-top: 82px;
list-style-type: none;
}
div#hormenu li {
margin: 0;
padding: 0;
width: 123px;
height: 18px;
float: left;
}
div#hormenu a {
padding:0;
/padding: 5px;
display: block;
text-decoration: none;
font-weight: bolder;
font-size: 75%;
text-align: left;
}
div#hormenu a:hover {

width: 100%;
height: 100%;
text-decoration: underline;
font-weight: bold;
}
div#hormenu li ul {
display: none;
}
div#hormenu li:hover ul {
margin: 0px 0pt 0pt 0px;
background: transparent none repeat scroll 0%;
position: absolute;
display: block;
z-index: 1;
width: 123px;
PADDING: 0;
color: black;
font-weight: bold;
margin: 0 0 0 -1px;
}
div#hormenu li li {
width: 123px;
background-color: #E2E2E2;
opacity: 0.90;


}
div#hormenu li li a {
padding: 2px 2px 2px 10px;
}



.nascosto {
background: transparent none repeat scroll 0%;
visibility: hidden;
}
div#home {
background: trasparent none repeat scroll 0%;
/background: White none repeat scroll 0%;
opacity: 0.00;
position: absolute;
display: block;
top: 40px;
height: 50px;
left: 180px;
width: 500px;

}
#home a {display: block;
width: 100%;
height: 100%;
}

[Mich_]

Adesso (FF sotto linux) la prima riga del menu si vede due volte: una in bianco su fondo rosso, ed una in azzurro leggero, scompare quasi.

La riga azzurra e` spostata verso destra della quantita` che prima era solo virtuale, e i menu si aprono sotto la riga azzurra (in pratica allo stesso posto di prima).

Altro problema: le news non ci stanno per cui il suo blocco va a capo e si posiziona sotto ala scritta "chisiamo" (io uso un carattere un po' piu` grande del solito: uso un pixel piuttosto piccolo).

[barbarina]

nel mio parzialissimo debug (ho usato firefox su windows) la pagina viene visualizzata normalmente, si tratta tra l'altro di un layout progressivo ricavato da un articolo su pro.html.it.
Solo in opera ho un comportamento "ballerino" e una traslazione, dovuta la margin negativo, sulle tendine.
Il problema è capire come lo visulaizza chi adopera mac, e non sono proprio pochissimi.
Grazie comunque.

[barbarina]

up!