SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: dang footer

  1. #1
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy dang footer

    I've got a page with a header and then a main section with another header and then 2 columns. Then I'm trying to put my legal text as my footer. It's working great in IE and Opera, but not in Firebird.

    my css:
    Code:
    body {
    	background-color: #B3D6EA;
    	margin: 0;
    	padding: 0;
    }
    #top {
    	background: #ffffff;
    	height: 109px;
    	border-bottom: 1px solid #000000;
    	height: 108px;
    	position: relative;
    	width: 100%;	
    	left: 0;
    	top: 0;
    }
    #main {
    	margin-left: 109px;
    	position: relative;
    	width: 100%;	
    }
    #legal {
    	background: #ffffff;
    	border-top: 1px solid #000000;
    	position: relative;
    	width: 100%;
    }
    #logo {
    	margin-left: 10px;
    	margin-top: 20px;
    	float: left;
    	width: 592px;
    }
    #topmenu {
    	margin-left: 609px;
    	padding: 7px;
    	background-image: url('../images/navh_break.gif');
    	background-repeat: no-repeat;
    }
    
    #releasecontent {
    	width: 457px;
    	float: left;
    }
    #otherreleases {
    	margin-left: 499px;
    	width: 133px;
    }
    my html:
    Code:
    <div id="top"> 
      <div id="logo">
        logo  
      </div>
      <div id="topmenu">
        top menu
      </div>
    </div>
    
    <div id="main">
      <div id="pressheader">
        i am the header hear me roar
      </div>
      <div id="releasecontent">             
                 release content    release content    release content    release content    release content 
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content    release content    release content    release content    release content
    	release content
      </div>
      <div id="otherreleases">
        other releases
      </div>
    </div>
    
    <div id="legal">the legal stuff</div>
    The problem is it keeps move the legal tag to the bottom of otherreleases instead of keeping it underneath the main div. I've used "clear: both;" and that positions it towards the bottom, but there still seems to be a gap.

    This page also produces a horizontal scrollbar in Firebird only.

    Thoughts, advice?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Take off the relative positioning if you're not doing anything with it. Add "clear: both;" to your div#main, and then let us know what happens.

    Also, you're getting scrollbars because you specify a 100% width + a 1 pixel border. That will stretch your page beyond 100% because of the extra 2 pixels on the left and right border, causing a scrollbar to appear.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you put a clear : both in "legal, like:

    #legal {
    clear : both; /* <-- added */
    background: #ffffff;
    border-top: 1px solid #000000;
    position: relative; width: 100%;
    }

    then it is good in Mozilla.(and firebird)

    If you want to see where the hor.scrollbar comes from, then place some borders around the divs, and look wich one goes of the screen...

    wimb

  4. #4
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added the "clear: both;" in, and although it brings it to the bottom, there's still this small gap below it...

    However, maybe it's related to the whole thing being a little askew.

    The scrollbar comes from the main div. Perhaps because it's 100% and has a left margin? Should I get rid of the margin and just add left-padding? (and then padding: 0 to all div's inside it?).

    Thanx for the help so far guys.

  5. #5
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hate to be bumpy, but this thing is really irking me... any suggestions?

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The gap below comes when the page is too short and there is no height specified from the #legal div.
    When you add: height : 50px; it will be better, it depends also of the length of the content and the size of the screen.

    wimb

  7. #7
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the real page I have quite a bit of text and there is a vertical scroll. However, there is still a small gap. I can make the div a very large height, there is always a small gap underneath.

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When the page is long enough then I don't see a gap.
    I used your code from the first post, modified with the clear: both and it looks good in: Mozilla, Firebird, Opera and IE - all the latest versions.

    can you put your page online?

    wimb

  9. #9
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird. When the page is long, I still see it - but it's only in Firebird. It also has a horizontal scroll. Once again, only in Firebird. I'll post it real soon, thanks for helping out.

  10. #10
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Almost forgot! (not good)

    http://vodkafish.com/vf/atmo/press/test2.htm

    I think my main problem is coming from the horizontal scroll in Firebird (which is also causing the bottom gap when content is elongated). No other problems I've seen.

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found:

    Code:
     
    #main {
      margin-left: 109px;
      width: 100%;
      clear: both;
      border: 2px solid green;
    }
    This causes the hor scrollbar, because the width 100% + 109px + 4px, which is always more then the screen width. Please try to change like:

    Code:
     
    #main {
     margin-left: 20%;
     width: 78%;
     clear: both;
     border: 2px solid green;
    Change also to other 100% values to 98%, then the hor. scrollbar must be gone. then look how it is.

    wimb

  12. #12
    Drop em if you got em
    Join Date
    May 2003
    Location
    NY
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I figured it was that, but it didn't make "sense" in terms of rendering (logically it can, but I'm just trying to hit all of them and have it work well).

    As I need it to be exactly 109px, I just removed the width since there's no background color it's fine.

    Also, the gap was helped being caused by:
    Code:
    <div id="legal">
    the legal stuff
    </div>
    So I made it:
    Code:
    <div id="legal">the legal stuff</div>
    and it's fine now

    Thanx!


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
  •