Como no... Problemas con IE

[skius]

Buenas,

Estoy haciendo una web para mis hermanas en concreto es esta:

http://www.bdclinicadental.com/

Si la visualizais en IE ya podreis ver el error, de lo contrario mirad la captura de pantalla de lo que me pasa al hacerlo:

http://img152.imageshack.us/my.php?image=dibujojw5.jpg


El codigo css en cuestión es:

ul#nav {
width: 800px;
margin: 0 auto;
}
ul#nav li{
display: inline;
clear: both
}
ul#nav li a {
display: inline;
height: 73px;
text-indent: -9999px;
float: left;
}
ul#nav li.logo a{
display: inline;
width: 102px;
background: url(../images/nav-logo.png) bottom center no-repeat;
}
ul#nav li.inici a{
display: inline;
width: 118px;
background: url(../images/nav-inici-off.png) bottom center no-repeat;
}
ul#nav li.iniciS a{
display: inline;
width: 118px;
background: url(../images/nav-inici.png) bottom center no-repeat;
}
ul#nav li.inici a:hover{
display: inline;
width: 118px;
background: url(../images/nav-inici.png) bottom center no-repeat;
}
ul#nav li.equip a{
display: inline;
width: 112px;
background: url(../images/nav-equip-off.png) bottom center no-repeat;
}

El codigo continua, con las otras etiquetas pero ya os haceis una idea...

Que puedo hacer, estoy desesperado!!!!!

Saludos

[javiro]

Hola skius,
dichoso ie6, yo tambien peleo con el a diario.

Prueba cambiando:
ul#nav li{
display: inline;
clear: both
}

por:
ul#nav li{
float:left;
}

a ver que tal,
Salud!!

[skius]

MMMMM muchisimas gracias ha mejorado mucho la cosa.

Hechale otra miradita a la página por eso que no queda del todo cuadrado!

Que puedo hacer?

El resto del codigo de los otros divs es el siguiente:

#header {
margin: 0 auto;
clear: both;
height: 33px;
width: 800px;
background: url(../images/nav-abaix.png) no-repeat;
}
#inside-header {
color: #ffffff;
font-size: 14px;
padding-top: 6px;
padding-left: 90px;
text-align: center;
word-spacing: 30px;
}
#inside-header1 {
color: #ffffff;
font-size: 14px;
padding-top: 6px;
padding-left: 90px;
text-align: center;
word-spacing: 50px;
}
#content {
margin: 0 auto;
clear: both;
height: 463px;
width: 800px;
background: url(../images/main-content.png) no-repeat;
}
#main-content {
font-size: 14px;
padding: 20px 35px 20px 35px;
text-align: justify;
line-height: 20px;
}
#main-content-tractaments {
font-size: 13px;
padding: 15px 30px 15px 30px;
text-align: justify;
line-height: 17px;
}
#main-content-equip {
font-size: 14px;
padding: 20px 35px 20px 35px;
text-align: justify;
line-height: 20px;
height: 461px;
width: 798px;
background: url(../images/Personal/cris2.png) no-repeat;
}
#main-content-equip-marta {
font-size: 14px;
padding: 20px 35px 20px 35px;
text-align: justify;
line-height: 20px;
height: 461px;
width: 798px;
background: url(../images/Personal/martaB&W.png) no-repeat;
}
#footer {
margin: 0 auto;
clear: both;
height: 31px;
width: 800px;
background: url(../images/footer.png) no-repeat;
}
#inside-footer {
color: #ffffff;
font-size: 14px;
padding-top: 6px;
text-align: center;
}



Por otra parte en Firefox y demás em queda centrado y aquí me queda pegado a la izquierda!

Saludos

[javiro]

Me alegro,

para centrarlo usa:
body{
text-align:center;
}

Salud!

[skius]

Sips, pero fijate que ahora en firefox se vee mal. Deja un espacio entre las cajas cuanod en IE y en Safari no!

[skius]

aps y se me centra en IE pero en firefox al sacar lo de margin: 0 auto; me queda en la izquierda!!!!

NO PODRÍAN CUMPLIR LOS ESTANDARES LOS DE MICROSOFTTTTTTT?????

[conmenta1965]

Hola. En principio te puedo decir que no has tenido en consideración las Propiedades de Posicionamiento: "Position" o, "float".

Eso te hace que los bloques de contenido no se distribuyan ni en el cuerpo del documento ni tampoco en el navegador, principalmente, en el más meticuloso que es que te da más problemas.

Saludos

[javiro]

Yo lo que suelo hacer normalmente para maquetar es maquetar la web para que se vea vien en firefox y despues, en otra hoja de estilos, pongo los estilos que difieren para que se vea bien en ie6. Y a través de PHP hago que la pagina lea la segunda hoja o no, de pendiendo si el navegador es ie6 o no. Lo hago de la sigiente forma:

Código:

<!--primero carga la hoja de estilos principal, con la que el firefox tendria suficiente-->
<link href="css/qua.css" rel="stylesheet" type="text/css" />
<?php
$vers = substr ($_SERVER["HTTP_USER_AGENT"], 30, 1);
if((ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]))&& $vers < 7){
	echo "<link href='css/qua_ie6.css' rel='stylesheet' type='text/css' />"; //Si entra aqui carga la hoja de estilos que contradice algunas clases e idinfificadores de la hoja de estilos principal para que funcione bien el MSIE 6 o menor 
}
?>

En la hoja de estilos qua_ie6.css las clases que repita con distintas propiedades van a tener van a machacar a las de qua.css puesto que se declaran las últimas.
Así soluciono yo algunas incompativilidades entre navegadores.
Tambien se puede hacer en ASP y en otros lenguajes.

Salud!!