Diferencias en IE y firefox

el_javi · #1 (**permalink**) 26/11/2006, 07:05

Buenas tardes a tod@s.

Tengo un problema... y me gustaria compartirlo con tod@s vosotr@s.

Mi código HTML es el siguiente:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Pruebas Menu</title>
	<style type="text/css">
		body {margin-bottom: 0px;margin-left: 0px;margin-right: 0px;margin-top: 0px;background-color:#ADADAD;}
	
		/* Menu */
		#menu_buttons {font-family:Arial,Verdana,Helvetica,sans-serif; font-size:11px; text-decoration:none; color:#000000; line-height:12px;}
		#menu_buttons a {font-family:Arial,Verdana,Helvetica,sans-serif; font-size:11px; text-decoration:none; color:#000000; line-height:12px;}
		
		
		#menu_company {display:block; width:65px; height:16px; padding:3px 0px 0px 16px; margin:4px 0px 0px 0px; background:url(../img/menu/menu_bullet.gif) 7px 8px no-repeat; background-color:Red;}/*  background-color:#E8E9EB; */
		
		#menu_company:hover {padding:7px 0px 0px 0px; margin:-2px 0px 0px 0px; border-width:1px 1px 0px 1px; background:none; background-color:#26265C; color:#FFFFFF; font-weight:bold; border:1px solid #FFFFFF;}

	</style>
</head>

<body>
<div id="menu_container" style="position:absolute;top:252px;left:0px;width:942px;height:344px; background-color:blue">
	<div id="menu_buttons" style="position:relative;top:1px;left:18px;height:28px; background-color:green">
		<a href="#" id="menu_company">Empresa</a>
	</div>
</div>


</body>
</html>

El problema, como vereis al probarlo, es que en IE se muestra de diferente manera y en firefox, de la "supuestamente correcta".

Porfavor, me gustaría que alguien me explicara el porqué de esto, y la manera de homogeneizarlo para estos dos navegadores (y los posibles usados, vease Opera y Netscape)

Espero cualquier tipo de comentarios al respecto.

Gracias de antemano

el_javi · #2 (**permalink**) 26/11/2006, 11:19

Porfavor.. ¿Alguien sabe como resolver lo que comento?
Ruego que alguien me ayude, porfavor

Graciasc a tod@s

SiR.CARAJ0DIDA · #3 (**permalink**) 26/11/2006, 12:58

esos estilos son demasiado complicados de entender, te recomiendo poner un par propiedad:valor por linea y si podes un link para ver el ejemplo y cual es el problema especifico.

el_javi · #4 (**permalink**) 26/11/2006, 14:04

Aqui dejo de nuevo el código con los Estilos, una propiedad por línea.

Espero que así sea mas sencillo seguirlo.

No tengo posibilidad de poern un enlace a la presentación, pero con crear un fichero .htm en notepad y pegar este código, podeis ver lo que hace

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Pruebas Menu</title>
<style type="text/css">
body {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
background-color:#ADADAD;
}

/* Menu */
#menu_buttons {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:11px;
text-decoration:none;
color:#000000;
line-height:12px;
}
#menu_buttons a {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:11px;
text-decoration:none;
color:#000000;
line-height:12px;
}

#menu_company {
display:block;
width:65px;
height:16px;
padding:3px 0px 0px 16px;
margin:4px 0px 0px 0px;
background:url(../img/menu/menu_bullet.gif) 7px 8px no-repeat; background-color:Red;
}/* background-color:#E8E9EB; */

#menu_company:hover {
padding:7px 0px 0px 0px;
margin:-2px 0px 0px 0px;
border-width:1px 1px 0px 1px;
background:none;
background-color:#26265C;
color:#FFFFFF;
font-weight:bold;
border:1px solid #FFFFFF;
}

</style>
</head>

<body>
<div id="menu_container" style="position:absolute;top:252px;left:0px;width: 942px;height:344px; background-color:blue">
<div id="menu_buttons" style="position:relative;top:1px;left:18px;height: 28px; background-color:green">
<a href="#" id="menu_company">Empresa</a>
</div>
</div>

</body>
</html>

Espero que podais ayudarme pronto.

Gracias de antemano