Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    dek
    dek is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Small CSS margin/padding problem?

    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!

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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Read up on uncollapsing margins. The headline at the top has a default margin which is sticking out and pushing the body down.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    NY
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    South Florida
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    dek
    dek is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Here's the code.

    Code:
    @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;
    }
    Code:
    <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>

  • #6
    dek
    dek is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry about that, should have posted it all to begin with. It's there now.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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.
    Last edited by Excavator; 02-11-2012 at 02:13 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    dek (02-11-2012)

  • #8
    dek
    dek is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks everyone! I just didn't know how to implement the fixes. I'm brand new to CSS. I appreciate your time.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by dek View Post
    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
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •