I'm having a problem with more spacing between my <h1> tag and form section. I didn't even notice until I previewed in IE...it works fine in FF but IE is adding more space. At first I thought it was just a glitch but another form on another page is doing the same thing.
Here is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Company Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="../styles.css"/>
</head>
<body>
<div id="wrap">
<div id="top"></div>
<div id="header"><img src="../i/logo.gif" align="left"></div>
<div id="nav-wrap">
<ul id="nav">
<li><a href="../index.htm">Home</a></li>
<li><a href="../features/">Features</a></li>
<li><a href="../pictures/">Pictures</a></li>
<li><a href="../order/">Order Now</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="content-wrap">
<div id="content">
<h1>Contact Form</h1>
<form action="" method="post" name="Contact Form">
<p>Namebr />
<input name="Name" />
</p>
<p>Address
<input name="Address" />
</p>
<p>City
<input name="City" />
</p>
<p>Province
<input name="Province" />
</p>
<p>Postal Code
<input name="Postal Code" />
</p>
<p>Country
<input name="Country" />
</p>
<p>Phone
<input name="Phone" />
</p>
<p>Email
<input name="Email" />
</p>
<p>Comments
<textarea name="Comments" rows="4" cols="30" /></textarea>
<p>
<input TYPE="hidden" NAME="recipient" VALUE="">
<input TYPE="hidden" NAME="subject" VALUE="Request For Info">
<input TYPE="hidden" NAME="required" VALUE="Name, Email">
<input TYPE="hidden" NAME="redirect" VALUE="">
<input type="submit" />
</p>
</form>
</div>
</div>
<hr class="hide" />
<div id="sidebar2">
<div id="sidebar_space">
<h1>Contact Us</h1>
<p>Company.<br />
C/O Owner<br />
</p>
<p>Phone<br />
Fax</p>
<p>Email: <font color="0A557B">email here</font></a></p>
<p>Show Room: <br />
Address
Address
Zip Code <br />
Phone</p>
</div>
</div>
<div id="footer">
<p>Copyright © 2005</p>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------
And here is the CSS:
/* CSS Document */
#wrap {
position: relative;
background: #fff repeat;
margin: 0 auto;
padding: 0;
border: 1px solid #000;
border-top: none;
border-bottom: none;
width: 750px;
}
#top {
background: #0C557B;
padding-top: 21px;
}
#header {
background: #000 url(i/header_bg.gif) repeat-x;
height: 70px;
padding-left: 26px;
}
body {
margin: 0;
padding: 0 0 0 0;
text-align: center;
font: normal 12px arial, helvetica, serif;
color: #000;
}
h1 {
font: bold 15px arial, helvetica, serif;
color: #0C557B;
margin: 0;
padding: 39px 0 22px 0;
text-transform: uppercase;
}
p {
margin: 0;
padding: 5px 0;
}
h2 {
font: 7pt arial, helvetica, serif;
color: #0C557B;
margin: 0;
padding: 12px 44px;
}
/* Nav Styles */
#nav-wrap {
background: #0C557B;
padding: 0 0 0 41px;
height: 21px;
font: bold 12px arial, helvetica, serif;
text-transform: none;
}
#nav {
padding: 3px 0 2px 0;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav li { /* all list items */
float: left;
position: relative;
/*width: 100px;*/
line-height: 15px;
}
#nav a:link, #nav a:visited {
color: #C0D3DD;
padding: 0 22px 0 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}
#nav a:hover, #nav a:active {
color: #FFF;
}
/* Content Styles */
#content-wrap {
float: left;
width: 444px;
text-align: left;
background: #fff;
}
#form{
float: left;
width: 748px;
text-align: left;
background: #fff;
padding: 0 0 47px 41px;
}
#content {
margin: 0 0 47px 41px;
}
#content ul {
padding: 0;
margin: 0;
list-style: none;
}
#content li {
margin: 0px;
padding: 5px 0;
list-style-type: none;
font-weight: bold;
}
/* Sidebar Styles */
#sidebar {
float: right;
margin: 0;
width: 304px;
border-top: 39px solid #fff;
padding: 0 0 39px 0;
}
#sidebar2 {
float: right;
margin: 0;
width: 304px;
text-align: left;
}
#sidebar_space {
margin: 0 0 0 34px;
}
#sidebar img {
background: #FFF;
border: 0;
}
/* Footer. Styles */
#footer {
clear: both;
background: #0C557B;
height: 20px;
font: bold 7pt arial, helvetica, serif;
color: #C0D3DD;
text-align: left;
padding-left: 41px;
}
/* Misc. Styles */
.hide {
display: none;
}
#lowfi-logo {
display: none;
}
Any help is greatly appreciated!
Bookmarks