Question

Here is what I have:

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

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

And in my view I have:

<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>

The nameDiv and the nameDivDuplicate divs have sidplay:none at first. Then, with jquery I show them. I need them to be shown in the same place as txtName (on its right).

The code above is good for Google Chrome, but not for the other browsers. How is this handled?

Answer 1

You have to be really careful with position:relative. It can really give you some headaches. There have been a lot of issues (in IE in particular) with position:relative.

I would recommend not using it in this case. Rather, I would place extra td tags around your two error images to have them create their own column. This will place them to the right of txtName’s input box.

<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>

EDIT:
Since you said you didn’t want a new column, you could add a div tag around everything inside that td tag, and use float:left to have them all line up, or you could set the width.

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

I bolded the new DIV that I added.

<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>