menù...eliminare la spaziatura su IE

**deleted_id_48586** · 10-04-2004, 19:54

Costruendo un esempio di menù con rollover (solo CSS) verticale mi sono accorto che non riesco in alcun modo ad eliminare la spaziatura verticale tra i vari pulsanti solo in IE.

Zeldman suggerisce di aggirare questo bug di IE scrivendo il codice XHTML senza spaziature, ed io così ho fatto, ma senza risultato.

Eccovi il codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<head>
<title>menù con rollover verticale CSS</title>

<style type="text/css" media="all">

#nav {
padding:0px;
margin:0px;
border:0px;
}

ul {
font-family:verdana;
font-size:12px;
width:150px;
margin:0px;
padding:0px;
list-style-type:none;
}

li {
margin:0px;
padding:0px;
}

a {
display:block;
width:150px;
height:20px;
padding:0px 0px 0px 5px;
margin:0px;
line-height:20px;
}

a:link {
color:#666666;
text-decoration:none;
border:1px solid #666666;
}

a:visited {
color:#FFFFFF;
text-decoration:none;
background-color:#999999;
border:1px solid #666666;
}

a:hover {
color:#FFFFFF;
text-decoration:none;
background-color:#666666;
border:1px solid #666666;
}

</style>

</head>
<body>

<div id="nav"><ul>[*]home[*]chi siamo[*]servizi[*]news[*]faq[*]contatti[/list]</div>

</body>
</html>

sicuramente sbaglio qualcosa il fatto è che non capisco cosa.

**Marcolino's** · 10-04-2004, 21:39

codice:

#nav {
padding:0;
margin:0;
border:0;
}


#nav ul {
font-family:verdana;
font-size:12px;
width:150px;
margin:0;
padding:0;
list-style-type:none;
}

#nav ul li {
margin:0;
padding:0;
width:150px;
}



#nav ul li a {
display:block;
height:20px;
padding:0 0 0 5px;
margin:0;
line-height:20px;
}

#nav ul li a:link {
color:#666666;
text-decoration:none;
border:1px solid #666666;
}


#nav ul li a:visited {
color:#FFFFFF;
text-decoration:none;
background-color:#999999;
border:1px solid #666666;
}

#nav ul li a:hover {
color:#FFFFFF;
text-decoration:none;
background-color:#666666;
border:1px solid #666666;
}

Devi derivare tutto dal layer che contiene il menù, ma non solo, non è il link a dover contenere la larghezza ma la lista, vedi che ti ho spostato il width.
Per ogni domanda: http://www.constile.org/template/menu_verticali/ vedi che a fondo pagina c'è anche il link al guest delle domande e risposte

Se dai un'occhiata a linux web machine, noterai che il menù è fatto esattamente allo stesso modo e non c'è nessuna spaziatura verticale con IE o altri browser.

**deleted_id_48586** · 11-04-2004, 09:56

Niente su IE5.0 Win non funziona

**Marcolino's** · 11-04-2004, 10:58

Non so, non ho ie5 ma solo ie 5.5

**deleted_id_48586** · 12-04-2004, 11:39

up

**bagu** · 12-04-2004, 20:49

prova questo l'ho testato su ie5.2 per mac, ie6 per pc opera 7 e firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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; }

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

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: white;
border-bottom: 1px solid black;
}

#navcontainer a:link, #navlist a:visited
{
color: black;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: black;
color: white;
}
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]
</div>
</body>
</html>

ciao
paolo

**bagu** · 12-04-2004, 22:32

ops , questo è il buono !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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; }

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

}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: white;
border:1px solid gray;

}

#navcontainer a:link, #navlist a:visited
{
color: black;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: black;
color: white;
}
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">[*]Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]
</div>
</body>
</html>

**deleted_id_48586** · 13-04-2004, 20:09

Avevo già risolto da solo, cmq grazie

**bagu** · 14-04-2004, 07:15

posta la tua soluzione , puo' servire anche a altri

Discussione: menù...eliminare la spaziatura su IE

Strumenti discussione

Ricerca discussione

Visualizza

menù...eliminare la spaziatura su IE

Permessi di invio