css en ie se mueve a la izquierda

manuel2788 · #1 (**permalink**) 13/03/2011, 16:17

Buenas tardes, acudo a ustedes ya que tengo varios días partiendome la cabeza con el "bendito" IE, específicamente la versión 9

Resulta que tengo un estilo css que funciona de maravilla en Chrome, Firefox, Safari, Opera... pero en ie el site se corre hacia la izquierda y desorganiza todo. Me gustaría le hecharan una ojeada y me dieran su opinión sobre cual puede ser el error.

Cabe destacar que dicho css fue pasado por un validador de css, teniendo como resultado, cero errores.

Código:

body {
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-top: 10px;
	background-image: url(imagenes/fondo.jpg);
}


h2 {
	text-align:center;	
}

#contenedor {
	width:800px;
	margin:auto auto;
	font-family:Helvetica, Arial, verdana;
	font-size:12px;
	text-transform:none;
	color:#FFF;
	font-variant:normal;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

a:link {text-decoration: none; color: #99CC00;} /* Link no visitado*/
a:visited {text-decoration :none; color:#99CC66} /*Link visitado*/
a:active {text-decoration: none; color:#99FF00;} /*Link activo*/
a:hover {text-decoration: none; color:#99FF00;} /*Mause sobre el link*/

#logo {
	height: 150px;
	width: 800px;
}

#menu {
	text-align: center;
	height: 50px;
	width: 800px;
	clear: both;
	background: url("imagenes/menu_h.png");
}
#menu ul{
		list-style-type: none;
		text-align: center;
}
#menu li{
		list-style: none;
		display: inline;
		margin: 0 10px;
}
#menu li a{
		color: #FFF;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: bold;
		text-decoration: none;
		line-height: 43px;
		padding: 8px 15px;				
}
#menu li a:hover{
	color: #FFF;
	background: #000;
	border: 0px solid #fff;
}

#menu li a.current{
	display: inline;
	border: 1px solid #000;
	color: #FFF;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	padding: 8px 15px;
	line-height: 43px;
}

#menu li a:hover.current{

}

#content_left {
	width: 200px;
	height: 400px;
	float: left;
	background: url("imagenes/content_left.png"); 
	margin-top: 1px;
}

#div {
	margin: 6px;	
}

#div label {
	width: 100px;
	float: left;
	text-transform: capitalize;
}

#content_center {
	width: 398px;
	height: 400px;
	float: left;
	background: url("imagenes/content_center.png");
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 1px;
}

.scroll {
	overflow: auto;
}

#content_right {
	width: 200px;
	height: 400px;	
	float: right;
	background: url("imagenes/content_right.png");
	margin-top: 1px
}

#footer {
	width: 800px;
	height: 50px;
	clear: both;
	text-align: center;
	background: url("imagenes/footter.png");
}

Gracias de antemano a todos aquellos que se interesen por el post.

Saludos

pitufoweb · #2 (**permalink**) 13/03/2011, 16:50

Y el HTML???...Seria mucho mas fácil ayudarte si subes tu sitio a un servidor y nos pasas la URL para ver cual es el problema. Tampoco me preocuparía mucho por IE9, pues aun no es la versión final.

Saludos.

manuel2788 · #3 (**permalink**) 13/03/2011, 16:56

Se me había olvidado colocar el html, gracias.

Lamentablemente mi servicio de hosting está suspendido, me encuentro realizando pruebas en servidor local.

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">
<head>
<meta http-equiv="Content-Type"" />
<meta name="keywords" content="" />
<meta name="description" content="." />
<link rel="shortcut icon" href="imagenes/animated_favicon1.gif" />

<title>Retalos:Pron&oacute;sticos Deportivos</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="wrap" #wrap>

<div id="contenedor" #contenedor>

	<div id="logo" #logo>
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="150" id="FlashID" title="Retalos">
	    <param name="movie" value="animacion/animacion.swf" />
	    <param name="quality" value="high" />
	    <param name="wmode" value="transparent" />
	    <param name="swfversion" value="6.0.65.0" />
	    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
	    <param name="expressinstall" value="Scripts/expressInstall.swf" />
	    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
	    <!--[if !IE]>-->
	    <object type="application/x-shockwave-flash" data="animacion/animacion.swf" width="800" height="150">
	      <!--<![endif]-->
	      <param name="quality" value="high" />
	      <param name="wmode" value="transparent" />
	      <param name="swfversion" value="6.0.65.0" />
	      <param name="expressinstall" value="Scripts/expressInstall.swf" />
	      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
	      <div>
	        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
	        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
	      <!--[if !IE]>-->
        </object>
	    <!--<![endif]-->
      </object>
    
</div>
    
    <div id="menu">
		<ul>
			<li><a href="index.php" class="current">Inicio</a></li>
			<li><a href="quienes_somos.php">Quienes Somos</a></li>
			<li><a href="registro.php">Registro</a></li>
			<li><a href="terminos_y_condiciones.php">Terminos y Condiciones</a></li>
			<li><a href="#">Foro</a></li>
			<li><a href="quinielas.php">Quinielas</a></li>								
		</ul>
	</div>
    
    <div id="content_left" #content_left>
	
		<FORM name="form" action="entrar.php" method="post">
		
			<div id="div" #div>
			<label for="nick">Nick</label>
			<input type="text" name="nick" size=15 maxlength=20>
			</div>
		
			<div id="div" #div>
			<label for="password">Password</label>
			<input type="password" name="password" size=15 maxlength=50>
			</div>
		
			<div id="div" #div>
            <input type="reset" value="Reiniciar" />
			<input type="submit" value="ingresar">
			</div>
			
		</FORM> 
		
		<!-- Start of Zopim Live Chat Script -->
		<script type="text/javascript">
		document.write(unescape("%3Cscript src='" + document.location.protocol + "//zopim.com/?b9vlOCvZV65wwMG0LBHhs3kNPsGw7Pso' charset='utf-8' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script>$zopim.livechat.setLanguage('es')</script>
		<!-- End of Zopim Live Chat Script -->
	
	</div>
    
    <div id="content_center" #content_center></div>
    
    <div id="content_right" #content_right></div>
    
 	 <div id="footer" #footer> <br />Dise&ntilde;ado por<br /> Todos los Derechos Resevados...</div> 
    	
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

</div>
</body>

</html>

Por cierto, se ve mal no solo en IE9, en todas sus versiones.

pitufoweb · #4 (**permalink**) 13/03/2011, 17:21

Tu código HTML tiene muchos errores muy básicos...Te recomiendo leer este libro; http://www.librosweb.es/xhtml/index.html .

Saludos.

manuel2788 · #5 (**permalink**) 13/03/2011, 17:29

Vale, gracias.

Pregunto: El error que presenta en IE es por el css o por los errores que comentas de HTML?

pitufoweb · #6 (**permalink**) 13/03/2011, 17:45

Lo mas probable es que sea por los errores del código HTML...Primero corrige todos los errores y después prueba otra ves.

Saludos.

manuel2788 · #7 (**permalink**) 13/03/2011, 17:52

Vale, gracias.