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:
Y del css:<!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>
Código:
Agradeceria enormemente cualquier ayuda. 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;
}
