I can not remove the space above my form on this page. I can however add text or images and fill the space. I have looked at all my css files and I can not for the life of me figure out what to change or modify.
This is my html code for the page:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Atomike Designs</title><link href="files/global2.css" media="screen" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="scripts/shadowbox.css" /><link rel="stylesheet" href="css/structure.css" type="text/css" /><link rel="stylesheet" href="css/form.css" type="text/css" /><!-- JavaScript --><script type="text/javascript" src="scripts/wufoo.<acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym>"></script><script type="text/javascript" src="scripts/prototype.<acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym>"></script><script type="text/javascript" src="scripts/shadowbox.<acronym title="JavaScript"><acronym title="JavaScript">js</acronym></acronym>"></script><script type="text/javascript">
Shadowbox.init({
players: ["swf","fla"]
});
</script></head><body class="twoColFixLtHdr"><div id="container"><div id="header"><h1>Atomike Designs</h1><!-- end #header --></div><div id="sidebar1"><div id="nav"><ul><li class="selected"><a href="#" style="background: transparent url(images/webdesign.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Web Design</a></li><li class=""><a href="http://www.ericryananderson.com/portrait" style="background: transparent url(images/print.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Print</a></li><li class=""><a href="#" style="background: transparent url(images/multimedia.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Multimedia</a></li><li class=""><img src="images/spacer.gif" alt="" width="1" height="34" /></li><li class=""><a href="#" style="background: transparent url(images/about.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">About</a></li><li class=""><a href="#" style="background: transparent url(images/contact.jpg) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Contac</a></li></ul></div><!-- end #sidebar1 --></div><div id="mainContent"><div id="container"><form method="POST" action="contact.php"><div class="info"><p>If you have a question or comment, drop us a line and we'll be sure to get back with you. We are always available to answer any questions you might have with your web site. If you're looking to work with us please use our work request form.</p></div><ul><li id="foli1" class=" "><label class="desc" id="title1" for="Field1">
Message
<span id="req_1" class="req">*</span></label><div><textarea id="Field1" name="Inquiry" class="field textarea medium" rows="10" cols="50" tabindex="1"></textarea></div><p class="instruct" id="instruct1"><small>This field is required.</small></p></li><li id="foli2" class=" "><label class="desc" id="title2" for="Field2">
Email Address
</label><div><input id="Field2" name="EmailFrom" type="text" class="field text large" value="" maxlength="255" tabindex="2"/></div><p class="instruct" id="instruct2"><small>We won't share this with strangers.</small></p></li><li class="buttons"><input id="saveForm" class="btTxt submit" type="submit" value="Submit" /></li><li style="display:none"><label for="comment">Do Not Fill This Out</label><textarea name="comment" id="comment" rows="1" cols="1"></textarea></li><li style="display:none"><label for="idstamp">Do Not Fill This Out</label><input name="idstamp" id="idstamp" value="" /></li></ul></form></div><!-- end #mainContent --></div><!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" /><div id="footer"><p>Footer</p><!-- end #footer --></div><!-- end #container --></div></body></html>
Here are the three CSS files that are being used:
HTML Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lucida Grande', "Verdana";
color: #777;
font-size: 12px;
background-color: #FFF;
}
img {
margin: 0px;
}
a {
color: #666;
}
a:hover {
color: #333;
}
.twoColFixLtHdr #header {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
background-color: #DDDDDD;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-position: 30px;
height: 110px;
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 222px;
padding-left: 25px;
}
.twoColFixLtHdr #mainContent {
margin-left: 247px;
margin-top: 5px;
width: 600px;
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#photos {
height: 515px;
padding-top: 33px;
background: transparent url('../images/content-bg-left.gif') top left no-repeat;
}
#photos a {
display: block;
float: left;
padding-left: 15px;
height: 500px;
}
h1 {
position: fixed;
display: block;
width: 574px;
top: 15px;
left: 42px;
padding: 5px;
z-index: 50;
text-indent: -3000px;
}
h2 {
position: fixed;
display: block;
width: 216px;
top: 5px;
right: 8px;
padding: 5px;
text-indent: -100px;
background: #ffffff url('../images/contact.jpg') top left no-repeat;
}
#block {
position: fixed;
display: block;
width: 210 px;
height: 700 px;
background: #ffffff;
z-index: 30
}
#nav {
position: relative;
width: 222px;
height: 210px;
margin-left: -30px;
margin-top: 8px;
z-index: 40;
background: #ffffff url('../images/nav-bg.gif') 10px 0px repeat-y;
}
#nav span {
position: absolute;
display: block;
width: 10px;
height: 9px;
background: #ffffff;
}
#nav ul {
position: absolute;
top: left;
list-style-type: none;
}
#nav ul li a {
display: block;
width: 222px;
height: 34px;
text-indent: -3000px;
}
#nav ul li.selected a,
#nav ul li.selected a:hover {
background-position: 0px -68px !important;
}
#nav ul li a:hover {
background-position: 0px -34px !important;
}
#screenshot img {
margin: 10px;
}
Linear Mode
