list-style-type che IE7 non vede

**pat7331** · 25-11-2009, 10:56

Ciao a tutti, forse la risoluzione di questo bug è già stata scritta da qualche parte ma non sono stato capace di trovarla.
E' una pagina semplice con un menu a lista verticale con tre pagine. Per indicare la pagina attiva ci metto il list-type, che prima ho tolto. In questo caso list-style-type: circle. Ecco, IE a differenza di Mozilla o Opera, non rende il cerchietto e inoltre non rende l':hover (con sfondo grigio) sul list item per tutta la lunghezza ma solo per la parte del testo.
Posto il codice per capirci:

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"><html>
<head>
	<title>home</title>
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" title="normal" href="foglio.css" />
</head>
<body>
	<div id="conteiner">
		<div id="foglio">
		</div>
		<div id="header">
			<h2>SITO</h2>
		</div>
		<div id="menu">
			<ul>
				<li id="active">HOME
				[*]ABOUT
				[*]CONTACT
			[/list]
		</div>
		<div id="content">
		</div>
	</div>
</body>
</html>

Questa è una pagina, non credo che serve che posti le altre due che sono identiche per verificare che la pagina attiva abbia il cerchietto.
Posto anche il css:

codice:

body	{
	font-size: 100%;
	font-family: Arial, sans-serif;
	}

html, body {
	margin: 0 auto;
	padding: 0;
	}

div#conteiner{
	position: relative;
	width: 75%;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	}

div#header{
	width: 100%;
	margin: 0;
	}

div#menu{
	float: left;
	margin: 0;
	padding-top: 20px;
	border-right: 1px solid #EBEBEB;
	}
	
	#menu ul{
		margin: 0;
		padding: 0;
		width: 100%;
		}

	#menu li{
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 100%;
		}
	
	#menu a, a:link, a:visited, a:hover{
		text-decoration: none;
		color: #4A4A4A;
		}
		
	#menu li:hover{
		text-decoration: none;
		background: #EBEBEB;
		}
		
	li#active{
		list-style-type: disc;
		}

Grazie a tutti coloro che riusciranno ad aiutarmi.

**Mich_** · 25-11-2009, 12:04

E` noto che IE interpreta la pseudoclasse :hover solo sui link.
Dovrebbe risolversi se operi queste modfiche:

codice:

	#menu a{
		text-decoration: none;
		color: #4A4A4A;
		display: block;
		width: 100%;
		height: 100%;
	}
		
	#menu li a:hover{
		text-decoration: none;
		background: #EBEBEB;
	}
		
	#active {
		list-style-type: disc;
	}
forse devi dare stile anche a #active a, #active a:hover

**pat7331** · 25-11-2009, 22:05

Grazie mich, ho tralasciato l'html e i css per un po' e devo darmi una rinfrescata.

**PressioneZ** · 26-11-2009, 02:06

NElla nuova versione di IE avevano detto di aver risolto problemi del genere...

**pat7331** · 26-11-2009, 10:28

Alla fine Mich ho risolto parzialmente così:
Ho fatto un foglio solo per IE7 con il solito commento condizionale:

in cui ho dato una dimensione al menu cosicché assegnando ai list item una lunghezza del 100% il background sul rollover prende tutto lo spazio e non solo il testo.
Rimane il problema che IE non legge nessuna ulteriore proprietà nella pagina attiva, non solo list-styl-type, ma nemmeno text-decoration, e questo è più difficile da risolvere senza modificare il codice html.

Discussione: list-style-type che IE7 non vede

Strumenti discussione

Ricerca discussione

Visualizza

list-style-type che IE7 non vede

Permessi di invio