float: right dans IE7 pour tomber à une nouvelle ligne

J'ai été coincé sur un flotteur de problème pour un peu de temps donc j'espère que la communauté pourra m'aider à nouveau. J'ai un nouveau webform ici. Comme d'habitude, il semble bien en tout, mais IE7 (ou IE8 en compatibilité).

Pour quelque raison que certains de ces conteneurs sont en terminant par le champ de formulaire sur une nouvelle ligne sous la forme de texte. CSS n'est pas mon point fort, sinon, je serais en mesure de résoudre ce problème que je suis sûr. Quelqu'un peut me dire ce que je suis en manque ici?

J'ai essayé d'ajouter float: left à la forme de texte, mais cela s'est terminé avec un tout autre désordre.

InformationsquelleAutor CoreyT | 2011-01-25
  1. 76

    Essayer de petit changement de balisage: placer les éléments avec un flotteur avant éléments sans elle (à partir de la même ligne). Il devrait aider.

    • Bon conseil! Les joies de l'ie.
    • Cela m'a aidé aujourd'hui, ce qu'une simple correction. Merci!
    • Il n'est pas semanticly correcte. S'agit-il?
    • Id dépend.. Mais si nous avons besoin d'afficher la page correctement dans l'IE, nous n'avons pas idéal sémantique. C'est IE 🙂
    • Dois dire, j'ai vu des solutions à ce problème partout. Aucun d'entre eux travaillaient à l'exception de celui-ci, bien joué et merci 😀
    • Très belle astuce, cheers 🙂
    • Nous avons à l'appui de IE6 en raison de certains secteurs de l'etat toujours en s'appuyant sur elle et cela m'a vraiment sauvé; j'ai passé du temps à essayer de corriger cela avant de tomber sur votre réponse. Je vous remercie.

    InformationsquelleAutor oryol
  2. 2

    Je sais que ça a été un long temps depuis que cela a été posté, mais j'ai trouvé une solution que je l'aime pour cela. L'essentiel est à l'aide de "l'expression" de la balise dans votre CSS pour IE7 ne déplacer que le flottait élément à être le premier élément de la société mère dans les DOM. Il sera sémantiquement correcte pour tous les autres navigateurs, mais pour IE7 nous modifier le DOM pour déplacer le flottait élément.

    Dans mon cas, j'ai:

    <div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

    Dans mon CSS pour les pull-droit, j'utilise:

    .pull-right {
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}

    Le résultat est que IE7 mes coups <small> pour être le premier élément de <div> mais tous les autres navigateurs quitter le balisage seul.

    Cela pourrait ne pas fonctionner pour tout le monde. Techniquement, il est en train de modifier le balisage, mais seulement dans les DOM pour IE7 et c'est aussi une solution d'activer javascript.

    Aussi, je comprends qu'il peut y avoir certains problèmes de performances avec l'expression (c'est lent), donc c'est peut-être pas l'idéal, il y a beaucoup de chars comme ça. Dans mon cas, cela a bien fonctionné et m'a permis de garder sémantiquement correct HTML.

    InformationsquelleAutor Tom Greever
  3. 1

    Si vous flottez votre .formText gauche, float votre span.required gauche, puis flotter vos entrées gauche et vous devriez être en mesure de les aligner sur la même ligne.

    J'avais modifier votre balise un peu. votre <span class="formText"> devrait vraiment être un <label>

    Par exemple:

    <P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P>

    et votre css serait quelque chose comme ceci:

    .formRow {
  clear: both;
}
  .formRow label {
     float: left;
     width: 150px;
  }
  .formRow input {
     float: left;
  }
    InformationsquelleAutor Jeff
  4. 0

    Vous pouvez essayer de faire les balises span, vous avez le texte de largeur fixe, flotter à gauche, et faire de même pour le champ de saisie que vous souhaitez correspondre avec. Je recommande aussi à l'aide d'une balise d'étiquette au lieu d'une balise span dans les formulaires. Pas de véritable raison solide pour elle, c'est juste qu'une étiquette a été conçu pour exactement ce que vous avez la balise span faire.

    InformationsquelleAutor Brian
  5. 0

    Ce que vous voulez faire est d'ajouter un clear:both comme le dernier de la fratrie de votre flottait éléments.

    Donc quelque chose comme:

    <div style="float:left;">
  <!-- children of div here -->
</div>
<div style="clear:both;">
  <!-- leave empty -->
</div>
    InformationsquelleAutor Dave