Posicionamiento en navegadores cruzados

Esto es lo que tengo:

#nameDiv
{
    height: 0px;
    width: 20px;
    position: relative;
    top: -22px;
    left: 134px;
}

#nameDivDuplicate
{
    height: 0px;
    position: relative;
    top: -22px;
    left: 134px;
    width: 20px;
}

Y en mi opinión tengo:

<tr>
    <td><b>Name:</b> </td><td><input type="text" id="txtName" maxlength="100"/>
    <div id="nameDiv"  title="The Name is required.">
        <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
        <img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/>
    </div>
    </td>
    <td>Address: </td><td><input type="text" id="txtAddress"  maxlength="100"/> </td>
</tr>

Los divs nameDiv y nameDivDuplicate tienen sidplay:none al principio. Luego, con jquery se los muestro. Necesito que se muestren en el mismo lugar que txtName (a su derecha).

El código anterior es bueno para Google Chrome, pero no para los demás navegadores. ¿Cómo se maneja esto?

preguntado el 22 de mayo de 12 a las 18:05

FYI no existe tal cosa como un title atributo en img elemento. O así como en cualquier otro elemento HTML (div, tabla, lo que sea), no en la forma en que pretendías agregarlo. Lo que quisiste decir fue un alt atributo (obligatorio en img), tal vez su confusión proviene de los IE antiguos que, si no recuerdo mal, durante mucho tiempo mostraron alt como información sobre herramientas y mostraron el título si faltaba img, exactamente lo contrario de lo que debería hacerse. EDITAR Lo que está bien es un atributo de título en los enlaces cuando su texto no es suficiente por sí mismo. -

2 Respuestas

position:relative se supone que debe usarse junto con position:absolute, Donde position:relative en un elemento principal es establecer el punto de origen del elemento secundario absolutamente posicionado.

No lo estás usando de esta manera.

contestado el 22 de mayo de 12 a las 18:05

Tienes que tener mucho cuidado con la posición: relativa. Realmente puede darte algunos dolores de cabeza. Ha habido muchos problemas (en IE en particular) con position:relative.

Recomendaría no usarlo en este caso. Más bien, colocaría etiquetas td adicionales alrededor de sus dos imágenes de error para que creen su propia columna. Esto los colocará a la derecha del cuadro de entrada de txtName.

<tr>
<td><b>Name:</b> </td>
<td><input type="text" id="txtName" maxlength="100"/></td>
<td>
    <div id="nameDiv"  title="The Name is required.">
       <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
       <img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/>
    </div>
</td>
<td>Address: </td><td><input type="text" id="txtAddress"  maxlength="100"/> </td>
</tr>

EDITAR: como dijiste que no querías una nueva columna, podrías agregar una etiqueta div alrededor de todo lo que está dentro de esa etiqueta td y usar float:left para alinearlos todos, o podrías establecer el ancho.

#nameDiv { width: 20px; float:left; }
#nameDivDuplicate { float:left; }
#txtName { float:left; }

Puse en negrita el nuevo DIV que agregué.

<td><b>Name:</b> </td>
<td>
  **<div>**<input type="text" id="txtName" maxlength="100"/>
    <div id="nameDiv"  title="The Name is required.">
        <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
        <img title="The address already exists." src="error.jpg" 
             id="txtNameDuplicate"/>
    </div>
  **</div>**
</td>
<td>Address: </td>
<td><input type="text" id="txtAddress"  maxlength="100"/> </td>

contestado el 23 de mayo de 12 a las 13:05

No puedo hacer eso, tengo otra columna y se moverá debido a esto. - petko_stankoski

¿Qué tal envolver los 3 elementos (el cuadro de entrada y los 2 divs con imágenes) con otra etiqueta DIV y agregar float:left a cada uno de los 3? Respuesta editada arriba para incluir un ejemplo. - Seth

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.