Hello,
For the code below, how can I change the CSS to make the form have the attributes listed below? I have included the most recent relevant CSS that I have tried (and it did not work).
Thanks in advance,
John
Attributes:
-The words “Add a comment” always display 30 pixels below the bottom of the HTML table being generated.
-The top of the form’s input field always displays 40 pixels below the bottom of the HTML table being generated.
-The top of the form’s submit button always displays 150 pixels below the bottom of the HTML table being generated.
$sqlStr = "SELECT comment.comment, comment.datecommented, login.username
FROM comment
LEFT JOIN login ON comment.loginid=login.loginid
WHERE submissionid=$submissionid
ORDER BY comment.datecommented DESC
LIMIT 100";
$result = mysql_query($sqlStr);
$arr = array();
echo "<table class=\\"commentecho\\">";
while ($row = mysql_fetch_array($result)) {
echo '<tr>';
echo '<td class="commentname1">'.$row["comment"].'</td>';
echo '</tr>';
echo '<tr>';
echo '<td class="commentname2"><a href="http://www...com/sandbox/members/index.php?profile='.$row["username"].'">'.$row["username"].'</a>'.date('l, F j, Y &\
b\\sp &\
b\\sp g:i a &\
b\\sp &\
b\\sp \\N\\E\\W &\
b\\sp \\Y\\O\\R\\K &\
b\\sp \\T\\I\\M\\E', strtotime($row["datecommented"])).'</td>';
echo '</tr>';
}
echo "</table>";
echo '<form action="http://www...com/sandbox/comments/comments2.php" method="post">
<input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
<input type="hidden" value="'.$submissionid.'" name="submissionid">
<input type="hidden" value="'.$submission.'" name="submission">
<label class="addacomment" for="title">Add a comment:</label>
<input class="commentsubfield" name="comment" type="comment" id="comment" maxlength="1000">
<div class="commentsubbutton"><input name="submit" type="submit" value="Submit"></div>
</form>
';
Relevant CSS:
table.commentecho {
position:absolute;
left:30px;
top:180px;
text-align: left;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 15px;
color: #000000;
width: 800px;
table-layout:fixed;
background-color: #FFFFFF;
border: 2px #FFFFFF;
border-collapse: collapse;
border-spacing: 2px;
padding: 1px;
text-decoration: none;
vertical-align: text-bottom;
margin-bottom: 30px;
}
table.commentecho td {
border: 2px solid #fff;
text-align: left;
height: 18px;
overflow:hidden;
}
table.commentecho td a{
padding: 2px;
color: #000000;
text-decoration: none;
overflow:hidden;
height: 18px;
}
table.commentecho td a:hover{
background-color: #FFFFFF;
padding: 2px;
color: #FF0000;
text-decoration: none;
overflow:hidden;
height: 18px;
}
.commentname1 { width: 550px;
overflow:hidden !important;
color: #000000;
vertical-align:
}
.commentname2 { width: 50px;
overflow:hidden !important;
color: #793D00;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
height: 18px;
padding-bottom: 22px;
}
.commentsubfield { display: block; margin-left: 30px; width: 390px; height: 90px; border: 1px solid #999999; padding: 5px; }
.addacomment
{
display: block; /* override the default inline display */
margin-left: 30px; /* The 30px from the left you wanted */
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
.commentsubbutton
{
display: block; /* override the default inline display */
margin-left: 30px; /* The 30px from the left you wanted */
width:250px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}