Firefox adds margin to top of my page

2008-07-21

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;
}

bemerx25 · 2008-07-22 #2

Have you tried resetting the base div appearance in your CSS? Basically just do this: div{padding:0; margin:0;}. This will reset the div appearance in your browsers so that any unstyled divs have no padding or margins. All the other divs are styled by a class or ID will be fine - they'll be styled by the class or ID from your CSS. Also, never trust the dreamweaver preview - always test against real browsers.

If your padding/margin issue continues, think about giving your styles borders to see whats happening and how they interact, and then carefully go through and comment out styles to see where the problem might lie.

Nutrox · 2008-07-22 #3

By default, <div> elements don't have any padding or margin, so setting those values to zero won't make any different. However, is it a good idea to normalise a few other elements. This is what I normally do...

Code:

html
{
	border-left:none;
	border-right:none;
	cursor:default;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, pre, img, form, fieldset
{
	padding:0;
	margin:0;
	border:none;
}

h1, h2, h3, h4, h5, h6
{
	font-weight:normal;
}

ol, ul
{
	list-style:none;
}

img, object
{
	display:block;
}

table
{
	border-collapse:collapse;
}

th
{
	padding:0;
	font-weight:normal;
	text-align:left;
}

td
{
	padding:0;
	vertical-align:top;
}

hr
{
	display:none;
}

*:focus
{
	outline:none;
}

nithead · 2008-07-23 #4

Add this to your CSS:

Code:

header ul {
 margin-top:0px;
}

By the by, it's not good practice to not put a measurement unit after margins and such. You should never have:

Code:

margin: 0;

It should be:

Code:

margin: 0px;

Anyway I hope this helps!

Nutrox · 2008-07-23 #5

You only need to define the unit of measurement if the value is not zero.
0px 0em and 0% are all the same value, 1px 1em and 1% are different values.

Eruption · 2008-07-23 #6

That did the trick, thanks Nutrox!

bemerx25 · 2008-07-23 #7

Nutrox - thanks for the correction - also nice CSS style reset you got there!

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Development > Client Side • Firefox adds margin to top of my page


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	bemerx25	2008-07-22 #2
	Have you tried resetting the base div appearance in your CSS? Basically just do this: div{padding:0; margin:0;}. This will reset the div appearance in your browsers so that any unstyled divs have no padding or margins. All the other divs are styled by a class or ID will be fine - they'll be styled by the class or ID from your CSS. Also, never trust the dreamweaver preview - always test against real browsers. If your padding/margin issue continues, think about giving your styles borders to see whats happening and how they interact, and then carefully go through and comment out styles to see where the problem might lie.

	nithead	2008-07-23 #4
	Add this to your CSS: Code: header ul { margin-top:0px; } By the by, it's not good practice to not put a measurement unit after margins and such. You should never have: Code: margin: 0; It should be: Code: margin: 0px; Anyway I hope this helps!

	Nutrox 17 Creative Assets	2008-07-23 #5
	You only need to define the unit of measurement if the value is not zero. 0px 0em and 0% are all the same value, 1px 1em and 1% are different values.

	bemerx25	2008-07-23 #7
	Nutrox - thanks for the correction - also nice CSS style reset you got there!