Question

In this form I have a user message <span>. It ignores the style info given in the HTML and in the CSS style sheet. Also, if I update the using .html() the new text isn’t show.

$('#matting').append('<div id="register_user_box" class="inline_form" style="position: absolute; top: 20px; right: 10px; <br/><span id="user_msg" style="width: 90%; height: 15px; color: red; font-family: Arial; font-size: 11px;">Info msg</span><br/><form id="register_user_id" name="register_user_form"> <button id="cancel" onclick="cancel_register(); return false;" style="width: 63px; float: right; margin-right:8px;">Cancel</button> <button id="register" onclick="register_user(); return false;" style="width: 63px; float: right;">Save</button> </form></div>');

The info specified in style for user_msg is ignored. If I update the text with $('#user_msg').html(message); this is also ignored. What could explain this?

Answer 1

HTML Syntax error – you didn’t close your <div> or the style attribute inside of it:

$('#matting').append('<div id="register_user_box" class="inline_form"'+
  ' style="position: absolute; top: 20px; right: 10px; ' + // missing ">! 
  '<br/><span id="user_msg" style="width: 90%; height: 15px;'+
  'color: red; font-family: Arial; font-size: 11px;">Info msg</span> '+
  '<br/><form id="register_user_id" name="register_user_form">'+
  '<button id="cancel" onclick="cancel_register(); return false;"'+
  ' style="width: 63px; float: right; margin-right:8px;">Cancel</button>'+
  ' <button id="register" onclick="register_user(); return false;"'+
  'style="width: 63px; float: right;">Save</button> </form></div>');

Also notice that <span>‘s are inline elements (see scrappedcola’s answer).