Tengo una web, en la que todos sus apartados estan basados en una plantilla, el caso es que el código que tengo en la plantilla para que Explorer 6 coja su propia hoja de estilos es este:
Código HTML:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <!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> <link rel="stylesheet" type="text/css" href="../templates/estilorevistamotos.css"> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="../templates/estilorevistamotosIE.css"> <![endif]-->
Aparte de esto, el explorer me respeta casi todos los estilos de la hoja de estilos principal "estilorevistamotos.css" excepto algunos y no entiendo porque. Básicamente el problema lo tengo con un pixel a la izquierda que se inventa o eso me parece a mí y que en teoría pensaba solucionar con la hoja de estilos para Explorer pero que tampoco va bien y sobre todo con un formulario dentro de un li que haga lo que haga me coge 8 pixels más de anchura de lo que le pongo cuando en Firefox se ajusta perfectamente.
Estos son algunos de los estilos importantes es la hoja de estilos original.
Código HTML:
#todo{
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:775px;
max-height: auto;
}
.rojo{
background-color: #800001;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
float:left;
width:775px;
margin:0px;
}
#cabecera{
width: 775px;
float:left;
margin-right: auto;
margin-left: auto;
height: 121px;
background-image: url(../imagenes/cabeceramotos.jpg);
}
.izquierda1{
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding-left:2px;
padding-top:2px;
padding-bottom:2px;
width:348px;
float:left;
background-color: #800001;
}
.espacio{
float:left;
width:75px;
background-color: #800001;
padding-top:2px;
padding-bottom:2px;
}
.derecha1{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;
width:348px;
float:left;
background-color: #800001;
}
.contenedor{
width: 775px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color:#FFFFFF;
/*min-height:786px;*/
min-height:589px;
min-height:auto;
height:!important auto;
max-height: 786px;
height: 775px;
}
.columnaizquierda{
float: left;
width: 170px;
margin-top:4px;
margin-left: 3px;
margin-right: 3px;
text-align: left;
/*padding: 2px;*/
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
/*background-color:#000000;*/
list-style-type: none;
color:#FFFFFF;
/*height:360px;*/
}
.columnaizquierda ul{
list-style-type: none;
background-color:#FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}
.columnaizquierda ul li{
margin:0 0 4px 0;
font-weight:bold;
}
.col1 a{
color:#FFF;
text-decoration:none;
background-color:#800001;
border: 1px solid #000;
/*width:162px;*/
width:162px;
padding:3px;
display: block;
}
.col1 a:hover{
color:#800001;
background-color:#FFF;
}
.centrado{
margin:0px;
padding:0px;
}
.centrado2{
float:left;
margin-top:0px;
margin-left:3px;
margin-right:3px;
height:171px;
background-color:#FFFFFF;
}
.portada{
float:left;
margin-top: 4px;
margin-bottom: 4px;
width: 422px;
height: 592px;
max-height: 592px;
}
.columnaderecha{
float:left;
float:right;
width:171px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 3px;
margin-right: 3px;
background-color:#000000;
}
div.columnaderecha ul{
margin:0px;
list-style-type: none;
/*text-align: left;*/
padding: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color:#000000;
}
div.columnaderecha ul li{
margin:0px;
list-style-type: none;
/*text-align: left;*/
background-color:#000000;
}
#datos{
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #FFFFFF;
height: 45px;
width: 100%;
margin: 0px;
}
Este es el código fuete en html, a partir de <div class="columnaderecha"> empieza la zona que no se porque me agranda en Explorer, he probado a ponerle al form style="width:171px;" a mano, a cambiar el tamaño del size del cuadro de texto formulario, a cambiar el estilo pero no consigo que coja el ancho que quiero y que en Firefox coge sin problemas:
Código HTML:
<body> <div id="todo"> <div id="cabecera"></div> <div class="rojo"> <div class="izquierda1">13:15:11</div> <div class="espacio"> </div> <div class="derecha1">26/08/2008</div> </div> <div class="contenedor"> <!--<div>--> <div class="columnaizquierda"> <ul> <li class="col1"> <a href="index.asp">Inicio</a></li> <li class="col1"> <a href="noticiasDiv.asp">Noticias</a></li> <li class="col1"> <a class="col1" href="pruebasDiv.asp">Pruebas</a></li> <li class="col1"> <a href="contacto.asp">Contacto</a></li> <li class="col1"> <a href="comparativaDiv.asp">Comparativa</a></li> <li class="col1"> <a href="linksDiv.asp">Links</a></li> <li class="col1"> <a href="usuariosDiv.asp">Zona de usuarios</a></li> </ul> <div class="centrado"> <a href="http://www.dainese.com"><img src="imagenes/bannerdainese.gif" alt="Banner Dainese" border="0"/></a></div> </div> <!-- InstanceBeginEditable name="Editable" --> <div class="portada"><img src="imagenes/bike_cover.jpg" alt="portada" /> </div> <!-- InstanceEndEditable --> <div class="columnaderecha"> <ul> <form id="form1" name="form1" method="post" action=""> <li><input name="buscador" type="text" size="23" /> <input name="buscador" type="radio" value="1" checked="checked"/> Noticias<br/> <input name="buscador" type="radio" value="2" checked="checked"/> Pruebas</li> <li> <input type="submit" name="button" id="button" value="Buscar" /> </li> </form> </ul> </div> <div class="centrado2"> <a href="http://www.alpinestars.com"><img src="imagenes/banneralpinestars.gif" alt="Banner AlpineStars" width="171" height="171" border="0"/></a> </div> </div> <div id="datos"></div> </div>
Agradecería mucho cualquier ayuda.
