...

View Full Version : Small CSS margin/padding problem?



dek
02-04-2012, 06:15 PM
I am applying the padding: 0; and margin: 0; to my CSS file. It is for the body tag. However, the code just won't apply. There is a margin of room at the top of the page as shown in the picture. Thanks for looking at my question!


body {
font-family: sans-serif, Geneva, Arial, Helvetica;
font-size: 16px;
line-height: 1.3em;
color: #C0C0C0;
background-color: #333333;
background-image:url("images/gradient.jpg");
padding: 0;
margin: 0;
}

http://i43.tinypic.com/j0fqk1.png

VIPStephan
02-05-2012, 12:17 AM
Read up on uncollapsing margins (http://complexspiral.com/publications/uncollapsing-margins/). The headline at the top has a default margin which is sticking out and pushing the body down.

fredrikrob
02-05-2012, 05:22 AM
try using
<!-- Css Snippet -->
* {
margin: 0px;
padding: 0px;

}

you have applied margin to the body and it's child element but html tag is taking up some margin. try using this.

approachnet
02-05-2012, 01:23 PM
It could have something to do with the <div> with the "PIPA..." too. Post all the code for the page so we can take a look.

dek
02-10-2012, 10:43 PM
@charset "UTF-8";
/* CSS Document created by Dan Kowalski, January 28, 2012*/

body {
font-family: sans-serif, Geneva, Arial, Helvetica;
font-size: 16px;
line-height: 1.3em;
color: #C0C0C0;
background-color: #333333;
background-image:url("images/gradient.jpg");
padding: 0;
margin: 0;
}

img {
float: left;
border: solid #696969 5px;
padding: 5px;
margin: 2%;
}
iframe {
border: solid #696969 4px;
padding: 3px;
margin: 3px;
float: right;
}
a:link {
font-weight: bold;
color: #6699CC;
text-decoration: none;
font-style: italic;
}
a:visited {
font-weight: bold;
color: #6699CC;
text-decoration: none;
}
a:hover {
color: #4169E1;
}

hr {
border: solid #696969 1px;
}

h1 {
font-size: 34px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
font-variant: inherit;
letter-spacing: normal;
line-height: 1em;
}
h2 {
font-size: 22px;
background-color: #696969;
letter-spacing: 0.5em;
padding: 3px;
font-variant: small-caps;
}
h3 {
font-size: 17px;
letter-spacing: 0em;
border-bottom-width: 4px;
border-bottom-style: inset;
border-bottom:thick dotted #FFFFFF;
padding: 4px 0;
font-variant: small-caps;
font-style: italic;
}
h4 {
font-size: 14px;
font-variant: small-caps;
letter-spacing: 0.5em;
}
h5 {
font-size: 10px;
font-variant: small-caps;
text-align: center;
}
h6 {
font-size: 10px;
font-variant: small-caps;
letter-spacing: 0.5em;
}
p, li, td {
letter-spacing: 0em;
color: #DCDCDC;
padding-left: 5px;
}
ul li {
margin-left: 8px;
}
ol {
margin-left: 14px;
}
table {
border: solid #696969 1px;
}
td {
padding: 8px;
border: solid #696969 1px;
}
th {
font-weight: bold;
background-color: #999938;
text-align: center;
padding: 6px;
border: solid #696969 1px;
}

#container {

width: 900px;
margin: 0 auto;
background-color: #0F0817;
opacity: .7;
}




<html>
<head>
<meta charset="UTF-8" />
<title>HTML - Page 1</title>
<!-- This original content created by Dan Kowalski Jan. 21, 2012 -->
<!-- CSS addition on Jan. 28, 2012 by Dan Kowalski -->

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">

<img src="images/Wikipedia_Blackout_Screen.jpg" width="500" alt="Protesting SOPA's Invasion of Rights" />
<h1>PIPA Opposition For Government to Back Down</h1>

<h3><em><strong>By: Dan Kowalski</strong></em></h3>


<p>Is our right to information being invaded by the federal government? Opposition says "Yes!".</p>

<p>
A new act, termed the U.S. Stop Online Piracy Act, offered by Congress will prevent overseas
websites from sending material deemed illegal to American citizens. The websites are accused
of infringing on American products, such as music, movies, software, and ideas. Current House
of Representatives Republican Lamar Smith (Texas) says that many people in opposition of the
bill have voiced their opinions. There will be further meetings in how to lessen the impact of
this bill. On another note, he presses that "We will continue to look for ways to ensure that
foreign websites cannot sell and distribute illegal content to U.S. consumers."
</p>

<p>
This is nothing new to the World Wide Web. Since the onset of our networks we shared information
through school networks. The difference now is that more information is available and it's harder
to control 'how' it's used. Lamar Smith continues, "Congress must address the widespread problem
of online theft of America's technology and products from foreign thieves." This is true in some, if
not all cases of copyright infringement. But where is the boundary? Companies will continue to lobby
until there is no piracy. This will never happen. Poor foreign countries that can barely compete with
other nations pirate because it generates capital.
</p>

<p>
What will happen now? Many groups have retaliated to these proposed laws. The infamous 'Anonymous' group
(hacker elitist group for free speech) has repeatedly warned governments and organizations that they will
dismantle their web presence if the enact this bill. 'Anonymous' is synonymous with the freedom of information
leading back to the Wikileaks reports from Iraq. These reports were allegedly secret clearance documents for
the movement of troops and footage of bombings from investigative flyovers.
</p>

<p>
The public has been heard! Six Senate Republicans have encouraged Nevada Democrat and Senate Majority Leader
Harry Reid to reschedule the vote on PIPA provisions. Computer World's Grant Gross reports that,
"Since the Senate Judiciary Committee unanimously approved PIPA in May, 'we have increasingly heard from a
large number of constituents and other stakeholders with vocal concerns about possible unintended consequences
of the proposed legislation,' ", voicing opinions from within the Republican portion of the committee.
</p>
<p><a href="page2.html">Next Page ==></a></p>

<hr />
<p><em>This page was created by Dan Kowalski on February 4, for Project 5 in CGS2821 Web Design. </em></p>

</div>
</body>
</html>

dek
02-10-2012, 10:44 PM
Sorry about that, should have posted it all to begin with. It's there now. :)

Excavator
02-11-2012, 02:03 AM
Hello dek,
I'm not sure how this is not solved already, VIPStephan already told you about uncollapsing margins and I see the 12 guage shotgun approach of *{margin:0;padding:0;} has been suggested as well (your html, by the way, does not appear to be "taking up some margin").

Your <h1>PIPA ...</h1> has a default top and bottom margin of 22px and seems to be the cause of your site not bumping up to the top of the viewport.

There are a couple things you can do to change that...2 of which have already been suggested.

one - h1 {margin-top: 0;}
two -
#container {
width: 900px;
margin: 0 auto;
background-color: #0F0817;
opacity: .7;
overflow: auto;
}
three - *{margin:0;padding:0;} (not recommended)

You should be using a DocType, I'm assuming you are even though you don't include it in the code you posted. See the link about DocTypes in my signature line below.

dek
02-11-2012, 02:42 PM
Thanks everyone! I just didn't know how to implement the fixes. I'm brand new to CSS. I appreciate your time.

Excavator
02-11-2012, 09:06 PM
Thanks everyone! I just didn't know how to implement the fixes. I'm brand new to CSS. I appreciate your time.

I'm glad you're getting it sorted out :thumbsup:
Did you read about uncollapsing margins? It can be a confusing issue but it's good to know about since it will happen to you a lot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum