Forum Moderators: open
Here's the css:
body
{
font-family: verdana,"trebuchet ms", arial, tahoma, sans-serif;
color: #000000;
background-color: #99CCCC;
margin-left:0.2cm; margin-right: 0.2cm; margin-top: 0.2cm;
}
#top-section {
position:relative;
left:0;
top:0;
}
#mid-section {
position:relative;
left:0;
top:0;
}
#bottom-section {
position:relative;
left:0;
top:0;
}
#top-col-1 {
position:relative;
padding-left:0%;
padding-right:10px;
}
#mid-col-1 {
position:absolute;
top:0;
left:0;
width:220px;
}
#mid-col-2 {
position:relative;
top:0;
left:220px;
width:100%;
}
a:link {color:#666666; text-decoration:none;}
a:active {color:#666666; text-decoration:none;}
a:visited {color:#666666; text-decoration:none;}
a:hover {color:#FFFFFF; text-decoration:none;}
a.checkout:link {color:#666666; text-decoration:underline; font-size:x-small;}
a.checkout:active {color:#666666; text-decoration:underline; font-size:x-small;}
a.checkout:visited {color:#666666; text-decoration:underline; font-size:x-small;}
a.checkout:hover {color:#FFFFFF; text-decoration:underline; font-size:x-small;}
p.forselect1 {margin-left: 0.2cm; margin-top: 0.2cm;}
And here's the html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="books.css" >
<title>Checkout form</title></head>
<body>
<div id="top-section">
<div id="top-col-1">
<h2>Biology Books Check-Out Page</h2>
</div>
</div>
<form action="docheckouttodb.php" method="post">
<div id="mid-section">
<div id="mid-col-1">
<p class="forselect1">
<select name="id" size="20" style="width:200px">
<option value="1">Scott 441</option>
<option value="2">Carly 351</option>
<option value="3">Anne 263</option>
</select>
</p>
<p><a href="checkoutformshowall.php" class="checkout">Show All Names</a>
<br /><a href="addnametodbform.php" class="checkout">Add a name to this list</a>
</p>
</div>
<div id="mid-col-2">
Book Number:<br />
<input type="text" name="booknum" size="4" maxlength="3"><br /><br />
Condition of the book:<br />
<input type="checkbox" name="condition" value="5">5
<input type="checkbox" name="condition" value="4">4
<input type="checkbox" name="condition" value="3">3
<input type="checkbox" name="condition" value="2">2
<input type="checkbox" name="condition" value="1">1
<input type="checkbox" name="condition" value="6">New
<br />
Condition Comments:<br />
<input type="text" name="comment" size="40" maxlength="250">
<br />
<a href="ratings.html" target="_blank" class="ratings">Condition Ratings</a><br />
Teacher:
<select name="teacher" size="5" style="vertical-align:top">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
<option value="t4">t4</option>
<option value="t5">t5</option>
</select>
<br /><br />
<input type="hidden" name="url" value="checkoutform.php"><input type="submit" value="Check Out This Book ->"><br />
</div>
</div>
</form>
<div id="bottom-section">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr /><br />
<a href="link">«Books Page</a><br />
<a href="link">«Main Page</a>
</div>
</body></html>
#top-section {
}
#bottom-section {
}
:-)
Put a border on the form element - this will give you a clue as to the offending element.
Dropping the bottom and top in where you have them (i.e., normal flow) is already relative and inherently positioned at 0 and 0 from the previous element.
When all else fails, take away everything you can and still have it do what it's supposed to do.
Though it has nothing to do with it, close tags are not necessary for <br /> and <hr /> in html 4.01.
