Foros del Web » Creando para Internet » CSS »

Problema con floats en IE 7

Estas en el tema de Problema con floats en IE 7 en el foro de CSS en Foros del Web. Holas gente, verán, he realizado un diseño, testeado en los dos navegadores que uso (IE 8, Arora (webkit)) y todo bien, se me ocurrió llevarle ...
  #1 (permalink)  
Antiguo 12/02/2010, 19:43
Avatar de Julcar  
Fecha de Ingreso: noviembre-2007
Ubicación: C:\inetpub\wwwroot\Guayaquil
Mensajes: 1.500
Antigüedad: 10 años
Puntos: 53
Problema con floats en IE 7

Holas gente, verán, he realizado un diseño, testeado en los dos navegadores que uso (IE 8, Arora (webkit)) y todo bien, se me ocurrió llevarle el diseño base al cliente, y al mostrarle, él abre IE 7 y tengo un problema, se descuadra la parte medular de la pagina.

A continuacion, dejo el codigo:

Código:
<div id="wraper">
        <div class="sidebar">
          <h3 class="topper">Lorem Ipsum</h3>
          <div class="sidebox">
            <ul>
              <li><a href="#">Lorem Ipsum</a></li>
            </ul>
          </div>
          <h3 class="topper">Lorem Ipsum</h3>
          <div class="sidebox">
            <ul>
	      <li><a href="#">Lorem Ipsum</a></li>
            </ul>
          </div>
        </div>
        <div id="content">
          <h1>Lorem Ipsum</h1>
          <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
        </div>
      </div>
Código:
#wraper {
 margin-top:30px;
 width:100%;
 overflow:hidden;
 }

.sidebar {
 float:left;
 }

.sidebox {
 text-align:left;
 background:#fff;
 width:178px;
 border:solid #2A9DD3;
 border-width:0px 2px 2px 2px;
 margin-bottom:15px;
 }

#content {
 background:#fff url("../imagenes/fondo_content.PNG") no-repeat bottom right;
 width:584px;
 margin-left:30px;
 float:left;
 border:solid 2px #2A9DD3;
 }
Y por si acaso, pongo el css de las capas de las que hereda #wrapper:

Código:
* {
 padding:0;
 margin:0 auto;
 }

body {
 background:#fff url("../imagenes/fondo.png") repeat-x fixed;
 text-align:center;
 padding:10px 0px 10px 0px;
 font-family:Trebuchet MS, sans-serif;
 }

#global {
 width:800px;
 position:relative;
 margin:auto;
 margin-bottom:8px;
 overflow:hidden;
 }
Y como añadido, las imagenes de como deberia verse y cómo se ve en IE 7:

IE8 - Arora


IE7 - Vista de compatibilidad IE8
__________________
Linux no es el único S.O. libre, conoce a ReactOS el Windows Libre!
"Si mis respuestas te dan la calma, espárceme un poco de karma"
  #2 (permalink)  
Antiguo 13/02/2010, 01:12
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Problema con floats en IE 7

Es difícil encontrar el problema con ese código que has puesto. Yo lo veo en IE que FF.

Seria mas fácil encontrar el problema si pones la url de la pagina.



Saludos.
  #3 (permalink)  
Antiguo 13/02/2010, 01:27
Avatar de Julcar  
Fecha de Ingreso: noviembre-2007
Ubicación: C:\inetpub\wwwroot\Guayaquil
Mensajes: 1.500
Antigüedad: 10 años
Puntos: 53
Respuesta: Problema con floats en IE 7

Hola, gracias por responder... (ya perdia la esperanza...) :-p pues el codigo no está hosteado, simplemente es un html y un css que hice a notepad puro.

Como te digo, en IE8 se ve perfecto (al igual que los otros browsers) el problema viene cuando quiero verlo en IE7, y es que por más que intento, no puedo hacer que se ubiquen como quiero.

Pruebenlo en IE 7 y veran de lo que hablo.

Gracias.
__________________
Linux no es el único S.O. libre, conoce a ReactOS el Windows Libre!
"Si mis respuestas te dan la calma, espárceme un poco de karma"
  #4 (permalink)  
Antiguo 13/02/2010, 11:39
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Problema con floats en IE 7

ah, ya encontré el problema!.

Solo cambia esto:

* {
padding:0;
margin:0 auto;
}


Por este:

* {
padding:0;
margin:0;
}



Saludos.
  #5 (permalink)  
Antiguo 13/02/2010, 11:56
Avatar de Julcar  
Fecha de Ingreso: noviembre-2007
Ubicación: C:\inetpub\wwwroot\Guayaquil
Mensajes: 1.500
Antigüedad: 10 años
Puntos: 53
Respuesta: Problema con floats en IE 7

Sensacional

Nunca pensé que el problema iba a estar en el reset
Muchas gracias.
__________________
Linux no es el único S.O. libre, conoce a ReactOS el Windows Libre!
"Si mis respuestas te dan la calma, espárceme un poco de karma"
  #6 (permalink)  
Antiguo 13/02/2010, 14:02
 
Fecha de Ingreso: mayo-2004
Ubicación: Guadalajara, Jalisco, México
Mensajes: 724
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Problema con floats en IE 7

Otra solucion:

Cita:
* {
padding:0;
margin:0 auto;
}

body {
background:#fff url("../imagenes/fondo.png") repeat-x fixed;
text-align:center;
padding:10px 0px 10px 0px;
font-family:Trebuchet MS, sans-serif;
}

#global {
width:800px;
position:relative;
margin:auto;
margin-bottom:8px;
overflow:hidden;
}

#preloader {
display:none;
background:url("../imagenes/menu_hover.png");
}

#header {
background:#2A9DD3 url("../imagenes/logo_decapolis.PNG") no-repeat;
height:120px;
text-align:right;
}

#navbar {
background:#fff url("../imagenes/menu.PNG") repeat-x;
text-align:left;
overflow:hidden;
font-size:0.9em;
}

#navbar ul {
list-style:none;
}

#navbar ul li {
display:inline;
padding:6px 8px 5px 8px;
float:left;
background:url("../imagenes/separator.png") no-repeat right;
}

#navbar li:hover {
background:url("../imagenes/menu_hover.PNG") repeat-x;
}

#navbar a:link {color:#000;text-decoration:none;}
#navbar a:visited {color:#000;text-decoration:none;}
#navbar a:hover {color:#000;text-decoration:none;}
#navbar a:active {color:#000;text-decoration:none;}

#wraper {
margin-top:30px;
width:100%;
overflow:hidden;
}

.sidebar {
float:left;
width:200px;
}

.topper {
color:#fff;
text-align:center;
width:182px;
background:url("../imagenes/topper.GIF");
font-size:1em;
padding:3px 0px 3px 0px;
}

.sidebox {
text-align:left;
background:#fff;
width:178px;
border:solid #2A9DD3;
border-width:0px 2px 2px 2px;
margin-bottom:15px;
}

.sidebox ul, .sidebox p {
padding:6px 0px 6px 6px;
list-style:none;
}

.sidebox ul li {
background:url("../imagenes/arrow.PNG") no-repeat;
padding-left:20px;
}

.sidebox a:link {color:#000;text-decoration:none;}
.sidebox a:visited {color:#000;text-decoration:none;}
.sidebox a:hover {color:#000;text-decoration:underline;}
.sidebox a:active {color:#000;text-decoration:none;}

#content {
background:#fff url("../imagenes/fondo_content.PNG") no-repeat bottom right;
width:584px;
float:right;
border:solid 2px #2A9DD3;
}

#content h1 {
font-size:1.2em;
color:#2A9DD3;
margin-left:15px;
margin-top:15px;
text-align:left;
}

#content p {
padding:15px 210px 15px 15px;
text-align:justify;
}

#content img {
text-align:center;
padding-right:210px;
}

#footer {
background:#2A9DD3;
margin-top:30px;
color:#fff;
}

#footer ul {
list-style:none;
}

#footer ul li {
display:inline;
padding:6px 8px 5px 8px;
}

#footer a:link {color:#fff;text-decoration:none;}
#footer a:visited {color:#ff;text-decoration:none;}
#footer a:hover {color:#fff;text-decoration:underline;}
#footer a:active {color:#fff;text-decoration:none;}
__________________
Anuncios, tiendas virtuales, chat, eventos, noticias, antros y bares! sudcalifornianos http://www.sudcalifornianos.com

Etiquetas: Ninguno
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 14:08.