...

View Full Version : Please help me to position my footer...



abduraooft
07-06-2007, 11:18 AM
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


<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 (http://trials.casemumbai.com/trials/FooterPos.htm)
and that of CSS is km.css (http://trials.casemumbai.com/trials/km.css)

Any help would be appreciated.

Thanks and regards,
art.

abduraooft
07-07-2007, 10:20 AM
Hi,

Its still troubling me.
I’ve taken the bonrouge’s http://www.bonrouge.com/2c-hf-fluid.php (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


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.


Know that nothing is impossible; it is merely a matter of difficulty. —personal mantra

koyama
07-08-2007, 02:15 PM
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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
It is causing your page to be rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html). That is why you need to correct for the Internet Explorer box model bug (http://en.wikipedia.org/wiki/Box_model_bug). Instead use this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Then eliminate the IE specific styles.

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.

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.

abduraooft
07-09-2007, 01:02 PM
Thanks koyama,:thumbsup:

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)
* html body #wrapper #center_col{
/*considering the height of toolbars, address-bar etc*/
height:70%;
}
2)
#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 .

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;) )



Why would you want to? If it is because you need a background color then apply it to #wrap instead.

suitable:80% :)



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 http://trials.casemumbai.com/trials/new/layout.jpg
and hope I can post the orginal link in Site reviews very soon:thumbsup:

(Can I change the Post Icon of my original post to something :) )
regards,
art.

koyama
07-09-2007, 02:35 PM
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:


#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:


#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.

abduraooft
07-09-2007, 04:41 PM
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.

abduraooft
07-11-2007, 10:41 AM
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 :eek:

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/new/second_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

koyama
07-11-2007, 07:17 PM
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/new/second_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.


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';
}
}

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:


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';
}
}




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.

abduraooft
07-12-2007, 11:07 AM
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


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/new/second_final1.htm

Again, my page may have more than one similar links and divs, so finally I reached here

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;) (http://trials.casemumbai.com/trials/new/third_final.htm)

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

regards,
art

abduraooft
08-03-2007, 06:24 PM
Hi,
Sorry to come again with this old thread..



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

koyama
08-05-2007, 02:56 AM
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?

abduraooft
08-05-2007, 10:58 AM
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 (http://trials.casemumbai.com/trials/new/third_final.htm)

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

regards,
art



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum