Menu con CSS se ve completo en FF y mal en IE

[marx-pola]

Hola a todos! Gente tengo un problema con este menú que armé. Lo que no entiendo es por qué en Fifefox el menú llega hasta la otra punta y en IE el menú no llega y deja un espacio vacío.
Les dejo la web para que la vean, pruébenlo en FF y en IE y van a ver el vacío a la derecha: Demo del menú

El css que uso es este:

Código:

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

body,html {
text-align:center;
background-color: #C1DDE6;
}

#contenedor {
width:914px;
height:900px;
margin: 0 auto 0 auto;
position:relative;
top:0px;
left:0px
}
/* BOTONERA MENU */
#botonera_menu{
position: relative;
margin: 0 auto 0 auto;
width: 914px;
height: 43px;
}

#barra {
float:left; 
width:914px;
}
	
#barra li{ 
list-style:none; 
float:left;
}

.catalogo a{
	background:url(imagesite/catalogo.jpg) no-repeat; 
	text-decoration:none;
	display:block; 
	width:219px; 
	height:43px;
	}
.catalogo a:hover {
	/* background-position:bottom; */
	background-image:url(imagesite/catalogoover.jpg);}

.inicio a{
	background:url(imagesite/inicio.jpg) no-repeat; 
	text-decoration:none;
	text-align:center;
	display:block; 
	width:138px;
	height:43px;
	}
.inicio a:hover {
	/* background-position:bottom; */
	background-image:url(imagesite/inicioover.jpg);}

.institucional a{
	background:url(imagesite/institucional.jpg) no-repeat; 
	text-decoration:none;
	text-align:center;
	display:block; 
	width:138px; 
	height:43px;
	}
.institucional a:hover {
	/* background-position:bottom; */
	background-image:url(imagesite/institucionalover.jpg); 
	border: 0; }

.novedades a{
	background:url(imagesite/novedades.jpg) no-repeat; 
	text-decoration:none;
	text-align:center;
	display:block; 
	width:138px; 
	height:43px;
	}

.novedades a:hover {
	/* background-position:bottom; */
	background-image:url(imagesite/novedadesover.jpg);}

.descargas a{
	background:url(imagesite/descargas.jpg) no-repeat; 
	text-decoration:none;
	text-align:center;
	display:block; 
	width:138px; 
	height:43px;
	}

.descargas a:hover {
	/* background-position:bottom; */
	background-image:url(imagesite/descargasover.jpg);}

.contacto a{
	background:url(imagesite/contacto.jpg) no-repeat; 
	text-decoration:none;
	display:block; 
	width:138px; 
	height:43px;
	}

.contacto a:hover {
	/* background-position:bottom; */
	background-image:url(imagesite/contactoover.jpg);}

Espero puedan explicarme xq pasa esto.
Muchas gracias.
Marx.

[yoniti7784]

la verdad no ce cual sea el problema, pero algo si estoy seguro:::
cuando utilizas el ASTERISCO en CSS significa que todos los estilos tendran esa propiedad.
Estas poniendo a todos con MARGIN:0 y PADING:0.
Ten cuidado eso te puede modificar cualquier cosa y puedes llegar a desesperarte por encontrar alguna solucion.

Puede que sea problema de resolucion, intenta con ZOOM+ y ZOOM- en varios Navegadores, y veras como cambia.


Suerte.!!

[ArturoGallegos]

tu pagina esta trabajando en modo quirks por lo que siempre obtendrás resultados distintos entre navegadores...

para evitar esto declara un doctype valido

[marx-pola]

Iniciado por Ag666

tu pagina esta trabajando en modo quirks por lo que siempre obtendrás resultados distintos entre navegadores...

para evitar esto declara un doctype valido

Era exactamente eso. No lo tenía puesto. Le agregué el doctype válido y ahora se ve igual en los 2 navegadores.

Gracias capo... gracias a los 2.

Saludos. Marx.