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; }