I cant seem to figure out why Firefox adds a margin to the top of my page... it shows up fine in IE and even in the Dreamweaver design view. Here's the html:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GARR TOOL</title>
<link rel="stylesheet" type="text/css" href="../../../../webapp/css/style.css"/>
</head>
<body>
<div id="maincontainer">
<div id="header">
<wicket:link>
<ul>
<li><a href = "About.html">about us</a></li>
<li><a href = "Distributor.html">find a distributor</a></li>
<li><a href="Download.html">download catalog</a></li>
<li><a href="Quote.html">request a quote</a></li>
<li><a href = "Contact.html">contact us</a></li>
</ul>
</wicket:link>
</div>
<div id="search">
<h1>Quick Search</h1>
<br/>
<span>
Search by one of the following options, or use our
</span> <a wicket:id = "qkSearch">Advanced Search</a>
<br/><br/>
<form wicket:id="form">
<table width="100%" border="0">
<tr>
<td>What type of material are you cutting?</td>
<td>What type of tool are you looking for?</td>
</tr>
<tr>
<td>
<select wicket:id="materialSelect">
<option>options</option>
</select>
</td>
<td>
<select wicket:id="toolSelect">
<option>one</option>
<option>Two</option>
</select>
</td>
<td>EDP#</td>
<td>
<input type="text" wicket:id="edp" />
</td>
<td>Series#</td>
<td>
<input type="text" wicket:id="series" />
</td>
<td>
<input type="submit" value="Search" />
</td>
</tr>
</table>
</form>
<br/><br/>
</div>
<div id="content">
<wicket:child />
</div>
<div id="footer">
<p>
<wicket:link>
<a href="About.html">about us</a> |
<a href="Distributor.html">find a distributor</a> |
<a href="Download.html">download catalog </a> |
<a href="Contact.html">contact us</a> |
<a href="Quote.html">request a quote</a> |
<a href="Question.html">FAQS</a> |
<a href="Career.html">careers</a> |
<a href="Login.html">distributor login</a> |
<a href="Message.html">message board</a>
</wicket:link>
</p>
<br />
Garr Tool copyright information
</div>
</div>
</body>
</html>
And here's the CSS:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#543019;
font-size:0.69em;
background: url(../images/bg.jpg) top repeat-x;
margin:0;
padding:0;
}
h1 {
font-size:14px;
}
#maincontainer {
width:800px;
margin:0 auto;
text-align: left;
padding:0;
}
#header {
background: url(../images/header.jpg) top right no-repeat;
height: 97px;
margin:0;
padding:0;
}
#header ul {
list-style-type: none;
padding-left: 30px;
padding-top: 58px;
}
#header ul li {
float: left;
padding-right: 32px;
}
#header ul li a {
font-family:Arial, Helvetica, sans-serif;
float: left;
display: block;
height: 30px;
line-height: 40px;
font-weight: bold;
color: #FFF;
text-decoration: none;
}
#search {
padding-left:20px;
padding-top:30px;
padding-right:20px;
}
#footer {
background: url(../images/footer.jpg);
background-repeat:repeat-x;
background-position:bottom;
padding-left:100px;
padding-right:100px;
text-align:center;
line-height:20px;
}
#footer a {
padding-right:5px;
padding-left:5px;
padding-bottom:15px;
text-decoration:none;
}