problema css internet explorer

**bugone** · 15-09-2005, 10:11

Salve, volevo trovare una soluzione a questo mio problema...

praticamente questo codice semplice che sto realizzando per una pagina web che mi permette di ottenere dei menu a tendina sulla sinistra, (tralasciando il codice relativo ai css)
mi da problemi con internet explorer, mentre con firefox funziona perfettamente.

il problema è esattamente in questo punto

codice:

<div id="menu_3_sottomenu" class="sottoelemento" style="display:none">
<li id="menu_4">voce4
<li id="menu_5">voce5
</div>

l'id è utilizzato come identificatore del nome del menu (non per i css, ma serve a me), mentre la class sottoelemento è utilizzato per i css.

se al posto dei "div" della classe sottoelemento utilizzo uno span, funziona tutto correttamente anche su IE (anche se lo span non è fatto per contenere altri tag al suo interno).
Volevo sapere la soluzione migliore da poter adottare per realizzare il tutto in modo lineare e funzionante.
Grazie mille

Allego tutta la pagina qui di seguito, sempre senza codice css:

codice:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.:titolo:.</title>

<style type="text/css">@import url(stile.css);</style>

<script language="javascript" type="text/javascript">

function nodo(id)
{
	invertiElemento(id+'_sottomenu');
}

function invertiElemento(id)
{
	var l=document.getElementById(id);
	if(l.style.display=="none")
	{
		l.style.display="block";
	}
	else
	{
		l.style.display="none";
	}
}

</script>
</head>
<body>
<div id="contenitore">

<div id="testa"></div>
<hr/>
<div id="corpo">
<div id="menu">
<h2>Menu</h2>
<ul>
<li id="menu_1">voce1
<li id="menu_2">voce2
<li id="menu_3">voce3
<div id="menu_3_sottomenu" class="sottoelemento" style="display:none">
<li id="menu_4">voce4
<li id="menu_5">voce5

</div>[/list]
</div>
<hr/>

<div id="corpo2">
<h1>Titolo</h1>


prova

paragrafodi prova
</P>
</div>

</div>
<hr/>
<div id="bannerpiede"></div>
<div id="piede"></div>
</div>
</body>
</html>

**Mich_** · 15-09-2005, 10:57

Mi pare che l'innestamento dei blocchi sia errato (dal punto di vista logico e semantico).

Io userei:

codice:

...
  <li id="menu_3">voce3

    <span id="menu_3_sottomenu" class="sottoelemento" style="display:none">qualcosa</span>
  <li id="menu_4">voce4

Il
puo` anche non esserci (ma non so come vuoi che appaia).
Sicuramente il <div> dentro un[*] non ci sta bene (un blocco con display:block; dentro uno con display:qualcos'altro; potrebbe dare problemi).

In alternativa, sarebbe meglio:

codice:

...
  <li id="menu_3">voce3<ul id="menu_3_sottomenu" class="sottoelemento" style="display:none">[*]qualcosa...[/list]
  <li id="menu_4">voce4

**bugone** · 15-09-2005, 11:44

ottimo grazie...

ora pero che funziona questa parte, con il codice qui di seguito riportato

codice:

<div id="menu">
<h2>Menu</h2>
<ul>

<li id="menu_1">voce1
<li id="menu_2">voce2

<li id="menu_3" class="elementocontenitore">voce3
<ul id="menu_3_sottomenu" class="sottoelemento" style="display:none">
	<li id="menu_4">sottovoce1
	<li id="menu_5">sottovoce2[/list]
[/list]
</div>

non capisco cosa e dove sbaglio sui css... (considerando la mia conoscenza non troppo elaborata in materia)

codice:

div#menu {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	PADDING-RIGHT: 20px;
	PADDING-LEFT: 30px;
	PADDING-BOTTOM: 10px;
	PADDING-TOP: 10px;
}

div#menu ul{
	display: block;
	margin: 10px 0px 10px 0px;
	list-style-type: none;
	text-align: left;
	padding-left: 15px;
}

/*da qui ho qualche problema*/

div#menu ul li{
	display: block;
	margin: 2px 0px 0px 0px;
	list-style-image: url(img/freccia.gif);
}

div#menu ul li.elementocontenitore a:link{
	display:block;
	color: Black;
}

div#menu ul ul.sottoelemento{
	margin-left: 10px;
	display: none;
}

i problemi che mi da sono: l'immagine dell'elenco viene visualizzata solo da IE e non da firefox, elementocontenitore non è nero...
e sottoelemento non è display:none... e cosi lo devo settare con style... da codice html...

Grazie ancora e scusa il disturbo

Enrico

**Mich_** · 15-09-2005, 12:04

Anzitutto una nota sull'innestamento. L'<ul> interno deve stare dentro il[*], non fuori da esso. Inoltre non usare href="javascript ...", ma il piu` corretto onclick:

codice:

  <li id="menu_3" class="elementocontenitore">voce3
    <ul id="menu_3_sottomenu" class="sottoelemento" style="display:none">
      <li id="menu_4">sottovoce1
      <li id="menu_5">sottovoce2[/list]
  
...

Poi mi sembra che ti perdi con l'innestamento nei CSS.
Dato che usi le classi (ae immagino che non le riusi in altri posti), ti conviene far riferimento a quelle:

codice:

div#menu ul li{
	display: block; /* qui andrebbe list-item (o non metterlo) */
	margin: 2px 0px 0px 0px;
	list-style-image: url(img/freccia.gif);
}

li.elementocontenitore a:link{
	display:block; /* questo e` sbagliato: non puoi mettere un blocco dentro un list-item */
	color: Black;
}

ul.sottoelemento{
	margin-left: 10px;
	display: none;
}

Ma hai guardato i menu gia` fatti che ci sono nelle pagine citrate nei "link utili"? Queste cose sono gia` risolte.

**bugone** · 15-09-2005, 12:52

uhm per l'elenco ora funziona grazie!

pero non funziona ancora il clore di "elementocontenitore" e non riesco a capire perche...
e non funziona neanche il menu chiuso... con block:none; da css e non direttamente da html... che strano! è come se non utilizzasse correttamente quelle due classi...

se vuoi dare un occhio alla pagina all'opera (anche se non so se si puo... ma ci provo :P in caso la cancello subito dopo)

www.bugone.com/nuovo

(tralascia le scatole colorate che sono solo come riferimento per me)

beh... per quando riguarda onclick... mi piaceva di piu javascript:esegui()
perche non mi cambia l'url nella barra degli indirizzi, con "urlprecedente + #"
che mi complicherebbe un po le cose per altri script che inserirei nel sito...

grazie mille ancora

(ah dimenticavo... beh facendo le cose si affrontano i problemi e magari da fastidio farsi aiutare ed aiutare ad esempio da parte tua :P , pero si capisce meglio e ci si "accultura di piu"... :P se le prendo gia pronte che gusto c è? e poi non imparo niente :P )

Enrico

**Mich_** · 15-09-2005, 14:47

perche non mi cambia l'url nella barra degli indirizzi, con "urlprecedente + #"

Se ci metti il return false; (vedi mio ultimo esempio) questo non succede.

Comunque ci sono probelmi di sintassi in quella pagina. Tu dichiari di usare XHTML 1.0 Strict, ma la pagina e` in Transitional; questo puo` dare problemi.

Mi pare pero` che ci sono problemi con l'ordine dei CSS: una direttiva sovrascrive sempre una che precede, per cui occorre iniziare sempre dagli elementi piu` generali e poi scendere nei particolari.

**bugone** · 15-09-2005, 16:48

ottimo,
grazie ancora, ora è una pagina validata xhtml strict ed ha la funzione javascript sull'event handler onclick.

Ho provato un po' a vedere dove sbaglio la gerarchia dei css ma non ne vengo fuori...
non capisco perche non riesco a far diventare nera la voce contenente le altre due uff
e non capisco perche il blocco sottomenu non è di default display:none; tramite css

**bugone** · 16-09-2005, 10:45

nessuno saprebbe aiutarmi per le due classi
"sottoelemento" ed "elementocontenitore" su www.bugone.com/nuovo ?

grazie mille

Enrico

Discussione: problema css internet explorer

Strumenti discussione

Ricerca discussione

Visualizza

problema css internet explorer

Permessi di invio