Can't remove top margin. Working with IE7 but not FF

Discussion in 'CSS' started by sparticus13, Jul 24, 2007.

  1. #1
    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>&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>
     
    sparticus13, Jul 24, 2007 IP
  2. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    its the paragraph thats the problem. reset its margin and paddings too

    p {margin:0; padding: 0;}
     
    deques, Jul 24, 2007 IP
  3. sparticus13

    sparticus13 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks that did it.
     
    sparticus13, Jul 24, 2007 IP
  4. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    remember to set a margin between the paragraphs too. so its easier to read the text

    p {margin:0 0 5px 0; paddnig: 0; }
    this sets bottom margin to 5px
     
    deques, Jul 24, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'd start by using a complete and proper DOCTYPE declaration, then start my stylesheet by removing all the margins and padding from the document, like so:

    
    * {
        margin: 0;
        padding: 0;
    }
    
    Code (markup):
    Note that this is NOT a hack, and should be used to ONLY remove the margins and padding. Put this at the VERY TOP of your stylesheet. Using this means you will not have to set the margins and padding to 0 ever again; just apply margins and padding where you need it.
     
    Dan Schulz, Jul 24, 2007 IP