Development
Client Side

Author
3170

0

6
Firefox adds margin to top of my page

Last reply Jul 23 2008, 04:40 PM

by bemerx25

Posted: Jul 21 2008, 02:07 PM

by Eruption

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” />

[url=“Download.html"href = “About.html”>about us</a>
<a href = “Distributor.html”>find a distributor</a>
<a ]download catalog[/url]
request a quote
[url=“About.html"href = “Contact.html”>contact us</a>

</wicket:link>
</div>

<div id=“search”>
<h1>Quick Search</h1>
<br>
<span>
Search by one of the following options, or use our
</span> <a 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”>

<wicket:link>
<a ]about us[/url] |
find a distributor |
download catalog |
contact us |
request a quote |
FAQS |
careers |
distributor login |
message board
</wicket:link>

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

6 REPLIES

bemerx25

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.

22 July 2008 11:20 AM

Nutrox

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…

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