Ne peut pas obtenir le flotteur gauche/droit de travailler pour un div dans Internet Explorer

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 de 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 être de deux colonnes, l'une avec du texte et une avec une Icône et une petite quantité de texte. Comment puis-je faire ce travail dans IE? J'ai essayé la div clair=à la fois chose et ce n'est pas de faire quoi que ce soit.

Aussi upvotes pour n'importe qui qui peut me donner quelques conseils sur la façon d'écrire des pages et à l'utilisation des styles qui fonctionnent sur FF, Chrome et IE >= 7.

InformationsquelleAutor aarona | 2009-09-18

3

pourrait être parce que vous n'êtes pas de la définition d'un doctype et IE est de l'affichage de votre page dans Quirksmode comme apposer aux Normes de la mode (ou presque Standard).

Lire 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 de se comporter comme elles le devraient (comme dans FF & Chrome)
- W00t! Ce petit quelque chose de fixe!
InformationsquelleAutor Wayne Austin
2

Je peux vous proposer plusieurs choses même si je ne suis pas sûr de ce qui vous sera utile si, en effet, aucun d'entre eux seront:
1. Mettre un DOCTYPE (par exemple de Transition HTML 4.01) sur votre document. Cela oblige IE en soi-disant "conforme aux normes" mode plutôt que de la euphémique de "bizarreries" mode;
2. Ne pas réutiliser la gauche et la droite classes comme ça. Il vous oblige à utiliser le sélecteur d'enfant qui n'est IE7+ et il n'y a pas besoin pour cela;
3. Si votre div contient rien, mais flotteurs il aura 0 hauteur. Vous pouvez remédier à cela en mettant un 0 div de hauteur au-dessous d'eux avec "clear: both" ou "overflow: hidden" sur le parent;
4. Se débarrasser de align="center". Ce n'est pas la norme.
Voici un squelette à envisager l'utilisation de:
```
<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.
- merci pour les conseils. Tout ce que j'avais à faire était d'ajouter le doctype et cela a fonctionné. Vous obtenez un +1 pour cette information. Je vais utiliser cette ainsi.
InformationsquelleAutor cletus
1

D'abord j'avais sauté tous
```
div#main-header-content > div.left
```
et de le remplacer avec
```
div#main-header-content div.left
```
comme ils ne travaillent pas dans IE6.

Deuxièmement, je voudrais utiliser
```
div.right {
    float: left;
}
```
Et de plus, je serais certainement sauter <div align="center">...</div>, car c'est déconseillé. Au lieu de cela, je voudrais réorganiser div.contenu de
```
div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}
```
Le truc pour le centre (à l'aide de position:relative ou position:absolute) définir le point à gauche à la moitié de la largeur, puis déplacer la marge arrière à la moitié de la largeur de l'élément (où l '"élément" est l'élément que vous souhaitez au centre).

InformationsquelleAutor Aron Cederholm

modifié le css

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 classe u essayer cela fonctionne bien sous IE et Firefox aussi..

InformationsquelleAutor Murugesh

Vous devez vous connecter pour publier un commentaire.