Remove Top Margin in FireFox not working [Archive]

View Full Version : 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/

<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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:

<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:

<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

<!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.