No se puede hacer que flotador izquierda / derecha funcione para un div en Internet Explorer

StackOverflow https://stackoverflow.com/questions/1443007

Pregunta

Aquí está el html: 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

y styles.css: 

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

Esto funciona bien en FF y Chrome. Deben ser dos columnas, una con texto y otra con un icono y una pequeña cantidad de texto. ¿Cómo puedo hacer que esto funcione en IE? Probé el div clear = ambas cosas y eso no está haciendo nada.

También vota a favor de cualquiera que pueda darme algunos consejos sobre cómo escribir páginas y usar estilos que funcionen en FF, Chrome e IE > = 7.

¿Fue útil?

Solución

podría deberse a que no está definiendo un doctype e IE está visualizando su página en Quirksmode como un modo estándar (o casi estándar).

Lea este artículo para obtener más información:

http://www.quirksmode.org/css/quirksmode.html

He revisado su sitio en modo estándar y en IE7 la columna 2 se comporta como debería (como en FF & amp; Chrome)

Otros consejos

Puedo sugerir varias cosas, aunque no estoy seguro de qué ayudará si alguna de ellas lo hace:

  1. Coloque un DOCTYPE (por ejemplo, Transitional HTML 4.01) en su documento. Esto obliga a IE a lo que se llama & Quot; compatible con los estándares & Quot; modo en lugar del eufemístico " peculiaridades " modo;
  2. No reutilices las clases izquierda y derecha de esa manera. Te obliga a usar el selector secundario, que solo es IE7 + y no es necesario;
  3. Si tu div no contiene nada más que flota, tendrá 0 de altura. Puede abordar esto colocando un divisor de altura 0 debajo de ellos con & Quot; claro: ambos & Quot; en él o " desbordamiento: oculto " en el padre;
  4. Deshazte de align = " center " ;. Eso no es estándar.

Aquí hay un esqueleto para considerar usar: 

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

combinado con: 

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

y así sucesivamente.

Primero me había saltado todo 

div#main-header-content > div.left

y reemplazar con 

div#main-header-content div.left

ya que no funcionan en IE6.

En segundo lugar, usaría 

div.right {
    float: left;
}

Y adicionalmente, definitivamente omitiría <div align="center">...</div>, ya que está en desuso. En cambio, reorganizaría div.content a 

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

El truco para centrar es (usando position: relative o position: absolute) establecer el punto izquierdo a la mitad del ancho, y luego mover el margen a la mitad del ancho del elemento (donde el 'elemento' es el elemento quieres centrar).

CSS modificado 

div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

En lugar de ur css para estas clases, intente que esto funcione bien en IE y Firefox también ...

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top