HTML dynamic tags insert looks different compared to static layout

Question

I program HTML interface with jquery. There is editable list of publications on the page and user can click any publication to edit details. Popup window appears with data and there is list of authors embedded into details form. There are edit/delete buttons against every of them + "add new author" button. User manipulates authors without page reload. When I insert a new author there are new edit/delete buttons created dynamically & embedded into page.

I insert tags like this:

<td class="author-actions">
    <img onclick='edit(id)' .../>
    <img onclick='delete(id)' .../>
</td>

Just the same html-layout that is sent from web-server when popup window appears. But somehow it looks different. There is extraspace between images though firebug demonstrates the same css attributes applied.

If I select with mouse inserted layout with IE, somehow it can reorder and become the same-looklike as the those, send by web-server.

What can it be?

Answer 1

Images are inline elements and will add a space between each if there are any linebreaks or whitespace between each img, like words in a paragraph. You can fix this by removing any whitespace/linebreaks between the elements.

Answer 2

This is particularly noticeable when you have a hyper linked image.

<a href="http://www.google.com/"&gt;
  <img src="google_logo.png" width="32" height="32" border="0"/>
</a>

With the above, you'll often get the 'extra blue underscore' effect due to the whitespace after the image before the closing </a>.

The fix for this is to simply remove the whitespace.