Por que no funciona en IE?

skielz · #1 (**permalink**) 25/12/2011, 00:06

Alguno me dice porque este codigo no se ve en internet explorer?
En firefox y chrome anda perfecto.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<title>TheConquerors</title>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19269455-2']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<link href="objetos/favicon.ico" rel="shorcut icon">
</head>
<body>
<br><h1 align="center" style="color: #ffffff;">The Conquerors</h1>
<br><br><h2 align="center" style="color: #ffffff;">Descargar</h2>
<table id="botonera" cellspacing="10">
<tr>
<td><a href="descargas/AOE2.iso" class="button">Age of Kings</a></td>
<td><a href="descargas/AOE2E.iso" class="button">The Conquerors</a></td>
</tr>
</table>
</div>
</body>
</html>

Código:

*{
margin:0px;
padding:0px;
}
body{
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);	 	 
	 text-shadow: rgba(0,0,0,.4) 0 3px 0;
	 font-family: Arial;
	 cursor:default;
	 -moz-user-select: none; 
	 -o-user-select: none; 
	 -webkit-user-select: none; 
	 -ie-user-select: none; 
	 user-select: none; 
height: 100%;
}
#botonera{
margin: 0px auto;
}
.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 10px 10px;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 18px;
   font-family: Georgia, serif;
   text-decoration: none;
	 text-align:center;
   vertical-align: middle;
	 width:155px;
	 float:left;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

sgb004 · #2 (**permalink**) 25/12/2011, 12:01

Hola, una pregunta en si no se ve bien, o en si no funciona para nada ni siquiera el Javascript, si nada mas es el estilo el que no se ve correctamente, ten en cuenta que de solo ie9 soporta algunas características por defecto y muy básicas de css3 (border-radius, box-shadow, etc.), para los degradados mira el siguiente post: http://www.forosdelweb.com/f53/degradados-all-browsers-966086/.

Para border-radius, usa CSS3 PIE http://css3pie.com/, te ayudará para que css3 funcione en versiones anteriores a ie9, pero no te solucionara todos los problemas, no soporta text-shadow, ni sombras internas, pero veo que no las estas usando, así que no hay problema, las sombras externas si las muestra bien.

Para .button:active, usa JavaScript, apóyate de Jquery o de algún otro.

El uso de -ie- no lo había visto, pero el de -ms-, si, se supone que este es para ie10, que no recuerdo, pero al parecer solo esta disponible para desarrolladores.

Si JavaScript es el que te da problemas, trata usando Jquery, pero al parecer el JS que usas es externo.

nos vemos.

emprear · #3 (**permalink**) 25/12/2011, 15:44

Como Doctype usá esto

Código HTML:

Ver original<!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">

y se va a ver correctamente en IE, para que los efectos de los botones sean completos en IE8/7, utilizá http://css3pie.com/ , como ya bien te señalaron

Ah y me olvidaba, hacia el final del html tenés cerrado un div que no se abre en ninguna parte (lo recomendable es que lo abras despues de <body>), y como estas usando xhtml transforma tus <br> en <br />
Saludos

skielz · #4 (**permalink**) 26/12/2011, 18:30

Muchas gracias... pegué el codigo de emprear y se solucionó el problema parcialmente... ahora voy a ver si puedo arreglarlo completamente con eso del css3pie, Si no me sale les aviso xD. Saludos.