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>
</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.