Comments box changes position when a comment is posted

I’ve got a comments box in two seperate divs, one for the input area and one for the comments display area. When a new comment is entered both divs move downwards about 15px, this in turn moves the footer element on my page.
I’m not sure if this is a PHP issue or a CSS issue but everyone on this forum has always been extremely helpful!

Here’s my commentsbox.php which I include on each page it is required:

[code]<?php
require(‘commentconnect.php’);
$name=@$_POST[‘name’];
$comment=@$_POST[‘comment’];
$submit=@$_POST[‘submit’];
if($submit)
{
if($name&&$comment)
{
$insert=mysql_query(“INSERT INTO commenttable (name,comment) VALUES (’$name’,’$comment’)”);
/header(“Location: index.php”);/
echo “”;
echo “”;
}
else
{
echo “Please fill out the fields”;
}
}
?>

<form action="index.php" method="POST">
<table>
	<tr><td>Name: </td><td><input type="text" name="name" /></td></tr>
	<tr><td colspan="2">Comment: </td></tr>
	<tr><td colspan="2"><textarea name="comment"></textarea></td></tr>
	<tr><td colspan="2"><input type="submit" name="submit" value="Comment" /></td></tr>

</table>
</form>
<?php $sql = "SELECT * FROM commenttable ORDER BY id DESC"; if ($getquery = mysql_query($sql)) { while ($rows=mysql_fetch_array($getquery)) {
$id=$rows['id'];
$name=$rows['name'];
$comment=$rows['comment'];
$dellink="<a href=\"delete.php?id=" . $id . "\"></a>";

echo $name . '' . '<br />' . $comment . '<br />' . '<hr/>';
}

}
else {
trigger_error(mysql_error());
}
?>

[/code]

and the css for the two elements:

[code]#commentarea {
position:relative;
margin-left:auto;
margin-right:auto;
top:-1295px;
left:370px;
height:320px;
width:200px;
overflow:auto;
padding:5px 5px 5px 8px;
color:#FF8000;
border-bottom:1px solid #FF8000;
font-family:“Trebuchet MS”, Helvetica, sans-serif;
z-index:11;
}

#commentinput {
position:relative;
margin-left:auto;
margin-right:auto;
max-width:150px;
min-width:150px;
top:-740px;
left:340px;
width:210px;
padding:10px 5px 5px 5px;
z-index:11;
}
[/code]

Any help is much appreciated!

Could you explain what you think should happen, and then explain separately what actually happens. This way I can better understand what the problem is. Right now I’m kind of confused. Even if I don’t ultimately solve your problem, maybe this info would help other forum members to solve it for you. Thanks.

It was down to my poor use of CSS positioning. I needed to contain my divs in a container area, tandard web design really, but I did not. My elements had massive negative and positive top and left values. This threw everything off on other browsers aswell.

Solution: Use CSS properly…

Thanks anyway Wannabe

Sponsor our Newsletter | Privacy Policy | Terms of Service