Footer issue - link example and full code

Discussion in 'CSS' started by le007, Apr 2, 2009.

  1. #1
    Hello everyone,
    Below you will see a link which shows in IE6 what I'm hoping to attain in both IE and FF. At the moment the effect is self evident in FF - I want the footer to go below the middle section of my website (regardless of the content length).

    I have it set to be at the bottom of the page regardless of resolution - basically I need the website to look in FF as it does in IE regardless of content length - (IF the content is shorter than the resolution height I would like the footer to be at the bottom of the page).

    Thanks very much.

    CSS FILE:
    * {
    margin: 0;
    padding: 0;
    }
    img {
    border: 0;
    }
    
    html, body {
    height: 100%;
    width: 100%;
    background: url(bk2.jpg);
    background-attachment: 
    fixed;
    }
    
    
    /************************************************ CONTAINTER ***********************/
    
    #container {
    min-height: 100%;
    position: relative; /*ie happy*/
    width: 900px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/
    margin: 0 auto;
    font-family: sans-serif;
    background-color: white;
    }
    * html #container {height: 100%;} /*no min-height for lte IE6*/
    
    
    
    
    /************************************************ GREEN DIV ***********************/
    
    #greendiv {
    width:100%;
    background-color: #71BA22;
    font-family: verdana;
    font-size: 13px;
    color: white;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    voice-family: inherit;
    text-decoration: none;
    }
    
    
    
    
    
    
    /************************************************Main Content***********************/
    
    
    #flash {
    margin-top: 20px;
    }
    
    
    /************************************************Menu Div***********************/
    
    #menudi {
    float: left;
    width: 150px;
    margin-left: 10px;
    background-color: #71BA22;
    display: inline;
    }
    
    
    
    
    #maincon {
    float: left;
    width: 720px;
    background-color: #005C9B; 
    margin-left: 10px;
    font-size: 11px;
    }
    
    
    
    /************************************************Footer***********************/
    
    #footer {
    clear: both;
    margin-left: 0;
    margin-top: 0px;
    padding: 0 5px;
    border-top: 1px solid #b9c0ca;
    border-bottom: 1px solid #b9c0ca;
    font-family: tahoma;
    font-size: 13px;
    padding: 5px;
    text-align: left;
    height: 20px;
    width: 890px;
    background-color: #71BA22;
    color: #e0e4e7;
    overflow: hidden;
    border-top: 1px solid #949494;
    border-bottom: 1px solid #b9c0ca;
    position: absolute; /*ie happy*/
    bottom: 0;
    }
    * html #container {height: 100%;} /*no min-height for lte IE6*/
    
    
    
    
    .lbtop      { 
    background: url(left.gif) no-repeat;
    position: relative;
    left: 0;
    top: 0;
     }
    
    .rbtop { background: url(right.gif) no-repeat top right; }
    
    
    .lbtopc      { 
    background: url(left1.gif) no-repeat;
    position: relative;
    left: 0;
    top: 0;
     }
    
    .rbtopc { background: url(right1.gif) no-repeat top right; }
    
    
    
    /******************************* Menu 6 *******************************/
    #menu6 {
    	width: 150px;
    		margin: 0px;
    border-top: 1px solid #88C735;
    	}
    
    #menu6 ul{list-style-type:none;
    }
    	
    #menu6 li a {
    	voice-family: inherit;
      	height: 24px;
    	text-decoration: none;
    border-bottom: 1px solid #88C735;
    	}	
    	
    #menu6 li a:link, #menu6 li a:visited {
    	color: #FFF;
    	display: block;
    	background-color: #71BA22;
    	padding: 8px 0 0 10px;
    text-decoration: none;
    	}
    	
    #menu6 li a:hover {
    	color: #FFF;
    	background-color: #59AC10;
    	padding: 8px 0 0 15px;
    font-weight: bold;	
    }
    	
    
    
    
    
    
    
    </style>
    
    Code (markup):
    PHP FILE:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Welcome</title>
    
    
    
    
    
    <!--stylesheet -->
    <link href="file.css" rel="stylesheet" type="text/css" />
    
    
    
    </head>
    
    
    
    <body>
    
    
    
    <!-- the main container -->
    <div id="container">
    
    
    
    
    <div id="greendiv">
    Welcome
    </div>
    
    
    
    <!-- the middle part of the website -->
    <div id="flash">
    
    
    
    <!-- green div for holding Menu and divs for the corners -->
    <div id="menudi">
    	<div class="lbtop">
    	<div class="rbtop">
    
    
    <p class="title">
    NAVIGATION
    </p>
    <br>
    <br>
    
    <div id="menu6">
    		<ul>
    
    			<li><a href="index.php?locate=home" title="Link 1">Home</a></li>
    			<li><a href="index.php?locate=news" title="Link 2">News</a></li>
    			<li><a href="index.php?locate=about" title="Link 6">About Us</a></li>	
    			<li><a href="index.php?locate=contact" title="Link 7">Contact Us</a></li>	
    		</ul>
    <!-- close menu div -->
    </div>
    
    
    <!-- close corner divs -->
    	</div>
    	</div>
    
    <!-- close green div -->
    </div>
    
    
    <!-- main content div -->
    <div id="maincon">
    
    <div class="lbtopc">
    <div class="rbtopc">
    <p class="title">
    WELCOME
    </p>
    
    
    
    **************************************SHORTENED FOR EXAMPLE - BUT THE LINK HAS FULL TEXT****************************************
    
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
    
    an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
    
    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
    
    an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
    
    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
    
    an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
    
    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
    
    an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
    
    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <br><br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
    
    an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
    
    electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
    
    <!-- close corner divs -->
    	</div>
    	</div>
    
    
    <!-- close main content div -->
    </div>
    
    
    <!-- footer div -->
    <div id="footer">
    
    
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <!--container-->
    </body>
    </html>
    Code (markup):
    LINKS - PLEASE CHECK THIS IN BOTH IE AND FF - DESIRED EFFECT IS WHAT IE SHOWS. THANKS
    http://www.villasaintraymond.com/tempf/file.php
    http://www.villasaintraymond.com/tempf/file.css
     
    le007, Apr 2, 2009 IP
  2. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #2
    I've checked in both IE and FF and they look the same to me?

    IE
    [​IMG]

    FF
    [​IMG]
     
    typingmums, Apr 2, 2009 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Sorry about delay - I uploaded wrong version - please retry it now (egg on my face)
     
    le007, Apr 2, 2009 IP
  4. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #4
    No worries :)

    Ok we now have:

    IE
    [​IMG]

    FF
    [​IMG]

    I see what you mean now :)

    I'll have a look at the code and see if I can come up with anything
     
    typingmums, Apr 2, 2009 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    thanks very much - if I take out postion: absolute; from the footer and take out the content - I get this effect:
    [​IMG]
    whereas I want the footer to be a bottom in the case and IF the content is long for the footer to go below it and scrollable on the page.
    Thanks!
     
    le007, Apr 2, 2009 IP
  6. Trapped

    Trapped Well-Known Member

    Messages:
    1,832
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    130
    #6
    I am not sure what exactly you are trying to achieve, but however I do see a bug in FireFox. Can you add: overflow:hidden to #container and check if that brings the footer down to the bottom?
     
    Trapped, Apr 2, 2009 IP
  7. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #7
    Thanks for the reply - when I did that, IE took out the scroller - I'm going to make a jpg and try and explain it better - its very difficult to explain and I know how difficult it is to grasp!
    Many thanks for the help so far...
     
    le007, Apr 2, 2009 IP
  8. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #8
    I get it... basically you want the footer to sit at the bottom of the page, even if the content extends past that... is that right?
     
    typingmums, Apr 2, 2009 IP
  9. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #9
    Nope :D I want the footer to sit at the bottom IF the content DOESN'T reach the footer - if it reaches and extends past the footer I want the footer to be pushed down and the user would have to scroll down to see the footer... jpeg on the way...
     
    le007, Apr 2, 2009 IP
  10. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #10
    the image goes as follows:

    the top left pic is how it looks with long content in FF when footer is absolute;
    the top right pic is how it looks with long content in IE when footer is absolute;
    I want it to look like it does in IE in this case for BOTH - can't figure it out!

    the bottom left pic is how it looks in both IE and FF if the content is short and I take out absolute positioning on the footer.
    the bottom right pic is how i'd like it to look in ie and ff if the content is short (it does look like this if I leave the footer as absolute but if i do that and the content is LONG then I get the top left pic in ff)

    I really really really hope this makes sense. Thank you
    [​IMG]
     
    le007, Apr 2, 2009 IP
  11. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #11
    Anyone any ideas
     
    le007, Apr 3, 2009 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Well, let's see... First up your comment placement could be tripping rendering bugs in IE. They end up between floats bad things could happen.

    Mostly it's hard to figure out what's going on with the css because of all the redundant, conflicting and unnecessary properties. It looks like you are trying for a 100% min-height model, but have gone about it all wrong. Switch the position:absolute to position:relative, and set margin-top equal to a negative value equal to it's height.... then pad the bottom of your content in #container to make sure that if the page is too short.

    Due to recent changes in certain browsers (IE8, Opera 9/10 and FF3) I've begun to distrust scrollbars on html/body since they aren't applied to the same elements and there are lots of quirks on their handling, so for min-height layouts it seems best to bite the bullet, make both html and body w/h:100% and overflow:hidden, then nest an extra DIV that's pos:rel, w/h:100% and overflow:auto - it just clears up so many issues.

    I believe this is what you were trying to accomplish:
    http://www.cutcodedown.com/for_others/IE007/template.html

    As with all my examples, the directory:
    http://www.cutcodedown.com/for_others/IE007

    Is unlocked so you can grab the gooey bits. Notice it only uses two images for the borders (I could actually reduce that to one). Valid XHTML 1.0 Strict, Valid CSS 2, tested working in IE 5.5, 6 & 7, FF 2 & 3, Opera 9.26 and 10 beta, Safari 3 & 4, and of course Chrome.

    that is what you were aiming for, right?

    Oh, BTW the way I coded it you could switch to min/max-width up to 2048 pixels wide, since the #content element is fully dynamic as are the top/bottom rounded corner implementations. Just change the width on #container and #footer and you're good to go.
     
    deathshadow, Apr 4, 2009 IP
  13. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #13
    Wow thank you very much indeed - thats excellent, EXACTLY the effect I was after - I'm striving through this text at the moment trying to figure it out and TRYING to see how you did the rounded corners? The images DON'T have rounded edges hahah?? :D
     
    le007, Apr 7, 2009 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #14
    They do, though you might not be seeing it since the images are 2048 pixels wide... I used a technique called sliding doors to make those top and bottom images, this allows you to freely adjust your widths up to that wide without worrying about having to recreate all the images. I just made a image 2048 wide and twice the height of the rounded corners, then I rounded the edges into semi-circles. For the top area you show the top-left half and allow it to fill the entire div, then float the div inside that right and make it the width of the rounded corner, showing the background top-right.

    The way I implemented it the graphics do NOT use transparancies, if those are desired the best bet is to add one more div around the content, and use a technique like my Eight Corners Under One Roof
     
    deathshadow, Apr 7, 2009 IP
  15. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #15
    Very interesting, I've never seen this method before.
    Thanks again
     
    le007, Apr 8, 2009 IP