another textarea input related query - css

Question

I'm not sure where I'm going wrong with my CSS.. any help would be appreciated..
the CSS
#commentbox {
float: left;
margin-top: 10px;
background-color: #FFFFF0;
display: block;
width: 450px;
border: 1px solid #999999;
padding: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
text-align: left;
}
#commentbox .commenter_name {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
color: #660000;
float: left;
padding-left: 5px;
display: block;
}
#commentbox .comment_content {
display: block;
float: left;
clear: both;
white-space: pre-wrap;
}
This is my Form Textarea
<textarea name="vt_comment" cols="50" rows="5" wrap="hard" class="nontextarea" ></textarea>
This is the code that displays the Comment
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name">
<?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?> commented
</div>
<!--Show Comment -->
<div class="comment_content">
<?php echo $row_cmnts_disp['vt_comment']; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
This is how it gets stored in the DB
1st Line of the Comment
2nd Line of the Comment with just a Line break
Double Line Break
and this is how it is displayed on the site (with spaces in the front of the 1st line)
Swami Donanandha commented
hello
hello
hello
hello
as displayed online
whatever changes I try, I'm not able to remove the spaces before the 1st line of the comment, unless I remove the white-space:pre-wrap setting in the CSS...and if i do that the line breaks vanish displaying just one long sentence....
Swami Donanandha commented
1st Line of the Comment 2nd Line of the Comment with just a Line break Double Line Break

Answer 1

Have you tried removing the white-space: pre-wrap attribute and echo'ing a HTML break tag at the end of each comment?
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name"><?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?>
commented
</div>
<!--Show Comment: Added Break Tag Below-->
<div class="comment_content">
<?php echo "<p class='comment'>" + $row_cmnts_disp['vt_comment'] + "</p><br>"; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
The reason your comments concatenate into one long string after removing the white-space attribute is because of the float: left attribute in the .comment_content class. Updating the class to the following should fix the long string problem you have;
#commentbox .comment_content {
display: block;
}

Answer 2

I sorted it out... by adding the nl2br clause before the DB insert
$vt_comment = nl2br($_POST['vt_comment']);
and removing the white-space:pre-wrap from the CSS
Though I still don't have a clue why the extra spaces were getting added earlier :-)