Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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.</p> <p>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.</p> <pre><code>&lt;tr&gt; &lt;td&gt;&lt;b&gt;Name:&lt;/b&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" id="txtName" maxlength="100"/&gt;&lt;/td&gt; &lt;td&gt; &lt;div id="nameDiv" title="The Name is required."&gt; &lt;img title="The Name is required." src="error.jpg" id="txtNameRequired"/&gt; &lt;/div&gt; &lt;div id="nameDivDuplicate" title="The address already exists."&gt; &lt;img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt;Address: &lt;/td&gt;&lt;td&gt;&lt;input type="text" id="txtAddress" maxlength="100"/&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>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.</p> <pre><code>#nameDiv { width: 20px; float:left; } #nameDivDuplicate { float:left; } #txtName { float:left; } </code></pre> <p>I bolded the new DIV that I added.</p> <pre><code>&lt;td&gt;&lt;b&gt;Name:&lt;/b&gt; &lt;/td&gt; &lt;td&gt; **&lt;div&gt;**&lt;input type="text" id="txtName" maxlength="100"/&gt; &lt;div id="nameDiv" title="The Name is required."&gt; &lt;img title="The Name is required." src="error.jpg" id="txtNameRequired"/&gt; &lt;/div&gt; &lt;div id="nameDivDuplicate" title="The address already exists."&gt; &lt;img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/&gt; &lt;/div&gt; **&lt;/div&gt;** &lt;/td&gt; &lt;td&gt;Address: &lt;/td&gt; &lt;td&gt;&lt;input type="text" id="txtAddress" maxlength="100"/&gt; &lt;/td&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload