Menu CSS bugando no IE7

[NoX1911 0]

Olá pessoal... Estou aqui tentando corrigir esse bug mas não consigo descobrir o que está faltando.

No FF o menu funciona normalmente, mas quando abro no IE ele simplesmente cria um espaço no topo de cada ítem, fazendo o menu aumentar e desconfigurar todo o layout da minha pagina.

 

Olhem o código:

 

Código CSS

ul#vermelho {	width:135px;	list-style-type:none;	background-color: #eee;	margin: 0px;	padding: 0px;}ul#vermelho li {	  border-top: 0px solid #fff;	border-bottom: 1px solid #FFFFFF;	display: block;	}ul#vermelho li a:link, ul#vermelho li a:visited {	display:block;	height:100%;	text-decoration:none;	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size:11px;	color:#CC0000;	padding-left:5px;	border-left: 10px solid #CC0000;	border-right: 5px solid #CC0000;}ul#vermelho li a:hover {	background-color: #CC0000;	color:#fff;	border-left:10px solid #CC0000;}

HTML

<ul id="vermelho">	<a><img src="imagens/Portal/colegio.png" width="140" height="16" /></a>	<li><a href="#"><b>Principal</b></a></li>	<li><a href="#"><b>Missão</b></a></li>	<li><a href="#"><b>Histórico</b></a></li>	<li><a href="#"><b>Palavra do Diretor</b></a></li>	<li><a href="#">Equipe Pedagógica</a></li>	<li><a href="#">Localização</a></li></ul>

Por favor se alguem souber como arrumar isso... Já não sei o que modificar nele.

 

Valew!

[NoX1911 0]

Olá pessoal... Estou aqui tentando corrigir esse bug mas não consigo descobrir o que está faltando.No FF o menu funciona normalmente, mas quando abro no IE ele simplesmente cria um espaço no topo de cada ítem, fazendo o menu aumentar e desconfigurar todo o layout da minha pagina.Olhem o código:Código CSS

ul#vermelho {	width:135px;	list-style-type:none;	background-color: #eee;	margin: 0px;	padding: 0px;}ul#vermelho li {	  border-top: 0px solid #fff;	border-bottom: 1px solid #FFFFFF;	display: block;	}ul#vermelho li a:link, ul#vermelho li a:visited {	display:block;	height:100%;	text-decoration:none;	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size:11px;	color:#CC0000;	padding-left:5px;	border-left: 10px solid #CC0000;	border-right: 5px solid #CC0000;}ul#vermelho li a:hover {	background-color: #CC0000;	color:#fff;	border-left:10px solid #CC0000;}

HTML

<ul id="vermelho">	<a><img src="imagens/Portal/colegio.png" width="140" height="16" /></a>	<li><a href="#"><b>Principal</b></a></li>	<li><a href="#"><b>Missão</b></a></li>	<li><a href="#"><b>Histórico</b></a></li>	<li><a href="#"><b>Palavra do Diretor</b></a></li>	<li><a href="#">Equipe Pedagógica</a></li>	<li><a href="#">Localização</a></li></ul>

Por favor se alguem souber como arrumar isso... Já não sei o que modificar nele.Valew!

Cara... Consegui resolver!Simplesmente com isso:

body { margin:0; padding:0; font: 12px Arial, Helvetica, sans-serif; }