Menu a tendina (drop down menu) non funzionante con IE

[davidl77]

Ciao.

Ho relaizzato un prototipo su un menù a tendina con icone.
Purtroppo su Firefox la disposizione è corretta, mentre su IE no.

Potete per favore aiutarmi a cpire il problema?

Questo è il codice CSS:

family:verdana, arial, helvetica, sans-serif; font-size:76%; color:#000; 
padding:0; border:0; margin:0; 
repeat-x center top; 
text-align:center;
width: 100%;
}

.containermenu {
text-align:center; 
background:#eee url(menutext.gif); 
border:1px solid #909; 
border-width:5px 1px 1px 1px; 
height:30px;
width:900px;
margin:0 0 20px 0; /* for this demo only */
}
.menuicon {
text-align:left; 
font-family: verdana, sans-serif; 
position:relative; 
font-size:0.85em; 
background:transparent; 
width:200px; 
height:30px; 
margin:0;
border:0;
padding:0;
}
.menuicon ul {
padding:0; 
margin:0; 
list-style-type: none;
}
.menuicon ul li {
float:left; 
position:relative;
padding:9px 9px 9px 9px; 
margin:8px 8px 8px 8px ;
}
.menuicon ul li.book {background:transparent url(book_go.png) no-repeat;}
.menuicon ul li.subprod {background:transparent url(webcam_delete.png) no-repeat;}


.menuicon ul li:hover a,
.menuicon ul li a:hover {
color:#c00; 
border:1px  solid;
/*padding:9px 9px 9px 9px; 
margin: 6px 0px 0px 0px; */
}

.menutext {
text-align:left; 
font-family: verdana, sans-serif; 
position:relative; 
font-size:0.85em; 
background:transparent; 
width:800px; 
height:30px; 
margin:-30px 30px ;
}
.menutext ul {
padding:0; margin:0; list-style-type: none;
}
.menutext ul li {
float:left; position:relative;
}
.menutext ul li.book {background:transparent url(book_go.png) no-repeat;}
.menutext ul li.home {background:transparent url(menu4home.gif);}
.menutext ul li.products {background:transparent url(menutextproducts.gif);}
.menutext ul li.services {background:transparent url(menutextservices.gif);}
.menutext ul li.contact {background:transparent url(menutextcontact.gif);}
.menutext ul li.site {background:transparent url(menutextsite.gif);}

.menutext ul li a, .menutext ul li a:visited {
display:block; text-decoration:none; width:70px; height:30px; color:#000; padding-left:30px; line-height:29px;
}
* html .menutext ul li a, .menutext ul li a:visited {
width:100px; w\idth:70px;
}

.menutext ul li ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menutext table {
margin:-1px; border-collapse:collapse; font-size:1em;
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menutext ul li:hover a,
.menutext ul li a:hover {
color:#c00; text-decoration:underline; border:0;
}
.menutext ul li:hover ul,
.menutext ul li a:hover ul {
visibility:visible; width:170px; height:auto; position:absolute; top:30px; left:-1px; background:#fff; border:1px solid #909; overflow:visible;
}
.menutext ul li:hover ul li a,
.menutext ul li a:hover ul li a {
display:block; background:transparent; text-decoration:none; color:#c00; height:auto; line-height:1.5em; padding:5px 10px 5px 35px; width:170px; w\idth:125px;
}
.menutext ul li:hover ul li a.drop,
.menutext ul li a:hover ul li a.drop {
display:block; color:#000; height:auto; line-height:1.5em; padding:5px 10px 5px 35px; width:170px; w\idth:125px;
}
.menutext ul li:hover ul li ul,
.menutext ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden;
}
.menutext ul li:hover ul li a:hover,
.menutext ul li a:hover ul li a:hover {
color:#00f; text-decoration:underline;
}
.menutext ul li:hover ul li:hover ul,
.menutext ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#000; left:166px; height:auto; border:1px solid #909;
}
.menutext ul li:hover ul li:hover ul.left,
.menutext ul li a:hover ul li a:hover ul.left {
left:-166px;
}
.menutext ul li:hover ul li:hover ul li a,
.menutext ul li a:hover ul li a:hover ul li a {
display:block; color:#00f; height:auto; line-height:1.5em; padding:5px 10px 4px 35px; width:170px; w\idth:140px;
}
* html .menutext ul li a:hover ul li a:hover ul li a {padding:4px 10px 4px 35px;}

.menutext ul li:hover ul li:hover ul li:hover a,
.menutext ul li a:hover ul li a:hover ul li a:hover {
color:#000; text-decoration:underline;
}

Questo l'html:

<!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" lang="en" xml:lang="en">
<head>

<link rel="stylesheet" media="all" type="text/css" href="menu4.css" />


<title> TEST </title>
</head>
<body>
<div class="containermenu">
<div class="menuicon">
<ul>
	<li class="book"> 
	<li class="book">
	<li class="book" > 
	<li class="subprod" onclick = "alert('mao';)"> [/list]
</div>

<div class="menutext">
<ul>

	<li class="home">Home
	<li class="products">Products
	
	<ul>

		<li class="subprod">Mobiles
		<li class="subprod2">Photoframes
		<li class="subprod2">Tripods
		<li class="subprod">Memory cards
		<li class="subprod3">Cameras
		

		<ul>
			<li class="subsubl">SLRs
			<li class="subsubl">Compact
			<li class="subsubl">Digital
			<li class="subsubl">Video
		[/list]
		

		
		<li class="subprod2">Camcorders
		<li class="subprod">Accessories
	[/list]
	
	
	<li class="services">Services

	
	<ul>
		<li class="subserv4">Photography
		<li class="subserv3">Video editing
		<li class="subserv">Web site Design and Hosting
		<li class="subserv5">Reference guides
		<li class="subserv2">Tutorials

	[/list]
	
	
	<li class="contact">Contact us
	<li class="site">Site Map
	<li class="news">News
	

	<ul>
		<li class="subnews3">Breaking
		<li class="subnews">Latest
		<li class="subnews">May 2006
		<li class="subnews2">News Archives and Articles
		
		<ul class="left">

			<li class="subsubr">April 2006
			<li class="subsubr">March 2006
			<li class="subsubr">February 2006
			<li class="subsubr">January 2006
		[/list]
		
		

	[/list]
	
	[/list]
</div>
</div>
</body>
</html>

Potete trovarlo anche sul mio sito:
http://www.sspsolutions.net/TEST/MENU.HTML
(se vi serve).

Grazie mille,
ciauz!!

[Razorblade]

Ciao,
è il destino di ogni webdesigner/deleveloper/master prima o poi arrivare a questo problema .
Te lo dico in sincerità, ho guardato il risultato finale ma non il tuo codice, ma ad occhio posso dire che il problema è dato dai differenti valori di default di alcuni attributi css tra i vari browser.

Potrei stare qui a scrivere MOLTO a riguardo, ma piuttosto preferisco lasciarti 2 link dove ho già parlato di queste problematiche.

Il primo riguarda il reset dei css un'insieme di classi da inserire in cima al proprio foglio di stile che aiutano moltissimo nella creazione di layout compatibili su tutti i browser.

Il secondo link riguarda la creazione passo passo di un menù a tendina multilivello crossbrowser, secondo me puoi trovare degli spunti per risolvere il tuo problema.

Fammi sapere se hai dubbi.
Ciao

[davidl77]

Ti ringrazio moltissimo, il tuo contributo è stato molto utile.

Ho provato ad inserire il blocco che resetta i tag, ma purtroppo senza risultato.

Capisco, il codice è molto lungo ma alla fine ciò che è errato è il posizionamento dei div:

.menuicon
.menutext

all''interno di

.containermenu

Ovvero:

containermenu è il div (= la vbarra) che contiene menuicon + menutext. Questi ultimi due sono allineati e suddividono containermenu in due parti.

L'errore deve essere lì ma... riesci a darmi una mano?