Difference in display for jQuery created img tag and ASP.Net created img tag

Question

My web page has two ways of displaying a particular content. 1. When the page is loaded, the items ( images with anchor tag) are generated using ASP Repeater. 2. When user perform some Ajax action, the images are returned as JSON and I use jQuery for creating the a & img tags.

In both these methods, the anchor tags with images are displayed with width 60px. There is no CSS class applied. But strangely the display is not consistent. Here is the both displays:

I wonder why this difference occur. I check this with all browsers ( IE,FF& chrome) and all behave the same. Here is my jQuery code:

$('<a>').attr({ href: '/Detail.aspx?id=' + result.it[i].pid, title: result.it[i].nam })  .html("<img src='" + result.it[i].url + "' title='" + result.it[i].nam + "' alt='" + result.it[i].nam + "' width='60px' />").appendTo("#SummaryDiv");

Any idea why this behaviour occurs? I also checked the css applied to these elements in chrome and FF.. they seems to have all the same CSS attributes.

Answer 1

Is the created markup identical? Is it valid (x)html?

Do you have white space between the image tags or anchors created by the repeater? If yes, remove it.