Issue with margins when markup is added with jQuery?

Question

For some reason, if I add these buttons with jQuery (because of an Ajax insert function) they look strange to when they are loaded via PHP on the server?

What is the reason for this behavior

Here is the jQuery that inserts it:

var actions = '<td><a href="#" class="small awesome black editButton" id="'+id+'">Edit</a><a href="/appointments/new/'+id+'/" class="small awesome black">Schedule</a><a href="#" class="small awesome red deleteButton" id="'+id+'">Delete</a></td>';
$('.clients tr.headerRow').after("<tr>"+check+"<td>#"+id+"</td>"+name+address+homephone+actions+"</tr>");

Answer 1

Update 1

<tr>"+check+"<td>#"+id+"</td>"+name+address+homephone+actions+"</tr>

You're inserting values between <tr> and a nested <td>. This is a no-no. Values need to be within the <td> tags.

--

You ought to examine the old markup vs dynamically-added markup via firebug. It's likely that your structures are either slightly different, or that a class attribute is not being applied properly to the new elements due to a typo, or an overridden style.

For a more helpful answer, provide your initial markup, and the code that inserts the new markup as well as any CSS that may be affected the elements.

Answer 2

I am going to guess that because you have organized code, each button is on a new line, meaning there is a space in between them. When you add it via js, is there a space between each button?

Answer 3

It's only the first white-space between HTML elements that matter. Not having any space at all is different to having 1-* spaces.