flotador: justo en IE7 cayendo a una nueva línea

Question

He estado atascado en un tema de flotación por un tiempo, así que espero que la comunidad pueda ayudarme de nuevo. Tengo un nuevo formulario web here. Como de costumbre, se ve bien en todo menos en IE7 (o IE8 en compatibilidad).

Por alguna razón, algunos de los contenedores terminan con el campo de formulario en una nueva línea debajo del texto del formulario. CSS no es mi punto fuerte; de ​​lo contrario, podría solucionarlo, estoy seguro. ¿Alguien puede decirme qué me falta aquí?

Intenté agregar float: lo dejé al texto del formulario pero terminó con un lío completamente diferente.

Answer 1

Tratar de pequeño cambio marcado: coloque artículos con un flotador antes de partidas sin ella (de la misma fila). Debería ayudar.

Answer 2

Puede tratar de hacer que las etiquetas de tramo que tiene para el texto tengan un ancho fijo, dejarlas a la izquierda y hacer lo mismo para el campo de entrada que desea corresponder. También recomendaría usar una etiqueta etiquetada en lugar de una etiqueta span en los formularios. No hay una razón real sólida para ello, es solo que una etiqueta se diseñó para exactamente lo que tiene que hacer la etiqueta span.

Answer 3

Lo que quieres hacer es agregar un claro: ambos como el último hermano de tus elementos flotados.

Así que algo como:

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

Answer 4

Si deja flotar su .formText a la izquierda, flote su span.required a la izquierda, y luego haga flotar las entradas a la izquierda también, debería poder alinearlas en la misma línea.

Modifico un poco tu marcado. su <span class="formText"> realmente debe ser un <label>

Por ejemplo:

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

y el CSS sería algo como esto:

.formRow { 
    clear: both; 
} 
    .formRow label { 
    float: left; 
    width: 150px; 
    } 
    .formRow input { 
    float: left; 
    } 

Answer 5

Sé que ha pasado mucho tiempo desde que este fue publicada, pero Encontré una solución que me gusta para esto. La esencia está usando la etiqueta 'expresión' en su CSS para IE7 solo para mover el elemento flotante para que sea el primer elemento del elemento primario en el DOM. Será semánticamente correcto para todos los demás navegadores, pero para IE7 modificamos el DOM para mover el elemento flotante.

En mi caso, que tengo:

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

En mi CSS para pull-derecha, que utilizo:

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

El resultado es que IE7 mueve mi <small> a ser el primer elemento de <div> pero todos los demás navegadores dejan el marcado solo.

Esto podría no funcionar para todos. Técnicamente, está modificando el marcado pero solo en DOM para IE7 y también es una solución de JavaScript.

Además, entiendo que puede haber algunos problemas de rendimiento con la expresión (es lento), por lo que quizás no sea ideal, hay muchas carrozas como esta. En mi caso, funcionó bien y me permitió mantener HTML semánticamente correcto.