SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Content Margins

  1. #1
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content Margins

    Hi there
    I am building my site using CSS and I seem to be having a margin problem. I would like my container to be flush on the top and bottom. I have set the margins to 0 in both the html and the container. I can not seem to find where the browser is getting the margin information. Can some one help?

    Here is a link to my site:

    http://www.premiumwebsites.net

    here is my CSS
    html {
    margin: 0;
    padding: 0;
    background-color:#ffcc66;
    color:#000000;
    }
    #content {
    position: relative;
    width:800px;
    height:auto;
    margin-top:0;
    margin-left:auto;
    margin-right:auto;
    background-image: url(../images/bgcontent.jpg);
    background-repeat: repeat;
    }

    #header {
    background-image: url(../images/bgheader.jpg);
    background-repeat:no-repeat;
    height: 220px;
    width: 800px;
    margin: 0;
    padding: 0px;
    }

    #leftnav {
    background: #9966cc;
    background-repeat:repeat-y;
    width: 130px;
    height: auto;
    position: relative;
    top: 5px;
    margin: 0;

    }
    #leftnav ul {
    list-style: none;
    margin: 0;
    position: relative;
    padding: 0;
    font: bold 1em Arial, Helvetica, sans-serif;
    font-size: 90%;
    text-decoration: none;

    }
    #leftnav li {
    border-bottom: 1px solid #ffffff;
    }
    #leftnav li a:link, #leftnav li a:visited {
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 90%;
    color: #FFCCFF;
    padding: 0.4em 0 0.4em 0.5em;
    border-left: 12px solid #cc99ff;
    border-right: 1px solid #663399;
    text-decoration: none;
    }
    #leftnav li a:hover {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size: 90%;
    color: #ffcc66;
    text-decoration: none;
    border-left: 12px solid #ffcc66;
    border-right: 1px solid #663399;
    padding: 0.4em 0 0.4em 0.5em;
    }
    .info {
    position: relative;
    top:-340px;
    display:block;
    border: 5px groove #9966cc;
    width: 480px;
    margin:0 50px 10px 150px;
    padding: 10px;
    color: #000;
    }
    #footer {
    position:relative;
    height: 70px;
    width: 800px;
    margin:auto;
    text-align:center;
    }
    #footer ul {
    list-style: none;
    font: normal .6em Arial, Helvetica, sans-serif;
    color: #000000;
    text-decoration: none;
    top: 20px;
    width: 800px;
    }
    #footer li {
    display: inline;
    color: #000000;
    padding-right: 3px;
    text-align: center;
    margin-left: 0px;
    width: 800px;
    }


    #footer a {
    color: #000000;
    margin-right: 2px;
    text-align: center;
    }
    .copyright {
    font-size: 0.7em;
    width: 800px;
    text-align:center;
    }
    h1 {
    font: 3em "Monotype Corsiva", cursive;
    position:absolute;
    top:35px;
    right:50px;
    margin: 0;
    float: right;
    letter-spacing: .2em;
    }
    h2 {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:1em;
    }
    h3{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:.9em;
    }
    .phone {
    position:relative;
    font-family:"Monotype Corsiva", cursive;
    font-weight:bold;
    font-stretch:expanded;
    font-size:1.2em;
    top: 180px;
    text-align:right;
    margin-right:10px;
    }
    .rightbox {
    position: relative;
    top: -398px;
    width: 130px;
    float: right;
    margin:0;
    padding-top:40px;
    padding-left: 5px;
    text-align:right;
    }
    .rightbox p {
    padding-left: 2px;
    padding-right: 2px;
    }

    #ad1 {
    position: relative;
    width: 125px;
    height: auto;
    }

    #ad2 {
    position: relative;
    width: 125px;
    height: auto;
    }
    .validated {
    position:relative;
    vertical-align: baseline;
    clear:both;
    }
    .portfolio {
    list-style-type: none;
    text-align: left;
    text-decoration: none;
    font-family: arial, helvetica, sans-serif;
    font-size: .8em;
    vertical-align: top;
    padding: 5px;
    }
    .pricing {
    display: block;
    list-style-type: disc;
    text-align: left;
    font-family: arial, helvetica, sans-serif;
    font-size: .9em;
    }
    .pricing a{
    color:#FFFF66;
    }
    .address {
    display: block;
    list-style-type: none;
    text-align: center;
    font-family: arial, helvetica, sans-serif;
    font-size: 1em;
    font-weight:bold;
    }
    .test {
    font-family:"Monotype Corsiva", cursive;
    font-size: 1em;
    font-weight:bold;
    }
    .right {
    font-family:"Monotype Corsiva", cursive;
    font-size: 1em;
    text-align: right;
    font-weight:bold;
    }
    .right a {
    color:#000000;
    }


    Thanks for your time.
    Dotty

  2. #2
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From the body?

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yep.

    I recommend you start with a global reset of the padding / margin on all elements as each browser implements these slighlty differently.
    Code:
    * {
      margin: 0;
      padding: 0;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The gap at the top is actually coming from 2 places in your code and they are the top margin on the h2 and the default margin on the body as already mentioned above.

    Due to collapsing margins the margin on the h2 collapses onto the element above and moves the page downwards revealing a gap.

    You need to ensure that when you have adjacent vertical or nested elements that there is something solid in the way such as a border or padding or the margin collapse onto the element above. In ost cases using a padding top will suffice.

    You need to control all the margins and padding explicitly but be aware that if you use the global reset (* margin:0;padding:0) then some form elements will be effected and for example input buttons in mozilla lose their visual clue of being depressed when clicked.

  5. #5
    SitePoint Addict Manna's Avatar
    Join Date
    Apr 2006
    Location
    Vancouver, WA
    Posts
    340
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for that explaination

    Dotty


Bookmarks

Posting Permissions

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