Problema con IE6... ¿me ayudáis?

bullancas · #1 (**permalink**) 07/01/2010, 17:14

Muy buenas, recientemente terminé la web de mi firma, y ahora me encuentro con un problema en el que no pensé al principio... No se ve bien en IE6 ni en los IE inferiores.
Se ve bien en IE7, IE8, Firefox, Mozilla... pero con las versiones anteriores de IE nada, se desconfigura la página y me salen las fotos debajo apiladas, como si no entraran en su espacio...
He visto que normlemente se usan parches, o se añaden comentarios que hacen referencia a estos navegadores, pero mi pregunta es... ¿Cómo puedo reestructurar la hoja de estilos para que se vea bien en estos navegadores? ¿Cómo sé qué es lo que tengo que cambiar?

Por favor, toda ayuda u orientación al respecto será bienvenida.

Muchas gracias y un saludo!

RusO91 · #2 (**permalink**) 07/01/2010, 20:32

Te puede tirar error (entre otras muchas cosas) códigos como estos:

margin: 0 auto 0 auto;

float:left/right

algún hover sobre un div... y no se me ocurré nada más. Pero buscá que seguro hay muchos más

suerte!

jomaruro · #3 (**permalink**) 08/01/2010, 12:50

Hola:

Deberías poner la URL de tu página para poder ayudarte, sin eso todo son divagaciones.

Saludos.

bullancas · #4 (**permalink**) 08/01/2010, 14:05

Cita:

Iniciado por jomaruro

Hola:

Deberías poner la URL de tu página para poder ayudarte, sin eso todo son divagaciones.

Saludos.

http://www.fisioterapiaauseva.com

Espero que podáis ayudarme, necesito saber qué cosas son las que debo cambiar o cómo puedo saber qué es lo que tengo que cambiar en el CSS para que se vea bien en IE6 e inferiores.

Muchas gracias!

bullancas · #5 (**permalink**) 14/01/2010, 09:28

Por favor, a ver si me podéis echar una mano... no sé cómo puedo solucionarlo para que no se me descuadre en IE6...

Muchas gracias.

bullancas · #6 (**permalink**) 14/01/2010, 19:45

He conseguido arreglar parte del descuadre gracias a esta herramienta, por si a alguien le sirve de ayuda: http://www.onderhond.com/tools/ie6fixer

Pero sigo teniendo un problema, y es que en IE6 el index ahora se me ve perfecto (que antes era lo que estaba más descuadrado) y en el resto de las páginas las imágenes .png se me descuadran y se me salen de los márgenes y además salen con un fondo de color que no tenían (lo del color casi me da hasta igual, porque casi no se nota, además probé con unos parches con javascript que encontré pero no me funcionaron).

Yo creo que son las imagenes que tengo de home, favoritos, mapaweb y las de los códigos de validación html y css. Pero no sé cómo arreglarlo...

Por favor, echadme una mano a corregir esto del descuadre de las imágenes .png, que ya no sé qué más hacer...!

P.D.: Lo que no entiendo es por qué en el home se ve bien y en el resto mal, si se supone que el css es el mismo...

bullancas · #7 (**permalink**) 14/01/2010, 22:16

Bueno, poco a poco voy solucionando todo. Solucioné lo del color de las imgenes .png y los descuadres.

Sólo me queda un fallo, y es al ver únicamente esta página en IE6 (el resto de las páginas se ven bien y esta página también se ve bien en los demás navegadores): http://www.fisioterapiaauseva.com/neurologia.html

Lo que sucede es que los elementos de la derecha (cita previa, horario y qué tratamos) se me saltan y me aparecen apilados más abajo y a la izquierda de la pantalla.

¿Cómo puedo solucionarlo?

Os copio también tnto el html como el css...

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es-ES" />
<meta name="robots" content="index, follow" />
<meta name="Revisit" content="15 days" />
<meta name="google-site-verification" content="HOFjV2oxrIM5B7Xq3WZBi-7nwBfLQK0fxyEAC3hdqlc" />
<meta name="title" content="Clínica Fisioterapia Auseva en Avilés - Lesiones neurológicas. "/>
<title>Clínica Fisioterapia Auseva en Avilés - Lesiones neurológicas.</title>
<meta name="Description" content="En la Clínica Fisioterapia Auseva en Avilés (Asturias) tratamos, entre otras, lesiones y patologías neurológicas: hemiplejia, Parkinson,esclerosis múltiple..." />
<meta name="Keywords" content="clinica,fisioterapia,auseva,aviles,asturias,hemiplejia,parkinson,sindrome cerebeloso,sindrome vestibular,lesiones medulares,paraplejias,tetraplejias,espina bifida,esclerosis multiple,esclerosis lateral amiotrofica,polineuritis,polirradiculoneuritis,lesion plexo braquial,paralisis periferica,paralisis facial" />
<meta name="author" content="Sergio Carrasco Santos" />
<link rel="shortcut icon" href="http://www.fisioterapiaauseva.com/favicon.ico" />
<link href="hojadeestilosfisioterapiaauseva.css" rel="stylesheet" type="text/css" />
<!-- Hacks y Bugs Explorer - Versiones 6 e inferiores - Windows -->

<!--[if lte IE 6]>
  	<link rel="stylesheet" type="text/css" href="ie6hojadeestilosfisioterapiaauseva.css" media="screen" />
<![endif]-->

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<style type="text/css">
<!--
#cuerpo {
	height:600px;
}

#manovertical {
	height:600px;
}

#fotos {
	height:600px;
}

-->
</style>
</head>

<body>
<div id="contenedor">
<div id="home"><img src="webdev-home-icon-16.png" alt="Clínica de fisioterapia en Avilés" title="Clínica de fisioterapia en Avilés" /><a href="index.html">Home</a></div>
<div id="mapaweb"><img src="webdev-site-map-icon-16.png" alt="mapa-web" title="Mapa web" /><a href="mapaweb.html">Mapa web</a></div>
<div id="favoritos"><img src="webdev-favorites-icon-16.png" alt="Favoritos" title="Favoritos" /><a href="favoritos.html">Favoritos</a></div>

<div id="cabecera"><h1><a href="index.html" title="Clínica Fisioterapia Auseva en Avilés (Asturias)"><img src="maquetaausevadefinitiva_02.jpg" alt="CLINICA FISIOTERAPIA AUSEVA EN AVILES (ASTURIAS). Tu salud en buenas manos." /></a></h1>
</div>
<div id="menu">
	<ul>
		<li><a href="index.html">presentación</a></li>
		<li><a href="profesionales.html">profesionales</a></li>
		<li><a href="instalaciones.html">instalaciones</a></li>
		<li><a href="lesiones.html" class="current">lesiones</a></li>

		<li><a href="tratamientos.html">tratamientos</a></li>
		<li><a href="tarifas.html">tarifas</a></li>
		<li><a href="localizacion.html">localización</a></li>								
	</ul>
</div>
<div id="cuerpo">
    <h2><strong>NEUROLOGIA<br />
<br />
</strong></h2>

    <ul style="padding-left:40px">
    	<li><strong>Hemiplejia.</strong></li>
    	<li><strong>Parkinson</strong>.</li>
    	<li>Síndrome cerebeloso. </li>
    	<li>Síndrome vestibular. </li>
    	<li><strong>Lesiones medulares</strong> (paraplejias, tetraplejias...). </li>

    	<li>Espina bífida. </li>
    	<li><strong>Esclerosis múltiple. </strong></li>
    	<li>Esclerosis lateral amiotrófica. </li>
    	<li>Polineuritis, polirradiculoneuritis, lesiones de los plexos (braquial...).</li>
	    <li>Parálisis periféricas (<strong>parálisis facial</strong>...).</li>

        <li>Etc. </li>
    </ul>
	<p align="center"><img src="neuro.jpg" alt="neurología" title="fisioterapia en enfermedades neurológicas" /></p>
  </div>

<div id="manovertical"><img src="maquetaausevadefinitiva_05.jpg" alt="mano vertical" width="111" height="566" title="Tu salud en buenas manos" /></div>
<div id="fotos">
	<div id="citaprevia"><img src="telefonocitaprevia.jpg" alt="Teléfono cita previa fisioterapia 984 832 411" title="Teléfono cita previa fisioterapia 984 832 411" /></div>
	<div id="horario"><img src="horario.jpg" alt="Horarios clínica de fisioterapia: lunes a viernes de 9-13h y de 16-20h. Abrimos a mediodía (sólo con cita previa)" title="Horarios clínica de fisioterapia : lunes a viernes de 9-13h y de 16-20h" /></div>
	<div id="lesiones">

		<p class="Estilo1">QUÉ TRATAMOS...</p>
	    <ul style="margin-left:10px">
    		<li><a href="traumatologia.html"><strong>TRAUMATOLOGÍA</strong></a></li>
			<li><a href="accidentesdetrafico.html"><strong>ACCIDENTES DE TRÁFICO</strong></a></li>
    		<li><a href="ortopedia.html"><strong>ORTOPEDIA</strong></a></li>
    		<li><a href="reumatologia.html"><strong>REUMATOLOGÍA</strong></a></li>

    		<li><a href="neurologia.html"><strong>NEUROLOGÍA</strong></a></li>
    		<li><a href="patologiarespiratoria.html"><strong>PATOLOGÍA RESPIRATORIA</strong></a></li>
    		<li><a href="patologiavascular.html"><strong>PATOLOGÍA VASCULAR</strong></a></li>
    		<li><a href="pediatria.html"><strong>PEDIATRÍA</strong></a></li>
    		<li><a href="otras.html"><strong>OTRAS</strong></a></li>
		</ul>

	</div>
</div>
<div id="manohorizontal"><img src="maquetaausevadefinitiva_08.jpg" alt="mano horizontal" width="587" height="109" title="Soluciones personales en manos profesionales" /></div>
<div id="cita">"El peor de todos los males es creer que los males no tienen remedio". Francisco Cabarrús.</div>
<div id="pie">
	<div id="copyright">2009 &copy; Fisioterapia Auseva</div>
	<div id="lopd"><a href="lopd.html">LOPD</a></div>
	<div id="direccion">C/ Auseva 9, bajo dcha. Avilés (Asturias). 984 832 411</div>

	<div id="contacto"><img src="webdev-contact-icon-16.png" alt="contacto" width="16" height="16" title="e-mail" /><a href="mailto:[email protected]" title="[email protected]">Contacto por e-mail </a></div>
	<div id="validacion"><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fisioterapiaauseva.com%2Fortopedia.html"><img src="valid-xhtml10-blue.png" alt="valid-xhtml" width="44" height="15" title="XHTML validado" /></a><a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.fisioterapiaauseva.com%2Fortopedia.html"><img src="valid-css-blue.png" alt="valid-CSS" width="44" height="15" title="CSS validado" /></a></div>
	<div id="paginasamigas">
	  <p><strong>Webs amigas:</strong> <a href="http://www.fisiostar.com/" target="_blank" >Fisioterapia</a> - <a href="http://www.fisaude.com/" target="_blank" >Salud y fisioterapia</a> - <a href="http://www.fisaude.com/tienda/" target="_blank" >Tienda de la salud</a> </p>

	</div>
</div>

</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12411115-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

bullancas · #8 (**permalink**) 14/01/2010, 22:17

Y el CSS...

Código:

http://www.fisioterapiaauseva.com/neurologia.html
Estilos incorporados para http://www.fisioterapiaauseva.com/neurologia.html

<!--
#cuerpo {
	height:600px;
}

#manovertical {
	height:600px;
}

#fotos {
	height:600px;
}

-->

http://www.fisioterapiaauseva.com/hojadeestilosfisioterapiaauseva.css

*{
	margin:0;
	padding:0;
}

body{
	width:956px;
	margin:auto;
	text-align:left;
	font:13px Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	background-repeat: repeat;
	background-image: url(fondoweb.jpg);
	color: #666666;
	background-color: #FFFFFF;
}

a:link {
	text-decoration: none;
	color: #666;
}

a:visited {
	text-decoration: none;
	color: #666;
}

a:hover {
	text-decoration: underline;
	color: #666;
}

a:active {
	text-decoration: none;
	color: #666;
}

img{
  border:0;
}

p{
	margin: 10px 0 10px 0;
}

h2{
	text-align:center;
	font:15px Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #669900;
	text-decoration: underline;
}

#contenedor {
	width:956px;
	margin:auto;
	text-align:left;
	background-color:#FFFFFF;
}

#home {
	width:50px;
	margin-left:60px;
	text-align:left;
	float:left;
	color:#666;
}

#mapaweb { 
	width:80px;
	margin-left:620px;
	text-align:left;
	float:left;
	color:#666;
}

#favoritos { 
	width:74px;
	margin:auto;
	text-align:left;
	float:left;
	color:#666;
}

#menu{
	color:#666;
	font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
	width:956px;
	float:left;
	background-color: #FFFFFF;
}

	#menu ul{
		list-style:none;
	}
	
	#menu li{
		background:url(menu_1.jpg) repeat-x;			
		list-style:none;
		display:block;
		float:left;
		height:36px;
		border-right:1px solid #dbdbdb;
		line-height:36px;
	}
	
	#menu li a{
		display:block;
		float:left;
		color:#b1b1b1;
		text-transform:uppercase;
		font-size:11px;
		font-weight:bold;
		line-height:36px;
		text-decoration:none;
		padding:0 25px;				
	}
	
	#menu li a:hover{
		color:#747474;
		background:url(menu_2.jpg) repeat-x;
	}
	
	#menu li a.current{
		display:block;
		float:left;
		color:#6c822e;
		background:url(menu_3.jpg) repeat-x;
		text-transform:uppercase;
		font-size:11px;
		font-weight:bold;
		line-height:36px;
		text-decoration:none;
		padding:0 25px;	
	}
	
	#menu li.current a:hover{
		color:#6c822e;
	}

#cuerpo {
	width:547px;
	text-indent:20px;
	text-align:justify;
	float:left;
	background-color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
	padding-top:20px;
}

#manovertical {
	width:111px;
	margin:auto;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	padding-top:20px;
}

#fotos {
	width:258px;
	margin:auto;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	padding-top:20px;
}

#citaprevia {
	width:160px;
	margin-left:28px;
	text-align:left;
	float:left;
	height: 80px;
	background-color: #FFFFFF;
}

#horario {
	width:160px;
	margin-top:0px;
	margin-left:28px;
	text-align:left;
	float:left;
	height: 120px;
	background-color: #FFFFFF;
}

#mapagoogle {
	width:250px;
	height:146px;
	margin-top:40px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
}

#textomapa {
	width:250px;
	margin-top:2px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	color: #6c822e;
	text-align:center;
}

#fotofachada {
	width:250px;
	margin-top:50px;
	float:left;
	background-color: #FFFFFF;
	text-align:center;
}

#lesiones {
	width:200px;
	margin-top:20px;
	margin-left:28px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
}

#fotocolumna {
	width:248px;
	margin-top:0px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotovitruvio {
	width:200px;
	margin-top:20px;
	margin-left:20px;
	float:left;
	background-color: #FFFFFF;
}

#fotointrusismo {
	width:200px;
	margin-top:10px;
	margin-left:20px;
	float:left;
	background-color: #FFFFFF;
}

#fotomaite {
	width:200px;
	height:190px;
	margin-top:40px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#maite {
	width:200px;
	margin-left:10px;
	text-align:center;
	float:left;
	background-color: #FFFFFF;
}

#fotosheila {
	width:200px;
	height:190px;
	margin-top:20px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#sheila {
	width:200px;
	margin-left:10px;
	text-align:center;
	float:left;
	background-color: #FFFFFF;
}

#fotosaladeespera {
	width:200px;
	height: 150px;
	margin-top:40px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotopasillo {
	width:200px;
	height:267px;
	margin-top:40px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotodespacho {
	width:200px;
	height: 150px;
	margin-top:40px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotoreflexoterapia {
	width:200px;
	height:149px;
	margin-top:40px;
	margin-left:5px;
	float:left;
	background-color: #FFFFFF;
}

#fotokinesiotape {
	width:200px;
	height:201px;
	margin-top:40px;
	margin-left:20px;
	float:left;
	background-color: #FFFFFF;
}

#fotopuncionseca {
	width:200px;
	height:82px;
	margin-top:30px;
	margin-left:5px;
	float:left;
	background-color: #FFFFFF;
}

#fotopiedras {
	width:250px;
	float:left;
	height:167px;
	background-color: #FFFFFF;
}

#fototarjetaregalo {
	width:200px;
	float:left;
	height:189px;
	margin-top:20px;
	margin-left:20px;
	background-color: #FFFFFF;
}

#fotocolumnavertebral {
	width:200px;
	height:129px;
	margin-top:30px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotovendaje {
	width:200px;
	margin-top:60px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotolatigazocervical1 {
	width:200px;
	margin-top:40px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotolatigazocervical2 {
	width:200px;
	margin-top:20px;
	margin-left:10px;
	float:left;
	background-color: #FFFFFF;
}

#fotolesion {
	width:200px;
	height:267px;
	margin-top:40px;
	margin-left:5px;
	float:left;
	background-color: #FFFFFF;
}

#manohorizontal {
	width:587px;
	height:111px;
	margin:auto;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
}

#cita {
	width:349px;
	height:91px;
	text-align:center;
	padding-top:20px;
	padding-right:20px;
	float:left;
	background-color: #FFFFFF;
	font-family: 'Comic Sans MS', cursive;
	font-size: 16px;
	color: #006600;
	font-style: italic;
}

#pie {
	width:956px;
	height:70px;
	margin:auto;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	border-top-style: none;
}

#copyright {
	width:165px;
	margin-left:30px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	color:#666666
}

#lopd {
	width:35px;
	margin-left:10px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	color:#666666;
}

#direccion {
	width:330px;
	margin-left:25px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	color:#666666;
}

#contacto {
	width:180px;
	margin-left:25px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
	color:#666666;
}

#validacion {
	width:88px;
	margin-left:40px;
	text-align:left;
	float:left;
	background-color: #FFFFFF;
}

#paginasamigas {
	width:956px;
	margin-left:0px;
	margin-top:10px;
	text-align:center;
	float:left;
	background-color: #CCFF99;
}

.Estilo1 {
	color: #6c822e;
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
	text-align: left;	
}

.Estilo2 {
	font-size: 16px;
	font-weight: bold;
}

.Estilo3 {
	font-size: 16px; 
	font-weight: bold; 
	color: #669900;
	text-align: center;	
}

bullancas · #9 (**permalink**) 14/01/2010, 22:59

No se molesten... ya está todo solucionado y se ve perfectamente.