strano comportamento di un menù con IE7 o IE8 in modalità compatibilità

[sean_von_drake]

ciao a tutti,
sto diventando matto con un menù che in firefox e IE8 funziona benissimo ma con IE7 (o IE8 in modalità compatibilità) dà un problema di sovrapposizione di elementi.

il menù in questione è visibile a questo indirizzo: https://valinor.videoarts.eu/brola.0...e=2&lingua=ITA

per chiarezza, il codice del menù è:

<div id="barraNavigazione">
<ul class="menuPrincipale">
<li class="linksMenuPrincipale">Relais
<li class="linksMenuPrincipale">Camere e suites
<ul class="menuPrincipaleLiv1">
<li class="linksMenuPrincipaleLiv1">Singole
<li class="linksMenuPrincipaleLiv1">Doppie
<li class="linksMenuPrincipaleLiv1">Suites

<li class="ultimoLinkMenuPrincipaleLiv1">Colazione[/list]

<li class="linksMenuPrincipale">Convegni
<li class="linksMenuPrincipale">A tavola
<li class="linksMenuPrincipale">Immagini
<li class="linksMenuPrincipale">Territorio
<li class="linksMenuPrincipale">Come raggiungerci
<li class="linksMenuPrincipale">Tariffe
<li class="ultimoLinkMenuPrincipale">Contatti
[/list]

	</div>

e il css è

.menuPrincipale {
	display: block;
	float: right;
	font-family: bodoni, georgia, serif;
	font-size: 1em;
	font-weight: normal;
	list-style: none;
	margin: 0px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	padding-left: 0px;
}

.menuPrincipaleLiv1 {
	display: block;
	float: right;
	font-family: bodoni, georgia, serif;
	font-size: 1em;
	font-weight: normal;
	list-style: none;
	margin: 0px;
	margin-left: -3px;
	padding-left: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	position: absolute;
	text-align: left;
}

.linksMenuPrincipale {
	border-right: 1px solid #fde094;
	display: block;
	float: left;
	padding-left: 4px;
	padding-right: 4px;
}

.ultimoLinkMenuPrincipale {
	border-right: none;
	display: block;
	float: left;
	padding-left: 4px;
	padding-right: 4px;
}

.linksMenuPrincipaleLiv1 {
	border-right: 1px solid #fde094;
	display: block;
	float: left;
	margin: 0px;
	padding-left: 4px;
	padding-right: 4px;
	position: relative;
}

.ultimoLinkMenuPrincipaleLiv1 {
	border-right: none;
	display: block;
	float: left;
	padding-left: 4px;
	padding-right: 4px;
}

sicuramente è una cavolata ma non riesco a venirne a capo... help!!!

[creon79]

Ho letto che IE7 non supporta il position:relative:

.linksMenuPrincipaleLiv1 {
border-right: 1px solid #fde094;
display: block;
float: left;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
position:relative }

Potrebbe essere quello il problema, in ogni caso mi trovo in una situazione analoga, ho inserito da poco un post simile, qualcuno sa darci una mano? Grazie.

[sean_von_drake]

prova a postare anche il tuo codice, vediamo se ne veniamo a capo

[sean_von_drake]

ecco la cavolata!!!

come è possibile notare dal codice xhtml che ho postato, la sottolista segue direttamente l'ancora della voce principale, entrambi racchiusi nell'elemento lista del menù principale.

ora il punto è questo: il tag A per definizione è un elemento inline; quindi il suo comportamento normale è quello di consentire la disposizione di contenuti sulla destra.

per risolvere il problema è sufficiente aggiungere la proprietà display: block alla classe del tag in modo da forzare la sottolista ad andare a capo; e magicamente il menù torna a posto