[css] problemi visualizzazione menu

[blur]

ciao,

scusate, ma non riesco (sarà il caldo ) a sistemare questo menu in css in modo da essere corretto anche per firefox...

il link

URL=http://www.dizeta.altervista.org/prove/prova.htm]menu[/URL]

e questo è il css incriminato:


#intestazione {

/*width:158px; */
margin:0em auto;
text-align:left;
list-style:none;
background:#FF870F;
border:0px solid #ccc;
padding:0em 0;
}

#intestazione1 {
/*width:158px; */
margin:0em auto;
text-align:left;
list-style:none;
background:#03A1C4;
border:0px solid #ccc;
padding:0em 0;
}

#intestazione2 {
/*width:182px;*/
margin:0em auto;
text-align:left;
list-style:none;
background:#83B538;
border:0px solid #ccc;
padding:0em 0;
}

h2 { /*stile per i titoli dei menu*/
font-size:1em;
font-weight:bold;
margin:4px 0;
color: #fff;

}
/*------------------------------------***MENU1***----------------------------------------------*/


ul.menu1 {
text-align: left;
list-style: none;
font-size:.80em;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul.menu1 li a {
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
color: #000;
text-decoration: none;
background: #ECE9D8;
}

ul.menu1 li { display: block;
margin: 0;
padding: 0; }

ul.menu1 li a:link, ul.menu1 li a:visited {
background: #ECE9D8;
color: #000;
}
ul.menu1 li a:hover, ul.menu1 li a:active {
color: #FF870F;
background: #ECE9D8;
border-color: #aaab9c #fff #fff #ccc;
}

/*------------------------------------***MENU2***----------------------------------------------*/


ul.menu2 {
text-align: left;
list-style: none;
font-size:.80em;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul.menu2 li a {
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
color: #000;
text-decoration: none;
background: #ECE9D8;
}

ul.menu2 li { display: block;
margin: 0;
padding: 0; }

ul.menu2 li a:link, ul.menu2 li a:visited {
background: #ECE9D8;
color: #000;
}
ul.menu2 li a:hover, ul.menu2 li a:active {
color: #FF870F;
background: #ECE9D8;
border-color: #aaab9c #fff #fff #ccc;
}

/*------------------------------------***MENU3***----------------------------------------------*/

ul.menu3 {
text-align: left;
list-style: none;
font-size:.80em;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul.menu3 li a {
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
color: #000;
text-decoration: none;
background: #ECE9D8;
}

ul.menu3 li { display: block;
margin: 0;
padding: 0; }

ul.menu3 li a:link, ul.menu3 li a:visited {
background: #ECE9D8;
color: #000;
}
ul.menu3 li a:hover, ul.menu3 li a:active {
color: #FF870F;
background: #ECE9D8;
border-color: #aaab9c #fff #fff #ccc;
}


/*------------------------------------***MENU4***----------------------------------------------*/

ul.menu4 {
text-align: left;
list-style: none;
font-size:.80em;
padding: 0;
margin: 0 auto;
width: 100%;
background: #ECE9D8;


}
ul.menu4 li a {
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
color: #000;
text-decoration: none;
background: #ECE9D8;

}

ul.menu4 li { display: block;
margin: 0;
padding: 0;



}

ul.menu4 li a:link, ul.menu4 li a:visited {
background: #ECE9D8;
color: #000;
/*background-image: url(../immagini/freccia.gif);
background-repeat: no-repeat;
background-position: 80% 0%;*/


}
ul.menu4 li a:hover, ul.menu4 li a:active {
color: #FF870F;
background: #ECE9D8;
border-color: #aaab9c #fff #fff #ccc;
/*background-image: url(../immagini/freccia.gif);
background-repeat: no-repeat;
background-position: 80% 0%;*/

}


grazie

[blur]

ragazzi nessuno ha voglia di darci un'occhiata?

[blur]

vabbè sono riuscito alla fine a risolvere il problema

così:

#intestazione {

width:182px;
margin:.5em auto;
text-align:left;
list-style:none;
background:#FF870F;
border:0px solid #ccc;
padding:0em 0;
}

#intestazione1 {
width:182px;
margin:.5em auto;
text-align:left;
list-style:none;
background:#03A1C4;
border:0px solid #ccc;
padding:0em 0;
}

#intestazione2 {

width:182px;
margin:0em auto;
text-align:left;
list-style:none;
background:#83B538;
border:0px solid #ccc;
padding:0em auto;
}

#intestazione3 {

width:182px;
margin:0em auto;
text-align:left;
list-style:none;
background:#739CAF;
border:0px solid #ccc;
padding:0em 0;
}

#intestazione4 {
width:182px;
margin:0em auto;
text-align:left;
list-style:none;
background:#739CAF;
border:0px solid #ccc;
padding:0em 0;
}


h2 { /*stile per i titoli dei menu*/
font-size:1em;
font-weight:bold;margin:0px 0;
color: #fff;

}

h6 { /*stile per i titoli dei menu*/
font-size:1em;
font-weight:bold;margin:2px 0;
padding:.3em 0em;
}

h7 { /*stile per i titoli dei menu*/
font-size:1em;
font-weight:bold;margin:2px 0;
color: #A52A2A;
padding:0em 0em;
}

/*------------------------------------***MENU1***----------------------------------------------*/


/** MENU 1 ** roll-over basato solo sui colori **/
ul.menu1 {
text-align: left;
font-size:.90em;
width:182px;
list-style:none; /* elimino i punti elenco */
margin:0em auto ;
padding:0; /* elimino i rientri delle liste */
}

ul.menu1 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 .5em; /* lascia spazio far il bordo del menu e il testo del link */
margin:0em;
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
background: #ECE9D8;
}

ul.menu1 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/

ul.menu1 li a:link, ul.menu1 li a:visited {
background:#ECE9D8;
color: #000;
} /* colori per il link */

ul.menu1 li a:hover, ul.menu1 li a:active {
border-color: #aaab9c #fff #fff #ccc;
background: #ECE9D8;
color: #83B538;
} /* colori per l'effetto roll-over */


/*------------------------------------***MENU2***----------------------------------------------*/


ul.menu2 {
text-align:left;
font-size:.90em;
width:182px;
list-style:none; /* elimino i punti elenco */
margin:0 auto;
padding:0; /* elimino i rientri delle liste */
}

ul.menu2 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 .5em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
background: #ECE9D8;
}

ul.menu2 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/

ul.menu2 li a:link, ul.menu2 li a:visited {
background:#ECE9D8;
color: #000;
} /* colori per il link */

ul.menu2 li a:hover, ul.menu2 li a:active {
border-color: #aaab9c #fff #fff #ccc;
background: #ECE9D8;
color: #FF870F;
} /* colori per l'effetto roll-over */



/*------------------------------------***MENU3***----------------------------------------------*/

ul.menu3 {
text-align: left;
font-size:.90em;
width:182px;
list-style:none; /* elimino i punti elenco */
margin:0 auto;
padding:0; /* elimino i rientri delle liste */
}

ul.menu3 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
color:#000;
padding:0 .5em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
background: #ECE9D8;
}

ul.menu3 li { display:inline; } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/

ul.menu3 li a:link, ul.menu3 li a:visited {
background:#ECE9D8;
color: #000;
} /* colori per il link */

ul.menu3 li a:hover, ul.menu3 li a:active {
border-color: #aaab9c #fff #fff #ccc;
background: #ECE9D8;
color: #03A1C4;
} /* colori per l'effetto roll-over */


/*------------------------------------***MENU4***----------------------------------------------*/

ul.menu4 {
text-align: left;
font-size:.90em;
width:182px;
list-style:none; /* elimino i punti elenco */
margin:0 auto;
padding:0; /* elimino i rientri delle liste */
}

ul.menu4 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 .5em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
background: #ECE9D8;
}

ul.menu4 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/

ul.menu4 li a:link, ul.menu4 li a:visited {
background:#ECE9D8;
color: #000;;
} /* colori per il link */

ul.menu4 li a:hover, ul.menu4 li a:active {
border-color: #aaab9c #fff #fff #ccc;
background: #ECE9D8;
color: #FF870F;
} /* colori per l'effetto roll-over */

se a qualcuno può servire...
grazie lo stesso

[bagu]

complimenti bellissimo lavoro, molto utile.
Ci ho lavorato sopra un poco ma non ho cavato il ragno dal buco .
metto la tua lista nel cassetto

ciao
paolo

[bagu]

Così mi pare un po incasinato il tutto :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

  #navcontainer { width: 200px; }
 ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

 a
{
display: block;
padding: 3px;
width: 160px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #ccc;
border-style: solid;
background: #ECE9D8;
}

 a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
background:#ECE9D8;
color: #000;
}
a:hover
{
color: #00FF66;
border-color: #aaab9c #fff #fff #ccc;
background: #ECE9D8;
width: 162px;
}

 #navcontainer a:hover
{
color: #00FF66;
}

#navcontainer1 ul a:hover
{
color: red;
}

 #navcontainer2 a:hover
{
color: blue;
}


.verde {background-color:#00FF66;margin-top:30px;border:0;padding: 3px;
width: 162px;}
.rosso {background-color:red;margin-top:5px;border:0;padding: 3px;
width: 162px;}
.blu {background-color:blue;margin-top:5px;border:0;padding: 3px;
width: 162px;}


</style>
</head>

<body>

 <div id="navcontainer">
<ul id="navlist">[*]scarica e-book
<li class="verde" >titolo[*]Item two[*]Item three[*]Item four[/list]
</div>
<div id="navcontainer1">
<ul>
<li class="rosso" >titolo2[*]Item five[*]Item five[/list]
</div>
<div id="navcontainer2">
<ul id="navlist">
<li class="blu" >titolo[*]Item two[*]Item three[*]Item four[/list]
</div>
</body>
</html>

ciao
paolo

[blur]

hai specificato 2 volte

<ul id="navlist">

[bagu]

il css nn l'ho toccato e questo è l'html sistemato:
<body>

<div id="navcontainer">
<ul >[*]scarica e-book
<li class="verde" >titolo[*]Item two[*]Item three[*]Item four[/list]
</div>
<div id="navcontainer1">
<ul>
<li class="rosso" >titolo2[*]Item five[*]Item five[/list]
</div>
<div id="navcontainer2">
<ul>
<li class="blu" >titolo[*]Item two[*]Item three[*]Item four[/list]
</div>
</body>

ho testato con i6, firefox e opera7

ciao e grazie di avermi fatto notare l'errore
paolo