Can't remove top-margin on body tag in firefox!

torroni

09-28-2007, 08:50 AM

I am using a repeating background image on the body tag to create a blue header bar across the top of the page. In firefox only there is a top-margin of 2px that produces a white gap that I just can't seem to get rid of. I've pasted my code below, any suggestions...?

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=ISO-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Macintosh HD New:Users:luke:Documents:luke torroni gds:projects:AI Recruitment:website:styles.css" /> <link rel="stylesheet" type="text/css" href="Macintosh HD New:Users:luke:Documents:luke torroni gds:projects:AI Recruitment:website:test.css" /> </head>

<body>
</body>
</html>

CSS:

body {
background-image: url(images/headercloudsrepeat.jpg);
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
}

abduraooft

09-28-2007, 08:52 AM

Try after adding
*{
padding:0;
margin:0;
}
to your CSS
where * is the universal selector, which will make all default margin-padding values of all elemetns to zero.

torroni

09-28-2007, 08:57 AM

No it's still there with the CSS as below. It's strange as there isn't even anything else on the page, no divs or other elements to mess with the layout.

*{
padding: 0px;
margin: 0px;
}

body {
background-image: url(images/headercloudsrepeat.jpg);
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
}

abduraooft

09-28-2007, 09:35 AM

Can you post a link to your image so that we can also see the exact problem.

torroni

09-28-2007, 09:44 AM

Ok here is the link to the background image which I want to repaet across the top of the page: http://www.setfab.plus.com/headercloudsrepeat.gif

And a screenshot of the problem... note the 2px gap at the top: http://www.setfab.plus.com/screenshot.png

Any ideas?

effpeetee

09-28-2007, 10:51 AM

OK! I give up! Where's the link?

Frank

torroni

09-28-2007, 11:00 AM

It just displayed the images in the window above... can you see them?

effpeetee

09-28-2007, 11:49 AM

It just displayed the images in the window above... can you see them?
How are we expected to get your code from that?
We need a URL

Frank

_Aerospace_Eng_

09-28-2007, 01:28 PM

That actually looks part of the theme you have set on Firefox.

vtjustinb

09-28-2007, 01:56 PM

It might just be the background placement. Try explicitly adding positioning to the body selector:

body {
background: url(images/headercloudsrepeat.jpg) left top repeat-x;
padding: 0;
margin: 0;
}

Note also (which is kind of a picky thing) but you don't need to specify units when you set something to units--zero is zero in any unit. :P