Menu Orizzontale differenze tra Browser

**Web01** · 25-05-2006, 11:08

Salve,
partendo dalla base di un menu verticale che utilizzo da parecchio tempo, sto cercando di realizzarne uno orizzontale molto simile.
Il problema principale che ho riscontrato è che viene visualizzato diversamente tra Firefox & IE.
Inoltre lo "sfondo" al passaggio del mouse con entrambi i browser non viene "cambiato" al 100%.
Sapete aiutarmi?

Vi posto il codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
ul.menu_ori {
list-style:none;
margin:0; padding:0;
text-align: center;
margin-left:auto;
margin-right:auto;
}
li.menu_ori{
padding:0;
margin: 0px 0x 0px 10px;
background-color:#ffff00;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #339900;
text-align: center;
text-decoration:none;
}
ul.menu_ori li a {
text-align: center;
text-decoration:none;
padding:0 1em;
height:2em;line-height:2em;
}
ul.menu_ori li {
text-align: center;
display:inline
}
ul.menu_ori li a:link, ul.menu1 li a:visited {
text-align: center;
color: #009;
}
ul.menu_ori li a:hover, ul.menu1 li a:active {
text-align: center;
background-color:#800000;
color:#c00;
}
</style>
</head>
<body>
<ul class="menu_ori">
<li class="menu_ori">
Menu1

<li class="menu_ori">
Menu2

<li class="menu_ori">
Menu3
[/list]
</body>
</html>

Inoltre, è "valido" per il W3C il codice CSS che ho scritto?

Grazie!!

**Web01** · 25-05-2006, 14:38

Nessuno?

**Akito** · 25-05-2006, 15:14

ciao,
ecco qua il tuo codice modificato per risultare uguale sia sotto IE che FF. Non sono riuscito però a mettere i margini di 10 px.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
body {
text-align: center;
}

ul.menu_ori {
list-style: none;
margin: 0 auto;
padding: 0;
width: 306px;
}

ul.menu_ori li {
float: left;
padding: 0px;
margin: 0px;
background-color: #ffff00;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #339900;
text-align: center;
text-decoration: none;
width: 100px;
}

ul.menu_ori li a {
text-align: center;
text-decoration: none;
padding:0 1em;
display: block;
height: 2em;
line-height: 2em;
}
ul.menu_ori li a:link, ul.menu1 li a:visited {
text-align: center;
color: #009;
}
ul.menu_ori li a:hover, ul.menu1 li a:active {
text-align: center;
background-color: #800000;
color: #c00;
}
</style>
</head>
<body>

<ul class="menu_ori">[*]Menu1[*]Menu2[*]Menu3[/list]

</body>
</html>

Per avere i margini, ti consiglio di mettere margini a 0px e fare delle immagini di sfondo per i pulsanti da mettere con background-image in "a" del css.

Ciao
Akito

**Web01** · 25-05-2006, 15:39

Grazie!!
Ho provato ad utilizzare il tuo codice ma mi succede quello che vedi nell'immagine allegata.
Sai come posso risolvere?

Ancora Grazie per la risposta!

**Akito** · 25-05-2006, 17:47

Ciao,
quel problema si verifica quando la somma delle larghezze dei bottoni del menu è maggiore della larghezza dell'oggetto contenitore del menu stesso.
Mi spiego meglio, supponiamo di mettere la lista "ul" del menu dentro un tag <div>. Se la larghezza del div è minore della larghezza di tutti i tag[*] sommati tra loro, accade ciò che ti è successo.
Purtroppo, l'unico modo che conosco per risolvere il problema è tenere il contenitore più largo o avere i bottoni più stretti.

Ciao
Akito

Discussione: Menu Orizzontale differenze tra Browser

Strumenti discussione

Ricerca discussione

Visualizza

Menu Orizzontale differenze tra Browser

Permessi di invio