Foros del Web » Creando para Internet » CSS »

Problemas con css + IE6

Estas en el tema de Problemas con css + IE6 en el foro de CSS en Foros del Web. Hola a todos. Estoy diseñando mi primera web con css, y se ve bien en todos los navegadores excepto en IE6. La web en cuestion ...
  #1 (permalink)  
Antiguo 22/05/2008, 08:00
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 8 años, 7 meses
Puntos: 0
Problemas con css + IE6

Hola a todos. Estoy diseñando mi primera web con css, y se ve bien en todos los navegadores excepto en IE6. La web en cuestion es: http://www.alonsos.es/index2.html

He probado mil cosas, entre ellas el código de Dean Edwards, sin éxito. Los problemas que tengo en IE6 son:

- El menu de arriba se descuadra debido a una imagen que hay a su derecha
- La caja Recuadro deja un margen por debajo si incluyo el texto entre lasetiquetas h3, si no, se ve bien.
- El pie de la caja Acceso se descuadra por el formulario y no lo se arreglar
- Las dos fanjas de colores del pie de la página no deberian tener esa anchura.

El código es el siguiente:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

	<head> 

		<title>Alonsos</title>
 <!--[if lt IE 8]>
 <script src="js/IE8.js" type="text/javascript"></script>
 <script src="js/ie7-squish.js" type="text/javascript"></script>
 <![endif]-->
		<link href="style.css" rel="stylesheet" type="text/css" />
		<!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<base href="http://www.alonsos.es/" />-->

		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="content-language" content="es" /> 
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" /> 
		<meta http-equiv="window-target" content="_top" /> 

		<meta name="description" content="Familia Alonso" />
		<meta name="keywords" content="alonso, alonsos" /> 

  </head>
	<body>
		<div id="container">
			
			<div id="header">
				<!--<h1>Título</h1>
				<h2>Subtítulo</h2>-->
				<div id="menuH">
					<div class="menuHitem">
				  	<ul>
				    	<li><a href="index.html" title="Opcion1">Opcion1</a></li>
				    	<li><a href="index.html" title="Opcion2">Opcion2</a></li>
				    	<li class="sel"><a href="index.html" title="Opcion3">Opcion3</a></li>
				    	<li><a href="index.html" title="Opcion4">Opcion4</a></li>
				    	<li><a href="index.html" title="Opcion5">Opcion5</a></li>
				    </ul>
					</div>
					<div id="menuHder"></div>
					<div id="menuHpie"></div>
				</div>
			</div>
			
			<div id="sidebar">
				<div class="menu">
					<div class="cabmenu"><h3>Recuadro</h3></div>
				  <div class="cuerpomenu">
				  	<ul>
				    	<li><a href="index.html" title="Uno">Uno</a></li>
				      <li><a href="index.html" title="Dos">Dos</a></li>
				      <li><a href="index.html" title="Tres">Tres</a></li>
				      <li><a href="index.html" title="Cuatro">Cuatro</a></li>
				    </ul>
				  </div>
				  <div class="piemenu"></div>
				</div>
				<div class="menu">
					<div class="cabmenu">
						Acceso
					</div>
					<div class="cuerpomenu" style="padding: 10px 20px;">
						<form name="login" method="post" action="index.php">
							<label for="username">Usuario:</label><input type="text" name="username" size="10"/>
							<label for="password">Contraseña:</label><input type="password" name="password" size="10"/>
							<input type="submit" value="enviar"/>
						</form>
					</div>
				  <div class="piemenu"></div>
				</div>
			</div>
			
			<div id="main">
				<h3>Sección </h3>
				<p>Contenido principal</p>
			</div>
			
			<div id="footer">
				<div id="barrapie1"></div>
				<div id="barrapie2"></div>
				<div id="pie">
					<a href="http://validator.w3.org/check?uri=referer" rel="external"><img src="Images/xhtml10.gif" alt="Valid XHTML 1.0 Strict" style="border:0;width:80px;height:15px" /></a>
					<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external"><img style="border:0;width:80px;height:15px" src="Images/css.gif" alt="¡CSS Válido!" /></a>&nbsp;
				</div>
			</div>
		</div>
	</body>
</html>
Y del css:
Código:
body {
	text-align: center;
	margin: 0px;
	/*font-family: HeliosCond, Verdana;
	font-size: 12pt;*/
}

#container {
	width: 780px;
	margin: 0px auto;
	text-align: left;
}

#header {
	background: url(Images/Alonsos_Cabecera.jpg) top left no-repeat;
	width: 780px;
	height: 170px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 200px;
	padding: 10px;
	float: left;
}

#main {
	margin-left: 225px;
}

#footer {
	clear: both;
}

.menu{
   width: 160px;
   margin-left: 17px;
}

.cabmenu{
   /*font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;*/
	background-image: url("Images/Menu_cab.jpg");
	background-repeat: no-repeat;
	text-align: center;
	height: 27px;
}

.cuerpomenu{
   /*font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #F5ECB9;*/
  border-left: 1px solid #6F88DC;
  border-right: 1px solid #6F88DC;
}

.cuerpomenu ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.cuerpomenu li{	
	background: url(Images/Bullet.jpg) 1em 0.3em no-repeat;
	padding-left: 30px;
  border-bottom: 1px solid #6F88DC;
  /*border-top-width: 0px;*/
}

.cuerpomenu li a {
	color: #000;
	text-decoration: none;
	display: block;
}

/*#cuerpomenu li a:hover {
	background-color: #000;
	color: #fff;
}*/

.piemenu {
	background-image: url("Images/Menu_pie.jpg");
	background-repeat: no-repeat;
	height: 38px;
}

#barrapie1 {
	background-color: #608BA5;
	height: 7px;
}

#barrapie2 {
	background-color: #C1C1C1;
	height: 3px;
}

#pie {
	background: url(Images/Alonsos_Pie.jpg) top left no-repeat;
	width: 780px;
	height: 19px;
	text-align: right;
	padding-top: 1px;
	/*padding: 1px 5px 0px 0px;*/
}

#menuH {
	float: right;
	margin-top: 104px;
  width: 564px;
  height: 66px;
}

.menuHitem ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.menuHitem li {
	float: left;
	width: 104px;
	height: 28px;
	background-image: url(Images/MenuH_PestNoSel.gif);
	background-repeat: no-repeat;
	text-align: center;
}

li.sel {
	float: left;
	width: 104px;
	height: 28px;
	background-image: url(Images/MenuH_PestSel.gif);
	background-repeat: no-repeat;
	text-align: center;
}

.menuHitem li a {
	color: #000;
	text-decoration: none;
	display: block;
}

#menuHder {
	background: url(Images/MenuH_Der.gif) bottom right no-repeat;
	width: 44px;
	height: 28px;
}

#menuHpie {
	background: url(Images/MenuH_Pie.jpg) bottom right no-repeat;
	width: 564px;
	height: 38px;
}

.formulario {
	margin: 0px;
}
.boton_frm {
	background: url(Images/Btn_azul.jpg) top left no-repeat;
	width: 96px;
	height: 17px;
	border: 0px;
}

.campo {
	width: 96px;
}
Agradeceria enormemente cualquier ayuda.
  #2 (permalink)  
Antiguo 22/05/2008, 09:45
Avatar de geek08  
Fecha de Ingreso: mayo-2008
Ubicación: En algun lugar...
Mensajes: 31
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con css + IE6

Hola Acelsp..
Mira para validar un sitio en ie6 lo que tenes q modificar es tu hoja de estilo. Ejemplo:
#div {float:left;margin-top:20px} //esto es lo normal
lo que podes hacer es :
#div {float:left;margin-top:20px;} //esto funciona en ie6
#div[class]{float:left;margin-top:40px;} //esto lo toma en los demas navegadores..

Espero q te ayude.. Cualquier cosa busca hacks de css para validar..
Suerte!
  #3 (permalink)  
Antiguo 22/05/2008, 10:58
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con css + IE6

Todas esas cosas ya las he estado mirando. Por el momento me gustaria hacerla funcionar bien en IE6, y después ya me preocuparé de usar hacks o lo que sea. Es que no consigo hacer que me cuadre nada en IE6.
  #4 (permalink)  
Antiguo 22/05/2008, 11:28
Avatar de geek08  
Fecha de Ingreso: mayo-2008
Ubicación: En algun lugar...
Mensajes: 31
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problemas con css + IE6

Lo que pasa q la unica forma de hacer q un sitio creado bajo estandares se vea bien en ie6 es aplicando hacks.. no si si [class] es un hack pero sirve y aparte cuando lo validas con la w3c funciona perfecto. Suerte.
  #5 (permalink)  
Antiguo 09/08/2011, 12:16
Avatar de miros84  
Fecha de Ingreso: diciembre-2008
Mensajes: 351
Antigüedad: 8 años
Puntos: 4
Respuesta: Problemas con css + IE6

Yo he encontrado una solucio unica y va bastante bien.

Pon este codigo en el header y IE6 funcionará como IE9

Código:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:46.