I am wondering how come a piece of text which is appended in a table cell overlaps with each other if the text is too big for the cell's width rather than just going onto the next line?For example I have piece of text which says \[code\]The file upload was successful\[/code\] but the way it is displaying it is as below:
Below is the html of the table cell and it's contents:\[code\] var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" + "Video File: <input name='fileVideo' type='file' class='fileVideo' /></label>" + "<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='http://stackoverflow.com/questions/14448574/Upload' /></label>" + "<p class='listVideo' align='left'></p>" + "<iframe class='upload_target_video' name='upload_target_video' src='http://stackoverflow.com/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");\[/code\]Below is jquery where it displays the relevant messages:\[code\]function stopVideoUpload(success, videoID, videofilename){ var result = ''; videocounter++; if (success == 1){ result = '<span class="videomsg'+videocounter+'">The file was uploaded successfully</span>'; $('.listVideo').eq(window.lastUploadVideoIndex).append('<input type="text" name="vidid" id="'+videoID+'" value="' + videoID + '" />'); $('.listVideo').eq(window.lastUploadVideoIndex).append('<div>' + htmlEncode(videofilename) + '<button type="button" class="deletefilevideo" data-videoID="'+videoID+'" data-video_file_name="' + videofilename + '">Remove</button><br/><hr/></div>'); } $(sourceVideoForm).find('.videomsg').html(result); $(sourceVideoForm).find('.videomsg').css('visibility','visible'); $(sourceVideoForm).find(".fileVideo").replaceWith("<input type='file' class='fileVideo' name='fileVideo' />"); $(sourceVideoForm).find('.videof1_upload_form').css('visibility','visible'); return true; }\[/code\]Below is CSS:\[code\] .videof1_upload_process{ position:relative; visibility:hidden; text-align:center; margin-bottom:0px; padding-bottom:0px; margin-left: auto; margin-right: auto; }.videofileupload{ text-align:center; width:100%; margin:0px; padding:5px; font-size:85%; }.videouploadform{ width:100%; }.listVideo{ text-align:left; margin:0; padding-left:0; }.videomsg{ line-height:0px;} #qandatbl{ border:1px black solid; border-collapse:collapse; table-layout:fixed;} #qandatbl{ width:100%; margin-left:0; float:left;}#qandatbl td { vertical-align: middle;}#qandatbl th{ border:1px black solid; border-collapse:collapse; text-align:center;}\[/code\]