Impossible de faire flotter à gauche / droite pour travailler pour une div dans Internet Explorer

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

Question

Voici le code 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>

et 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;
}

Cela fonctionne bien dans FF et Chrome. Il devrait s'agir de deux colonnes, l'une avec du texte, l'autre avec une icône et une petite quantité de texte. Comment puis-je faire ce travail dans IE? J'ai essayé le div clear = les deux et ça ne fait rien.

Également des votes positifs pour tous ceux qui peuvent me donner des conseils sur la rédaction de pages et sur l'utilisation de styles compatibles avec FF, Chrome et IE > = 7.

Était-ce utile?

La solution

pourrait être dû au fait que vous ne définissez pas un type de document et que IE visualise votre page en mode Quirksmode comme correspondant au mode Standards (ou presque standard).

Lisez cet article pour en savoir plus:

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

J'ai vérifié votre site en mode standard et dans IE7, la colonne 2 se comporte comme il se doit (comme dans FF & et Chrome)

.

Autres conseils

Je peux suggérer plusieurs choses, même si je ne suis pas sûr de savoir ce qui aidera, voire aucun d'entre eux:

  1. Placez un DOCTYPE (par exemple, Transitional HTML 4.01) sur votre document. Cela force IE dans ce qu'on appelle & "; Conforme aux normes &"; mode plutôt que l'euphémisme " quirks " mode;
  2. Ne réutilisez pas les classes gauche et droite comme ça. Cela vous oblige à utiliser le sélecteur d'enfants qui est uniquement IE7 + et ce n'est pas nécessaire;
  3. Si votre div ne contient que des flotteurs, sa hauteur sera de 0. Vous pouvez résoudre ce problème en mettant un div de hauteur 0 en dessous d'eux avec & Quot; clear: both & Quot; dessus ou " débordement: hidden " sur le parent;
  4. Débarrassez-vous de align = " center " ;. Ce n'est pas standard.

Voici un squelette à utiliser: 

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

combiné avec: 

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

et ainsi de suite.

Tout d'abord, j'ai sauté tous les 

div#main-header-content > div.left

et remplacer par 

div#main-header-content div.left

car ils ne fonctionnent pas dans IE6.

Deuxièmement, j'utiliserais 

div.right {
    float: left;
}

Et en plus, je sauterais certainement <div align="center">...</div>, car il est déconseillé. Au lieu de cela, je réorganiserais div.content sur 

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

Le truc à centrer consiste à (en utilisant position: relative ou position: absolue), définissez le point gauche sur la moitié de la largeur, puis ramenez la marge sur la moitié de la largeur de l'élément (où "élément" est l'élément vous voulez centrer).

css modifié 

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

Au lieu de ur css pour ces classes, essayez, cela fonctionne très bien dans IE et Firefox aussi.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top