Remove Top Margin in FireFox not working

**sparticuz13** · 07-24-2007, 09:50 AM

OK so I'm trying to make it so there is no margin or no space between the top rendering area of the browser and my content. It is working in IE 7 but not FF.

I have my content in a div wrapper that has the top-margin set to 0px. I am also including the the top-margin 0px in the main body html tag. The div wrapper is inside the body tags. Its working fine in IE but there is a space in FF. My wrapper is set to relative, it I switch it to absolute it removes the space in FF. Any ideas. I need to use relative in the wrapper.

http://www.sparticusgoods.com/testing2/

Code:

<html>
<head>
<title>Sparticus Goods</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">

#wrapper {
	position:relative;
	background-color:#FFFFFF;
	width:1076px;
	height:auto;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
}

#topbar {
	position:absolute;
	width:1076px;
	height:169px;
	top:0px;
	left:0px;
}

body {
	background-color: #666666;
}
</style>

</head>

<body" style="text-align:center; background-color:#666666; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="wrapper">
	<div id="topbar"> 
		<img src="images/Top Bar.gif" width="1076" height="169" alt="" />	</div>
	<div style="text-align:center">
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>TESTING</p>
	</div>
</div>
</body>
</html>

**sparticuz13** · 07-24-2007, 11:46 AM

Fixed it.

Just needed to set the top-margin in the paragraph as well.

p {
top-margin:0px;
}

**felipopulus** · 05-04-2008, 12:33 AM

I have the same problem; where do you put the:

p {
top-margin:0px;
}

???

**Medyman** · 05-04-2008, 01:55 AM

There is some default padding/margin on the html and body tag. The amount varies by browser. To get rid of it:

Code:

<style type="text/css">
html,body {
   margin:0;
   padding:0;
}
</style>

You need to clear the padding and the margin on the body and html tags. Usually one of those aspects is forgtten.

felipopulus,
CSS styles go between the <head></head> tags of your HTML document. All CSS styles must also be contianed within <style></style> tags.

Using the style you provide above, you would add this to your head section:

Code:

<style type="text/css">
p {
   top-margin:0px;
}
</style>

**iastudio** · 09-04-2008, 04:08 PM

This is my source code I did everything mentioned below but I can't do anything

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link REL="SHORTCUT ICON" HREF="favi.bmp">
<title>Insane Angel studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">

#wrapper {
position:relative;
background-color:#FFFFFF;
width:1076px;
height:auto;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}

#topbar {
position:absolute;
width:1076px;
height:169px;
top:0px;
left:0px;
}
html,body {
   margin:0;
   padding:0;
}

body {
background-color: #666666;
}
p {
   top-margin:0px;
}

</style>

</head>
<body" style="text-align:center; background-color:#666666; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<p align="center">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="850" id="website" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="website.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#FFFFFF" /><embed src="website.swf" menu="false" quality="high" bgcolor="#FFFFFF" width="900" height="850" name="website" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</p>
</body>
</html></body>
</html>

edit: My website is www.insaneangelstudio.com

**aquaglia** · 10-08-2008, 01:35 PM

Try this, it works for me:
<p align="center" style="margin-top:0;">

**bluewalrus** · 10-08-2008, 04:01 PM

why are you declaring your body tag twice? You have it declared in the head and then with different style in the body tag of the page. Move the stuff in the <body" style"<--everything after this up into the body { tag in your head... also get rid of that quote at body so should be <body> also why not just say margin:0 instead of left right top and bottom

**Trent Boswell** · 01-12-2012, 03:09 AM

aquaglia - that worked for me. Many Thanx!!!!!!!!!!!

That's a very important thing. It controls the placement of where your content goes. In my case a flash object. I changed "center" to "top" and it went flush to the top. It must have been just hanging there loosely before, and that TOLD it to put it at the top of the page.

Thread: Remove Top Margin in FireFox not working

Thread Tools

Search Thread

Remove Top Margin in FireFox not working

same here

Bookmarks

Bookmarks

Posting Permissions