/    Sign up×
Community /Pin to ProfileBookmark

why does my CSS form resize when i submit it?

when I submit my form a message is displayed at the top of the screen stating that the form has been submitted. however the css container i have my form in called ‘commentinside’ resizes (shrinks). this causes the ‘container’ to shrink which ruins the form design by creating a gap. is there anyway that i can get my form not to resize??

here is my html:

[CODE]
<?php
if (isset($_POST[‘submit’])) {

$month = htmlspecialchars(strip_tags($_POST[‘month’]));
$date = htmlspecialchars(strip_tags($_POST[‘date’]));
$year = htmlspecialchars(strip_tags($_POST[‘year’]));
$time = htmlspecialchars(strip_tags($_POST[‘time’]));
$title = htmlspecialchars(strip_tags($_POST[‘title’]));
$entry = $_POST[‘entry’];

$timestamp = strtotime($month . ” ” . $date . ” ” . $year . ” ” . $time);

$entry = nl2br($entry);

if (!get_magic_quotes_gpc()) {
$title = addslashes($title);
$entry = addslashes($entry);
}

include(“./includes/dbconnect.php”);

if (!empty($title)&&!empty($entry)) {
$sql = “INSERT INTO php_blog (timestamp,title,entry) VALUES (‘$timestamp’,’$title’,’$entry’)”;

$result = mysql_query($sql) or print(“Can’t insert into table php_blog.<br />” . $sql . “<br />” . mysql_error());

if ($result != false) {
print “Your entry has successfully been entered into the database.”;
}

mysql_close();
}
}
?>

<?php
$current_month = date(“F”);
$current_date = date(“d”);
$current_year = date(“Y”);
$current_time = date(“H:i”);
?>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”C:mywebsitewebsite.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″/>
<title>Shoutbox</title>
</head>
<body bgcolor=”gray”>
<h2 align=”center”>Welcome to your blog!</h2>
<div class=”commentholder addcommentholder”>
<b class=”rtop”><b class=”r1″></b><b class=”r2″></b><b class=”r3″></b><b class=”r4″></b></b>
<div class=”commentinside”>
<form class=”comment” method=”post” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>

<strong><label for=”month”>Date:</label></strong>

<select name=”month” id=”month”>
<option value=”<?php echo $current_month; ?>”><?php echo $current_month; ?></option>
<option value=”January”>January</option>
<option value=”February”>February</option>
<option value=”March”>March</option>
<option value=”April”>April</option>
<option value=”May”>May</option>
<option value=”June”>June</option>
<option value=”July”>July</option>
<option value=”August”>August</option>
<option value=”September”>September</option>
<option value=”October”>October</option>
<option value=”November”>November</option>
<option value=”December”>December</option>
</select>

<input type=”text” name=”date” id=”date” size=”2″ value=”<?php echo $current_date; ?>” />

<select name=”year” id=”year”>
<option value=”<?php echo $current_year; ?>”><?php echo $current_year; ?></option>
<option value=”2004″>2004</option>
<option value=”2005″>2005</option>
<option value=”2006″>2006</option>
<option value=”2007″>2007</option>
<option value=”2008″>2008</option>
<option value=”2009″>2008</option>
<option value=”2010″>2010</option>
</select>

<input type=”text” name=”time” id=”time” size=”5″ value=”<?php echo $current_time; ?>” /></p>

<strong><label for=”title”>Title:</label></strong> <input type=”text” name=”title” name=”title” size=”40″ /></p>

<strong><label>Entry:</label></strong><textarea cols=”80″ rows=”20″ name=”entry” id=”entry”></textarea>

<label></label><input type=”submit” name=”submit” id=”submit” value=”Submit”>

</form>
</div>
<b class=”rbottom”><b class=”r4″></b><b class=”r3″></b><b class=”r2″></b><b class=”r1″></b></b>
</div>
</body>
</html>
[/CODE]

my CSS:

[CODE]
label
{
width: 4em;
float: left;
text-align: right;
padding-right: 5px;
margin: 0 4em 10px 0
clear: both
}

div.commentholder {
margin: 0px 205px;
margin-bottom: 10px;
padding: 10px;
}

b.rtop, b.rbottom {
display: block;
}

b.rtop, b.rbottom {
display: block;
}
b.rtop b, b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
}
b.r1 {
margin: 0 5px;
}
b.r2 {
margin: 0 3px;
}
b.r3 {
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}

div.commentinside {
padding: 15px 15px;
}

div.addcommentholder div.commentinside, div.addcommentholder b.rtop b,
div.addcommentholder b.rbottom b {
background-color: #dddddd;
}

form.comment label, form.pass label {
float: left;
margin-bottom: 4px;
padding-right: 10px;
text-align: right;
width: 65px;
}
[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@LuckY07authorDec 24.2007 — I think the line >>

print "Your entry has successfully been entered into the database."

needed to be inside HTML, otherwise it was screwing up the display. I changed the location of the HTML decleration to the very top of the program:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="C:mywebsitewebsite.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Shoutbox</title>
</head>
<body bgcolor="gray">
<?php
if (isset($_POST['submit'])) {
[/CODE]


The thing I am confused about now is how would I insert a header() to redirect the page so when i hit refresh the same info isn't sent to the database??
Copy linkTweet thisAlerts:
@infinityspiralDec 24.2007 — Could you set the form to have a minimum height so no matter what it doesn't shrink beyond what breaks it? Like so:

.example{

min-height:50px;

}[/QUOTE]
×

Success!

Help @LuckY07 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...