SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem with footer display

    I'm having trouble keeping my footer div in the position I want. I have defined in css styling that I want a margin of 10px between the upper div's(#nav, #image) and the footer(#footer) , however when it displays in both Internet Explorer and Firefox the footer shifts further down the page (30/40px approx.). Does any know of a resolution for this.

    The code is displayed below:

    -------------------------------------------------------------------------------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML lang=eng><HEAD><TITLE></TITLE>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{
    width:800px;
    margin:auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #header{
    width:800px;
    height:50px;
    background-color:#999933;
    margin-top:30px;
    }
    #content{
    width:800px;
    margin:0;
    padding:0;
    }
    #nav{
    margin-top:10px;
    margin-bottom:10px;
    padding:0;
    float:left;
    }
    #nav ul{
    list-style-type:none;
    margin-left:0;
    margin-top:0;
    padding:0;
    font-size:24px;
    }

    #home{
    width:270px;
    height:65px;
    padding-left:20px;
    padding-top:20px;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#00CCCC;
    }
    #about{
    width:270px;
    height:65px;
    padding-left:20px;
    padding-top:20px;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#CC0066;
    }
    #gallery{
    width:270px;
    height:65px;
    padding-left:20px;
    padding-top:20px;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#660000;
    }
    #contact{
    width:270px;
    height:65px;
    padding-left:20px;
    padding-top:25px;
    margin-right:10px;
    margin-bottom:0;
    background-color:#000099;
    }
    a:hover{
    background-color:#FF0000;
    }
    li a {
    text-decoration:none;
    color:#FFFFFF;
    }
    li a:hover{
    text-decoration:none;
    }
    #image{
    margin-top:10px;
    margin-right:0px;
    padding:0;
    float:left;
    }


    #footer{
    clear:both;
    width:800px;
    height:50px;
    margin-top:0;
    padding-top:0;
    background-color:#999933;
    }
    </style>
    </head>

    <body>
    <div id="header">
    Header
    </div>

    <div id="content">

    <div id="nav">

    <ul>
    <li id="home"><a href="#">+ Home </a></li>
    <li id="about"><a href="#">+ About</a></li>
    <li id="gallery"><a href="#">+ Gallery</a></li>
    <li id="contact"><a href="#">+ Contact</a></li>

    </ul>
    </div>

    <div id="image">
    <img src="image01.jpg" width="500" height="375" />
    </div>

    </div>

    <div id="footer">
    hello
    </div>
    </body>
    </HTML>

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding margin-bottom: 0 to #nav ul

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks very much fredda

    this works perfect now in firefox but the footer squeezes nearer to then the 10px in Internet Explorer.

    Thanks for your help.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding margin-bottom:10px; to #contact instead of having margin-bottom: 10px on #nav seems to make it work in both Internet Explorer and Firefox

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks very much for your help fredda. That works for me now.

    Thanks again.


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
  •