38 users online (1 members and 37 guests)  

Thread: Margin?


  Results 1 to 5 of 5

Related

  1. Problem with margin in CSS    Forum: CSS Forum
    Replies: 7
  2. Ie mysterious margin around my box...    Forum: CSS Forum
    Replies: 1
  3. Problem with margin in CSS    Forum: HTML Forum
    Replies: 6
  4. Replies: 2
  5. web page margin    Forum: HTML Forum
    Replies: 16
  1. #1
    clperez390's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    3

    Margin?

    Why does my code look like it has a margin at the top of my container?

    Code:
    img {
    border:0;
    }
    
    a { 
    text-decoration:none;
    }
    
    html {
    height:100%;
    margin:0 auto;
    }
    
    body {
    height: 100%;
    background: rgb(232,232,232);
    text-align: center;
    margin:0 auto;
    
    }
    
    #container {
    height: 100%;
    text-align:left;
    background: rgb(250,250,250);
    width: 750px;
    margin:0 auto;
    }
    
    #header {
    text-align:center;
    }
    
    #nav {
    margin: 0;
    padding: 0 0 20px 10px;
    border-bottom: 1px solid #000;
    }
    
    #nav ul, #nav li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
    }
    
    #nav a:link, #nav a:visited {
    float: left;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #999;
    }
    
    #nav a:link#current, #nav a:visited#current, #nav a:hover {
    border-bottom: 4px solid;
    padding-bottom: 2px;
    color: #000;
    }
    
    #main{
    
    }
    
    #footer {
    padding: 0px;
    margin-top: 50px;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    text-align: right;
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
    
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
        <title>BhamERC: Home Page</title>
    </head>
    
    <body>
    <div id="container">
        <div id="header">
            <h1>The Unofficial
            <acronym title="Bellingham Emergency Response Communications">
            BhamERC</acronym> Site</h1>
        </div>
    
        <div id="nav">
            <ul>
            <li><a id="current" href="index.html">Home Page</a></li>
            <li><a href="none.html">Not Licensed</a></li>
            <li><a href="tech.html">Technician Class</a></li>
            <li><a href="gen.html">General Class</a></li>
            <li><a href="extra.html">Extra Class</a></li>
            </ul>
        </div>
    
        <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
        </div>
    
        <div id="footer">
             <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://bhamerc.awardspace.com/">
            <img style="width:88px;height:31px"
                 src="http://jigsaw.w3.org/css-validator/images/vcss.png"
                 alt="Valid CSS!" /></a>
                 <a href="http://validator.w3.org/check?uri=http://bhamerc.awardspace.com/index.html">
            <img src="http://www.w3.org/Icons/valid-xhtml10.png"
                 alt="Valid XHTML 1.0 Transitional"
                 height="31"
                 width="88" /></a>
                 <a href="http://www.getfirefox.com"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC"
                 alt="Get FireFox"
                 border="0" /></a>
        </div>
    </div>
    </body>
    </html>

  2. #2
    clperez390's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    3

    Re: Margin?

    In firefox only.

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Margin?

    Hi there clperez390,

    and a warm welcome to these forums.
    Why does my code look like it has a margin at the top of my container?
    This is due to the default margin of the h1 element
    I tend to set all margins, paddings and borders to 0 using he universal selector, written "*" and then set individual values as necessary.
    Try this stylesheet and see if it suits your requirements...
    Code:
    * {
        margin:0;
        padding:0;
        border:0 solid;
     }
    html,body {
        height:100%;
        background:rgb(232,232,232);
        color:#000;
        text-align:center;
     }
    #container {
        width:750px;
        height:100%;
        background:rgb(250,250,250);
        color:#000;
        margin:auto;
     }
    #nav {
        padding:0 0 20px 10px;
        border-bottom:1px solid #000;
     }
    #nav ul,#nav li {
        display:inline;
        list-style-type:none;
     }
    a { 
        text-decoration:none;
     }
    #nav a:link,#nava:visited {
        float:left;
        line-height:14px;
        font-weight:bold;
        margin:0 10px 4px 10px;
        background:rgb(250,250,250);
        color:#999;
     }
    #nav a:link#current,#nav a:visited#current,#nav a:hover {
        border-bottom:4px solid #000;
        padding-bottom: 2px;
        background:rgb(250,250,250);
        color:#000;
     }
    #main{
        clear:both;
        padding:20px;
     }
    #main p {
        text-align:justify;
     }
    #footer {
        padding-top:50px;
        border-top:1px solid #000;
        text-align:right;
    }

  4. #4
    clperez390's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2007
    Posts
    3

    Re: Margin?

    Thanks for your help, works perfectly now!

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Margin?

    No problem, you're welcome.



Tags for this Thread