Comment réparer IE7 float-clair combinaison

J'ai un field_wrapper classe div qui contient les 3 sous divs field_label, field_input et field_error

J'ai besoin de mettre la field_label, field_input côte à côte et field_error ci-dessous les deux premières.

Veuillez voir ci-dessous le code css pour savoir comment j'ai réalisé cela, Mon problème est que Sa ne fonctionne pas dans IE7. claire appliquée à la field_error ne fonctionne pas.

Même après googler pour un long moment je ne peux pas trouver une méthode pour résoudre ce sans ajouter les balises HTML. S'il vous plaît conseils css conseil ou de toute autre méthode pour éviter extra code de balisage

.field_wrapper
{
 clear:both;
}

.field_label
{
 float:left;
 width:40%;
}
.field_input
{
 float:left;
 width:40%;
}
.field_error
{
 clear: both;
 color:#FF0000;
 float: right;
 text-align:left;
 width: 60%;
}

<form method="post" action="http://localhost/locations/add">
 <div class="field_wrapper">
  <div class="field_label">
   <label for="location_add_name">Name</label>
  </div>
  <div class="field_input">
   <input type="text" id="location_add_name" value="" name="name">
  </div>
  <div class="field_error">
   <p>The Name field is required.</p>
  </div>
 </div>
 <div class="field_wrapper">
  <div class="field_label">
   Address
  </div>
  <div class="field_input">
   <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
  </div>
  <div class="field_error">
  </div>
 </div>
 <div class="form_submit">
  <input type="submit" value="Add" name="submit"> 
 </div>
</form>

OriginalL'auteur Mithun Sreedharan | 2010-02-16

  1. 5

    Si vous ne voulez pas retirer le flotteur gauche. Vous pouvez utiliser ce code wrapper

    .field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }

    Il fonctionne pour moi à chaque fois (IE6)

    Mise à jour:

    J'ai regardé encore une fois, et changé le balisage un peu, aussi fait-il valide en xhtml.
    Il suffit de mettre la classe sur la balise P, vous n'avez pas besoin d'un supplément div.

        .field_wrapper
    {
     clear:both;
    }

    .field_label
    {
     float:left;
     width:40%;
    }
    .field_input
    {
     float:left;
     width:40%;
    }
    .field_error
    {
     clear: both;
     color:#f00;
     width: 60%;
    }


<form method="post" action="http://localhost/locations/add">
    <div class="field_wrapper">
        <div class="field_label">
            <label for="location_add_name">Name</label>
        </div>
        <div class="field_input">
            <input type="text" id="location_add_name" value="" name="name" />
            <p class="field_error">The Name field is required.</p>
        </div>
    </div>

    <div class="field_wrapper">
        <div class="field_label">Address</div>
        <div class="field_input">
            <textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
        </div>
    </div>
    <div class="form_submit">
        <input type="submit" value="Add" name="submit" /> 
    </div>
</form>
    J'ai utilisé votre code, voir ici tinypic.com/m/96xlwn/4 c'est Ce que je suis arriver dans IE7 tinypic.com/m/96xlkk/4 c'est Ce que je suis arriver dans Firefox tinypic.com/m/96xlkl/4 il ne fonctionne pas

    OriginalL'auteur Allan Kimmer Jensen

  2. 3

    Supprimer float:right de "field_error'

    Certains comment celui-ci a travaillé, mais... je sais que cela fonctionne??

    OriginalL'auteur Zhivago

  3. 2

    laissez-moi vous dire une chose d'abord. si vous avoir flottant contenu dans un conteneur, le conteneur ne contiennent jamais jusqu'à ce que et à moins que vous mettre le récipient propriété overflow hidden ou également faire flotter à vous. comme 

    .field_wrapper
{
 clear:both;
 overflow:hidden;
}

    Maintenant, il contient tous les élément flottant. Maintenant, pour votre erreur div comme vous êtes flottant vous des éléments à gauche, de manière à le rendre clair:la gauche seulement et il va fonctionner.

    Grâce

    votre solution ne fonctionne pas pour moi
    Pouvez-vous m'indiquer le lien de la page, je vais le faire facilement. Mais c'est la solution Si vous l'appliquer correctement. Si vous ne l'obtenir. Laissez-moi savoir, je vais créer et télécharger une page quelque part....

    OriginalL'auteur Shakeeb Ahmed