Problema con floats en IE 7

[Julcar]

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

[pitufoweb]

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.

[Julcar]

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.

[pitufoweb]

ah, ya encontré el problema!.

Solo cambia esto:

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


Por este:

* {
padding:0;
margin:0;
}



Saludos.

[Julcar]

Sensacional

Nunca pensé que el problema iba a estar en el reset
Muchas gracias.

[Stream]

Otra solucion:

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