Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    Unhappy Please help me to position my footer...

    Hi friends,

    I've been struggling with this footer alignment problem for more than a day, tired of different combinations such as auto, absolute, 100% etc

    The structure of my page is as follows

    Code:
    <div id="wrapper">
         <div id="center_col" style="">
    		<div id="header"></div>
    		
                    <div id="menu_wrap"> </div>
    	        <div id="main_content"> 
    			  <div class="item_div">
    				<p>Content</p>
    						
    			  </div>
    	        </div>
    	  	
                    <div id="footer"></div>
        </div>	
    </div>
    My content text enclosed in item_div has a varying height(retrieving from DB)


    1) I want to keep my footer aligned at bottom.
    2) I want to stretch my center_col to the full height of window even when the content is too small.
    3) After all cross-browser compatible.

    Link to my demo page is FooterPos.htm
    and that of CSS is km.css

    Any help would be appreciated.

    Thanks and regards,
    art.
    Last edited by abduraooft; 07-07-2007 at 12:33 PM. Reason: No reply found yet
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    or please suggest another standard layout which can be modified as I want

    Hi,

    Its still troubling me.
    I’ve taken the bonrouge’s http://www.bonrouge.com/2c-hf-fluid.php and made some modifications. But,……. Should I compromise my expected design for not using any tables for layout?

    Here is my second attempt http://trials.casemumbai.com/trials/second.htm

    The main changes/additions I made on the original bonrouge’s CSS are

    Code:
    body{background:#000;}
    
    #wrap{ 
    background:url(bg200.gif) top left repeat-y;
    width:96%;
    margin:auto;
    margin-left:2%;
    margin-right:2%;
    }
    #header{
    border:1px solid white;
    color:#fff;
    height:80px;
    }
    
    #inner-wrap {
    background-color:#ddd;
    }
    
    #footer {
    bottom:10;
    border:1px solid red;
    }
    
    #left {
    border:1px solid red;
    }
    
    <!--[if IE]>
    <style type="text/css">
    #wrap {
    width:100%;
    }
    </style>
    <![endif]-->
    And then added my demo content.

    The part I added in IE conditional comment seems to be very funny. As my #wrap has both 2% margin-left and margin-right, I changed its width as 96%. It worked in FF, But IE displayed a larger margin on right, and when I made its width 100%, FF rendered it beyond my view-port. So I used it there. ( expalnations would be appreciated).

    Now my current problems are , How can I
    1) stretch my #inner-wrap area so that it always touch my footer?
    2) remove an approximate 10px spacing shown in FF and Opera(not in IE), out of which Opera shows it very badly (#left is OK but space b/w #main and header)
    3) add a 10px margin-top an margin-bottom so that my header and footer would be separated from body?
    4) move my #left (a menu will come here) to top so that the top boundary of my menu and header will coincide

    At last extremely sorry for this long draft. I hope I conveyed it correctly.

    Hopefully,
    Art.
    Quote Originally Posted by Arbitrator View Post
    Know that nothing is impossible; it is merely a matter of difficulty. —personal mantra
    Last edited by abduraooft; 07-07-2007 at 10:10 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    Here is my second attempt http://trials.casemumbai.com/trials/second.htm

    The part I added in IE conditional comment seems to be very funny. As my #wrap has both 2% margin-left and margin-right, I changed its width as 96%. It worked in FF, But IE displayed a larger margin on right, and when I made its width 100%, FF rendered it beyond my view-port. So I used it there. ( expalnations would be appreciated).
    You are using a bad document type:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    It is causing your page to be rendered in quirks mode. That is why you need to correct for the Internet Explorer box model bug. Instead use this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Then eliminate the IE specific styles.
    Quote Originally Posted by abduraooft View Post
    How can I
    1) stretch my #inner-wrap area so that it always touch my footer?
    Why would you want to? If it is because you need a background color then apply it to #wrap instead.
    Quote Originally Posted by abduraooft View Post
    How can I [...]
    2) remove an approximate 10px spacing shown in FF and Opera(not in IE), out of which Opera shows it very badly (#left is OK but space b/w #main and header)
    The margin is coming from the default margins of the p element. (Reason: margin collapsing). Use p {margin: 0} to see the difference.

    I think we better wait with your remaining questions till you get the above issues resolved.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks koyama,

    Now I'm in confusion. I had almost solved the problems in the page which I mentioned in my original post, after an effort of more than 2 days (newbie) and today I was thinking about posting another question on why I haven’t got any reply for my two posts (having more than 75 views) in the assumption that I made something wrong with my post (lengthy/violated any forum rules ….)

    I believe, the main changes made to the CSS in my first link is
    1)
    Code:
    * html body #wrapper #center_col{
    	/*considering the height of toolbars, address-bar etc*/
    height:70%;
    }
    2)
    Code:
    #center_col{
    	/*another optimisation*/
    	min-height:90%;
    	}
    The new link is here http://trials.casemumbai.com/trials/new/first.htm
    I don’t know what should I call this layout(2cf, 1cf or…) and I can’t completely believe this layout will work in all cases.


    So let me talk about the second .
    Quote Originally Posted by koyama View Post
    You are using a bad document type:
    Then eliminate the IE specific styles.
    Perfect, and I promise I won’t make such an error in future(since I suffered a lot )

    Quote Originally Posted by koyama View Post
    Why would you want to? If it is because you need a background color then apply it to #wrap instead.
    suitable:80%

    Quote Originally Posted by koyama View Post
    The margin is coming from the default margins of the p element. (Reason: margin collapsing). Use p {margin: 0} to see the difference.
    Thanks, I forgot to add the *{...} as I did in first.

    Now my problem is to effectively put a margin below #footer and #wrap, so that the footer won’t come over the content and there won’t be a gray portion below my footer.
    Here is the new link. http://trials.casemumbai.com/trials/new/second.htm

    All that I'm trying is to get something like
    and hope I can post the orginal link in Site reviews very soon

    (Can I change the Post Icon of my original post to something )
    regards,
    art.
    Last edited by abduraooft; 07-09-2007 at 01:37 PM. Reason: adding a picture of mylayout
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    Now my problem is to effectively put a margin below #footer and #wrap, so that the footer won’t come over the content and there won’t be a gray portion below my footer.
    Here is the new link. http://trials.casemumbai.com/trials/new/second.htm
    The gray portion is coming from here:
    Code:
    #footer {
    position:absolute;
    bottom:0;
    height:80px;
    width:100%;
    color:#FF00FF;
    text-align:center;
    bottom:15px;
    border:1px solid red;
    }
    So you need to leave it at bottom: 0;

    I would instead suggest that you implement the “margin” below footer as a bottom border on #footer and make the height correspondingly smaller:
    Code:
    #footer {
    position:absolute;
    bottom:0;
    height:65px;
    width:100%;
    color:#FF00FF;
    text-align:center;
    border-bottom: 15px solid black;
    }
    You can use the same technique for your header.

    It would have been nice if one could specify a height for #wrap that was 100%-30px, but unfortunately one cannot do things like that in CSS.

  • Users who have thanked koyama for this post:

    abduraooft (08-21-2007)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    /* Solved! */

    Quote Originally Posted by koyama View Post
    It would have been nice if one could specify a height for #wrap that was 100%-30px, but unfortunately one cannot do things like that in CSS.
    lol; I had really thought about that.

    here is my final link http://trials.casemumbai.com/trials/new/final.htm

    Thank you so much.
    Last edited by abduraooft; 07-11-2007 at 02:00 PM. Reason: Not solved completely...
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    Stupid IE6 refused to surrender completely...

    Hi friends,
    I'm back with this thread.
    That CSS was useful in my test cases with maximum content and minimum content.

    Now, when I reached the innermost part of my page, everything work fine, except in IE6. (Hope some of you still have IE6)

    In my page I'm using a link and a div for each item, where I display the topic in the link and the content in div

    I want to keep this div as display:none initially and when someone click on the link it's display will get toggled b/w block and none

    Worked in IE7,FF and Opera , but that IE6

    When I use display:none initially, the footer won't go down
    and if it was display:block initially, the footer won't come up, in the onclick

    Here is my new link
    http://trials.casemumbai.com/trials/...cond_final.htm
    (the second_final.htm )

    1) Please give me some fix for IE6 (I may be stupid!).
    2) In bonrouge's layout, the CSS in the IE's conditional comment has a term #content. What is that?

    thanks and regards,

    art
    Last edited by abduraooft; 07-12-2007 at 07:41 AM. Reason: trying to make it more clear...
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    Whenever I use display:none initially, the footer won't go down
    and if it is display:block the footer won't come up, in the onclick

    Here is my new link
    http://trials.casemumbai.com/trials/...cond_final.htm
    (the second_final.htm )

    1) Please give me some fix for IE6 (I may be stupid!).
    Ok, here is the best explanation that I can come up with at the moment. It may only be partly correct because I don't yet have a full understanding of the problem.

    When you click on that link and the large div appears then IE6 incorrectly does not redraw all the relevant portions of the page.

    But notice, when you resize the window after clicking that link then the footer falls into its correct position. Resizing the window may trigger a redraw event in a percentage based layout. But it does not necessarily trigger a redraw event in a fixed-width layout. If you try to switch to a fixed-width layout then you will see that the footer does not fall into correct position.

    This kind of thing may not always be easy to deal with. Note that this is not a hasLayout issue. (You have already triggered hasLayout on may elements using zoom: 1).

    To fix the problem the trick is to “activate” or “kick” IE6 into a redraw event nearby the footer. There are certain properties which can be used to trigger IE to redraw an element and portions around the element. One of them is by setting background-position: 0 0; even if there is no background image.

    Try to modify your script adding a “neutral” background-position: 0 0; for the footer. That fixed the issue when I tested.
    Code:
    function ExpandItem(id,e)
     {
    	
    	if(document.getElementById('div_'+id).style.display=='block')
    		{
    		document.getElementById('div_'+id).style.display='none';
    		}
    	else
    		{
    		document.getElementById('div_'+id).style.display='block';
    		document.getElementById('footer').style.backgroundPosition = '0 0';
    		}
     }
    Edit:
    It turns out that the footer does not fall back in place on the second click when the large div disappears again.

    This time it turned out that it didn't help to apply the kick on #footer. It does work when the kick is applied to #wrap however. The modified code:
    Code:
    function ExpandItem(id,e) {
    	if(document.getElementById('popup').style.display=='block') {
    		document.getElementById('popup').style.display='none';
    		document.getElementById('wrap').style.backgroundPosition = '0 0';
    	}
    	else {
    		document.getElementById('popup').style.display='block';
    		document.getElementById('footer').style.backgroundPosition = '0 0';
    	}
    }


    Quote Originally Posted by abduraooft View Post
    2) In bonrouge's layout, the CSS in the IE's conditional comment has a term #content. What is that?
    Hmm.. Looks like bonrouge may at some point have renamed the elements and forgotten to modify parts of the CSS. Let us hope he will drop by here and come with an explanation.
    Last edited by koyama; 07-11-2007 at 07:26 PM. Reason: Added information to complete the fix

  • Users who have thanked koyama for this post:

    abduraooft (08-21-2007)

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    Getting the grip!

    Quote Originally Posted by koyama View Post
    Ok, here is the best explanation that I can come up with at the moment. It may only be partly correct because I don't yet have a full understanding of the problem.
    Many thanks koyama,

    Even though I didn't get the exact purpose of terms like hasLayout, redraw-event etc.(wanna read more), I think now I've the solution.
    (NB: Following text is relevant to IE6 only )

    Try to modify your script adding a “neutral” background-position: 0 0; for the footer. That fixed the issue when I tested.
    ...................
    ...................
    and I summed up like this
    Code:
    function ExpandItem(id,e)
     {
    	
    	if(document.getElementById('div_'+id).style.display=='block')
    		{
    		document.getElementById('div_'+id).style.display='none';
                    document.getElementById('wrap').style.backgroundPosition = '0 0';
    		}
    	else
    		{
    		document.getElementById('div_'+id).style.display='block';
    		document.getElementById('footer').style.backgroundPosition = '0 0';
    		}
     }
    But that is also not suitable for me, ie. on the third click the page would exhibit the same old error. Please have a look at http://trials.casemumbai.com/trials/...ond_final1.htm

    Again, my page may have more than one similar links and divs, so finally I reached here
    Code:
    function ExpandItem(id,e)
     {
    	if(document.getElementById('div_'+id).style.display=='block')
    		{
    		document.getElementById('div_'+id).style.display='none';
    		}
    	else
    		{
    		document.getElementById('div_'+id).style.display='block';
    		}
    	// Holy hack for IE6 as per http://www.codingforums.com/showthread.php?t=118118
    	if(document.getElementById('footer').style.backgroundPosition =='1px 1px')
    		document.getElementById('footer').style.backgroundPosition = '0 0';
    	else
    		document.getElementById('footer').style.backgroundPosition='1px 1px';
     }
    and the link with two such items is here. Third final

    Once again, thanks koyama, you not only triggered the redraw in IE6, but also my mind

    regards,
    art
    Last edited by abduraooft; 07-12-2007 at 10:16 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hi,
    Sorry to come again with this old thread..

    Quote Originally Posted by koyama View Post
    To fix the problem the trick is to “activate” or “kick” IE6 into a redraw event in a percentage based layout.
    Is there any way to do the same in browsers like Konquerer or Mozilla/Firefox in Fedora (I'm using Fedora 4) ?

    I made a an attempt with window.resizeTo(screen.width,screen.height);, but failed.
    When I resize the window manually, everything looks perfect.

    regards,
    art
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    Is there any way to do the same in browsers like Konquerer or Mozilla/Firefox in Fedora (I'm using Fedora 4) ?
    I didn't know that there was a similar problem in these browsers too as in IE6.

    I probably don't have an answer, but can you please provide a test page so we can see the problem? Maybe someone else here knows how to solve the problem?

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks koyama,

    My last example(in the earlier post) is still relevant and I'll keep all of them

    Well, here is the link http://trials.casemumbai.com/trials/new/third_final.htm

    (OK in IE6,IE7, Opera9.2, FF2..... means success:99% in Windows)

    regards,
    art
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •