SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer overlapping in IE7

    I have this problem only in IE7 where my footer is overlapping the content div.

    here is the link http://www.helicopternewyorkcity.com/tour

    here is the css

    Code CSS:
    .container
    {
    	margin:0 auto;
    	width:980px;
    }
    .content
    {
    	width:100%;
    }
     
    .footer_bg
    {
    	background-image:url("/i/1748/footer.gif");
    	background-repeat:no-repeat;
    	width:980px;
    	height:151px;
            margin-top: 20px;
     
    }

    the html is something like this

    HTML Code:
    <div class="container">
       <div class="content">content</div>
       <div class="footer">footer</div>
    </div>
    hope someone can help.

    Cheers

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You'd be better off to remove the bottom padding on the #content section and remove the margins on the #footerContainer. Without them, those elements will just stack naturally in all browsers.

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have done that still doesn't work

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hmm, divs within divs within divs... makes it hard to debug.

    Anyhow, perhaps try this (it's just a guess):

    Code:
    #footerContainer {clear: both;}
    One other thing I notice, that may be useful here and/or for future reference:

    Instead of using a div like .spacer, do something like

    Code:
    #content {margin-bottom: 36px;}

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

    the problem is that you have set te height of some of your elements to 1px high which means that any overflow ill be ignored.

    Code:
    .rezgo_clm_487px_btm {
        background: none!important;
        text-align:center;
        width:607px !important;
        /*height:1px !important*/
    }
    .right_inner_content h5 {
        float:left;
        width:270px;
        margin-top:10px;
        background-color:#b8b8b8;
        /*height:1px;*/
        font-size:1px;
    }
    If that was a hack for ie6 then there's no need because the element already has a layout and the 1px should be removed.


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
  •