Foros del Web » Creando para Internet » CSS »

Problemas raros con capas, css y Ie 6

Estas en el tema de Problemas raros con capas, css y Ie 6 en el foro de CSS en Foros del Web. Buenos días, Tengo una web, en la que todos sus apartados estan basados en una plantilla, el caso es que el código que tengo en ...
  #1 (permalink)  
Antiguo 26/08/2008, 06:35
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Problemas raros con capas, css y Ie 6

Buenos días,

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]--> 
En otra web diferente también lo tengo en el documento de la plantilla y por tanto en todos los demás ya que estan basados en él y coge los estilos de Explorer perfectamente pero en este no me hace ni caso.

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">&nbsp;</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.
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:45.