...

View Full Version : Positioning "footer" to the bottom fully, imposible mission.



backfolder
06-03-2007, 08:42 PM
Well, my project is growing and finally is getting a final stage. But there is so many things in CSS that I canīt manage, and the footer is the worse.
Iīve been spending around four hours trying to positioning the foot to the BOTTOM of the page, and it seems like an imposible mission. The foot is allways "floating", centered and with color styles, but didnīt fitted to the bottom.

This is my "footer" code:


#footer {
background: url(images/degradado_pie.jpg) center no-repeat;
height:45px;
text-align:center;
font-family: tahoma;
font-size: 75%;
clear:both;
margin-top:3em;
}

And this is my test web-site and the CSS:

http://www.arcorel.com/test/index.html
http://www.arcorel.com/test/basic.css

I will really apreciate any help, just because it is the last thing I need to start adding content and forget about the main structure.

Thanks in advance, as allways!

backfolder.-

_Aerospace_Eng_
06-03-2007, 08:52 PM
Make #container-page position:relative and then add this to the CSS for your footer

position:absolute;
width:100%;
bottom:0;
left:0;
You will have to add a bottom padding on #main equal to or greater than the height of your #footer. Also remove the top margin on #footer. You may have to redo your background image for the footer though.

backfolder
06-03-2007, 10:18 PM
_Aerospace_Eng_,

First of all thanks for your quick reply and interest. Theres seem to be a bug in the text background color when using position in the #container-page. Background color is broken when you scroll up and down.

Thereīs the changes youīve suggested:

http://www.arcorel.com/codingforums/index.html

Now the foot is better, but under it there is a lot of "air".
Iīm missing something...

backfolder.-

_Aerospace_Eng_
06-03-2007, 10:27 PM
Reread my post carefully. There is one part in there that you didn't do.

backfolder
06-04-2007, 09:04 AM
Hey Aerospace,
Well, Iīve forget to re-size the image to 760px. Now fits perfect!!
But thereīs still a text and background color bug. Iīve just changed the color in the #main from #511D48 to #EFE3F1, but all the tabīs color obviously changes.

#main {
border: 0px solid #666;
clear: both;
background: #511D48;
padding-top: 2em;
font-family: "MS Sans Serif", Geneva, sans-serif;
color: #FFF;
padding-bottom: 45px;
}
So I donīt know if should I redo the tabs CSS or keep trying until find the key... Any ideas of what this happend when using "position"?
Thanks a lot!

backfolder.-

backfolder
06-04-2007, 07:34 PM
Well now Iīve just done.
Now the big problem is the %&!@&?€! compatibility between brownsers!!!
Iīve just download Firefox, and results are a bit horrible... Iīm tired, Iīm a designer not a programmer...
Can someone give me some tips about how to keep the look at least in Firefox and Explorer?
Iīm gonna search anyway in the forums...

backfolder.-

koyama
06-04-2007, 10:51 PM
Can someone give me some tips about how to keep the look at least in Firefox and Explorer?
Your menu is too high up in Firefox.

Look at you #header:


#header {
position: relative;
width: 100%;
height: 3em;
width: 45em;
}
It needs to be higher than 3em. The banner is 150px high. You should probably just drop the height.

Why is it looking alright in IE6? Read this: Internet Explorer and the Expanding Box Problem (http://www.positioniseverything.net/explorer/expandingboxbug.html) [fixed in IE7]

backfolder
06-05-2007, 11:34 AM
@ koyama,
ups! I forget! That point (adding i.e. 150 px) fix the problem in Firefox. So thanks a lot.
Iīve just removed position:absolute and now the foot fits in the bottom perfectly, but... Thereīs a "div" or rectangle that appears just over the foot, and I donīt know why...

And if you see Contact section, in the Google Ads div, alse appear another "background" that I canīt identify!
This two poltergeist are driving me crazy! So any advace is really appreciated...

As always, thaks a lot for your help!

backfolder.-

backfolder
06-05-2007, 01:07 PM
Well position:absolute removed and now the foot fits in the bottom perfectly.

But footer in Contact section when bronwsing with Firefox, is still displayed at the middle of the page. And I donīt know why!!!

Thaks a lot for your help!

backfolder.-

koyama
06-05-2007, 02:02 PM
But footer in Contact section when bronwsing with Firefox, is still displayed at the middle of the page. And I donīt know why!!!

The problem is that the #google_sky is floated, but floats do not by default expand their container.

To solve your problem, add the red part:


#main {
border: 0px solid #666;
clear: both;
background: #511D48;
padding-top: 2em;
font-family: "MS Sans Serif", Geneva, sans-serif;
color: #FFF;
padding-bottom: 45px;
overflow: hidden;
}

To learn more, read this: http://www.quirksmode.org/css/clearing.html

backfolder
06-05-2007, 02:28 PM
Yes!!!
That fixed the problem... and when everything looks clear and ready to add content... now the submenus doesnīt appear!!! XDDDDD
Well, Iīm comparing two CSS in order to find the bug:

http://www.arcorel.com/codingforums/tabs.css
http://www.arcorel.com/test/tabs.css

Final layout and elements (and compatibility) is near, thanks to you all!

koyama, thanks for the link, and thanks for your help!!!

backfolder.-

koyama
06-05-2007, 02:34 PM
... now the submenus doesnīt appear!!!
Hmm... I don't know where you are looking? Which page? and which browser?

backfolder
06-05-2007, 04:11 PM
hi again, koyama,

If you compare this two pages:

http://www.arcorel.com/codingforums/pintura.html
... and
http://www.arcorel.com/test/pintura.html

In the first one you will see that sublinks into category Pintura are invisibles, but they exists. Iīve just compared both CSS, and didnīt find any obvious change.

Thaks for any help!

backfolder.-

koyama
06-05-2007, 06:17 PM
If you compare this two pages:

http://www.arcorel.com/codingforums/pintura.html
... and
http://www.arcorel.com/test/pintura.html

In the first one you will see that sublinks into category Pintura are invisibles, but they exists.
You have this:


div, td, th, h2, h3, h4 { /* redundant rules for bad browsers */
position: relative;
font-family: verdana,sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
color: #333;
}

I would really be careful using such a general declaration setting all div elements to have position:relative. I am not sure why you have used it in the first place. It does fix some rendering issues in IE, but it actually leads to other bugs in IE. Probably it makes just about as much damage as it solves for. My best advice is to remove it. It has consequences on stacking order too. Removing it will solve your stacking order problem too.

Also, I would drop those hacks for IE5/Win considering how few IE5/Win users there are. Have you asked yourself which browsers you need support for? If you want support for IE5/Win then you should also test your page in that browser. All those hacks make your style sheet much harder to read and maintain.

Only if the hacked styles for IE5/Win have consequences on accessibility for users with that browser then I would consider implementing them. But this doesn't seem to be the case.

backfolder
06-05-2007, 08:22 PM
Thanks koyama,

Yes, definitely this red one is the guilty (well the real guilty is me for adding ;). But if I remove position: relative, the background colored issue is there again.

And about browsers, I want to do it compatible at least with IE, Firefox and Opera (maybe Safari too). I will check it.

About the IE5 hack Iīm gonna remove it. As you said is more the problem that causes, than the fixes..

Once again, thaks for helping me!

backfolder.-

koyama
06-05-2007, 08:38 PM
But if I remove position: relative, the background colored issue is there again.
I'm not sure what background color issue you mean. Try to remove that line in red I mentioned and then update the link.

If there are rendering issues with missing background colors then I'm sure that there is a better fix than setting all div elements to be relative.

backfolder
06-05-2007, 09:21 PM
Thanks!!
Line removed. And now the problems..
http://www.arcorel.com/codingforums/index.html
Donīt know why this! Buff!!

backfolder.-

koyama
06-06-2007, 01:35 AM
Line removed. And now the problems..
http://www.arcorel.com/codingforums/index.html
Donīt know why this! Buff!!
This bug in IE6 arises when one has the 3 divs nested in this sequence:

A relative div that hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) (for example if it is given an explicit width)
A static div without layout nested inside 1
A static div without layout nested inside 2

When you have such a setup, then in IE6, the 3rd div will have completely missing background and border color on page load. It is partially fixed when a “redraw event” occurs. This may happen when you resize the window or when you hover over certain links with certain :hover styles.

If you take a look at your #container_page, #main, #contents, you will see that they fulfill exactly the above conditions.


#container-page {
position: relative;
width: 760px; /* this triggers hasLayout in IE */
margin: auto;
min-height: 100%;
background-color: #EDE4F1;
}
#main {
border: 0px solid #666;
clear: both;
background: #511D48;
padding-top: 2em;
font-family: "MS Sans Serif", Geneva, sans-serif;
color: #FFF;
padding-bottom: 45px;
overflow: hidden;
}
#contents {
padding: 1.5em;
background: #EDE4F1;
min-height: 300px;
}
To fix the problem you can for example give your #main hasLayout:


#main {
_zoom: 1; /* trigger hasLayout in IE6 */
}

Although I have seen this bug several times I don't know of a source describing it, so here is an example you can try in IE6:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang="en">
<head>
<title>CF115511</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html { font-family: sans-serif; }
/* the example */
#one {
position: relative;
zoom: 1; /* triggers haslayout */
}
#two {
background: pink;
border: 20px solid purple;
}
#three {
background: yellow;
border: 20px solid orange;
}
a:hover {
background-position: 0; /* kick IE 6 */
}
</style>
</head>
<body>
<div id="one">
<div id="two">
<div id="three">
some text<br>
some text<br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
<a href="">hover link</a><br>
some text<br>
some text<br>
some text<br>
some text<br>
some text<br>
</div>
</div>
</div>
</body>
</html>
Try to resize the window or hover over the links to see the effect of the redraw event.

Live example (http://koyama.dk/demos/CF115511/CF115511.html)

backfolder
06-06-2007, 12:18 PM
My God!!! Only one line!!!

My problemīs gone thanks to you! Now I can start adding content and forget that weird bug. Iīve just follow the link you gave about hasLayout, and I am now watching and printing to see later.

Thanks koyama for all your help, time and patience!!!

And thanks to other people in codingforums, who help me in this sometimes weird, sometime grateful world of CSS.

I will stay in touch with this forums! :thumbsup:

backfolder.-

backfolder
06-06-2007, 01:49 PM
Hummm!!

Still having the "missing text" bug in Pintura link. :mad:

Iīm looking for a efficient and compatible way of align boxes for images.
I want to have a gallery, mainly 2 (index) and 3 (per main category page) images horizontally aligned, but Iīve found two problems mainly: one is the correct position without using float, and the other is the compatibility.
Iīm looking some links like FloatTutorial by css.maxdesign.com, and the complexspiral to make it definitively!!

Thanks for your patience!

backfolder.-

koyama
06-06-2007, 10:01 PM
Hummm!!
Still having the "missing text" bug in Pintura link. :mad:
Hmm... I don't know what text is missing? Can you point at the error? Everything looks fine to me. I tried Firefox 2 and IE 6.

backfolder
06-07-2007, 12:52 PM
Sorry koyama!
It was a local IE cache problem. :o
Iīm working with TopStyle, and doing the preview locally, so thereīs the bug.

Now I want to add a background image for each section, and position in the bottom (over the foot), so... Wich is the better way of call each image?

Supose three cases (what we have by now):

Section INICIO: generic image.
Section PINTURA: brushes image.
Section CONTACTO: envelope image.

How can I call each one? using a generic name and position for the background image in corresponding directory? Or better doing a non generic ID and use independent ones for each HTML document?

Thanks for any advice!

backfolder.-

backfolder
06-07-2007, 04:05 PM
( I canīt edit my messages, so sorry)

Yes, is a bug:

Description:
First click here _ http://www.arcorel.com/codingforums/pintura.html _ and you will see ok.
Now click in INICIO (index) itīs ok too,
Then click again in PINTURA, and the upper text is gone.

Weird!

backfolder.-

koyama
06-09-2007, 05:02 PM
Now I want to add a background image for each section, and position in the bottom (over the foot), so... Wich is the better way of call each image?

Supose three cases (what we have by now):

Section INICIO: generic image.
Section PINTURA: brushes image.
Section CONTACTO: envelope image.

How can I call each one? using a generic name and position for the background image in corresponding directory? Or better doing a non generic ID and use independent ones for each HTML document?
For your body element you could assign id="inicio", id="pinture", id="contacto" for those three pages, respectively.

Then for you background image:


#inicio #footer { background-image: url('inicio.png'); }
#pintura #footer { background-image: url('pintura.png'); }
#contacto #footer { background-image: url('contacto.png'); }

That way, you would still need only one style sheet for your whole site.

Yes, is a bug:

Description:
First click here _ http://www.arcorel.com/codingforums/pintura.html _ and you will see ok.
Now click in INICIO (index) itīs ok too,
Then click again in PINTURA, and the upper text is gone.
Hmm.. which browser is this happening in? I tried IE6 and FF2, but I don't see the problem.

Is this happening only on one machine?

backfolder
06-11-2007, 12:15 PM
Thanks koyama for the background tip!!! Iīm gonna apply right now.

Well, as you said in FF2 this not happen (tested in the same machine) but in my IE (6.0.2900.2180, same machine) and Maxthon 1.5.9 (build 30) this happend. I will stay with the things as they are by now...

Thanks so much again!!!

backfolder.-

backfolder
06-12-2007, 12:39 PM
[QUOTE=koyama;574914]For your body element you could assign id="inicio", id="pinture", id="contacto" for those three pages, respectively.

Then for you background image:


#inicio #footer { background-image: url('inicio.png'); }
#pintura #footer { background-image: url('pintura.png'); }
#contacto #footer { background-image: url('contacto.png'); }
[QUOTE]

This didnīt work. It smash the actual footer line... so maybe adding in id="contents"? Check if you want the actual CONTACTO section to see the effect desired... =).

Thanks in advance!

backfolder.-

koyama
06-12-2007, 09:31 PM
This didnīt work. It smash the actual footer line... so maybe adding in id="contents"? Check if you want the actual CONTACTO section to see the effect desired... =).
Looks like you are right. You can use the method, but with #contents instead of #footer.

On that “Contacto” page, why are you using absolute positioning, and why an explicit height? Probably this is not a good idea. If you try to zoom the text in Firefox you will see that the text in the #contents_contact starts to overlap the footer.

backfolder
06-13-2007, 12:53 AM
On that “Contacto” page, why are you using absolute positioning, and why an explicit height?
Just because it is the only way to get the "content" filled with background color. If I remove that two things, it will display a dark blue beneath "email link" and Google Ads... :confused:
I thought making a basic content structure in CSS would be easier, but this is becoming to be a nightmare...!
Gonna try the " #contents instead of #footer ", but in INICIO didnīt work!
Still breathinī!!!

Thanks again...

backfolder.-

koyama
06-13-2007, 01:08 AM
Just because it is the only way to get the "content" filled with background color. If I remove that two things, it will display a dark blue beneath "email link" and Google Ads... :confused:
We'll need to see the issue. I'm sure there is a better fix. Absolute positioning is not the way to go. Try to remove those things and post a new link to the page that is not working.

Gonna try the " #contents instead of #footer ", but in INICIO didnīt work!
Hmm... Sounds strange. Try to do it the “correct” way and post a link to the page that is not working. I can't see why it shouldn't be working?

backfolder
06-13-2007, 11:30 AM
Hi koyama,

Iīm just remove the position and height attributes, check it:
http://www.arcorel.com/codingforums_contacto/contacto.html

You can compare with the actual one here:
http://www.arcorel.com/codingforums/contacto.html

I donīt know another workaround to match map <div> with google <div>.
Hope this helps...

Thanks again for your support!

backfolder.-

koyama
06-13-2007, 04:40 PM
Iīm just remove the position and height attributes, check it:
http://www.arcorel.com/codingforums_contacto/contacto.html

You can compare with the actual one here:
http://www.arcorel.com/codingforums/contacto.html

The purple color down at the bottom is coming from the background-color of #main. It seems that you are using a background-color to get the effect of a top border on #main. But why not just use a top border?

Instead of this:


#main {
_zoom: 1; /* trigger hasLayout in IE6 */
border: 0px solid #666;
clear: both;
background: #511D48;
padding-top: 2em;
font-family: "MS Sans Serif", Geneva, sans-serif;
color: #FFF;
padding-bottom: 45px;
overflow: hidden;
}
Try this:


#main {
_zoom: 1; /* trigger hasLayout in IE6 */
clear: both;
color: black;
background: white;
border-top: 2em solid #511D48;
font-family: "MS Sans Serif", Geneva, sans-serif;
padding-bottom: 45px;
overflow: hidden;
}

backfolder
06-13-2007, 06:29 PM
Well, Iīve tried the things youīve said and no luck...
Check the first link with the issue and with those changes...

- #main, recoded.
- position and height removed.

Thanks!!

backfolder.-

koyama
06-13-2007, 10:06 PM
Well, Iīve tried the things youīve said and no luck...
Check the first link with the issue and with those changes...

Well, it looks almost right. Try to remove the red part on that page and update the link.


<div id="contents_contact">
[...]
</div><br />
<div id="footer">
[...]
</div>

Really you shouldn't be using the br element to insert spaces around elements. Margins and paddings are better suited for that purpose.

backfolder
06-14-2007, 01:34 AM
Hi!
Updated, the <br> was one problem that I donīt know how I didnīt see before. The two bigs divīs, map and google respectively, is still a problem...
Iīve just changed width in two divīs and nothing...

Thanks...

backfolder.-

koyama
06-14-2007, 02:30 AM
Instead of this:


#contents_contact {
width:500px;
padding: 1.5em;
background-color: #EDE4F1;
min-height: 600px;
background-image: url(images/bg_contacto.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}
#google_sky{
float:right;
width:110px;
padding:12px;
margin:auto;
height: 605px;
bottom:0;
left:0;
clear:both;
background-color:#EDE4F1;
}

Try this:


#contents_contact {
float: left;
width: 580px;
padding: 15px;
background-color: #EDE4F1;
min-height: 600px;
background-image: url(images/bg_contacto.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}
#google_sky{
float: left;
width: 120px;
height: 600px;
background-color:#EDE4F1;
padding: 15px;
}

While changing the order in source from this


<div id="google_sky">[...]</div>
<div id="contents_contact">[...]</div>

to this:


<div id="contents_contact">[...]</div>
<div id="google_sky">[...]</div>

backfolder
06-14-2007, 10:09 AM
Yes, thatīs the right way, but still having the over foot blank rectangle...
Iīve just changed, so you can check...

Thanks!

backfolder.-

koyama
06-15-2007, 03:15 AM
Yes, thatīs the right way, but still having the over foot blank rectangle...
I see... This is happening in IE6 because min-height is not supported. You will need this:


#contents_contact {
float: left;
width: 580px;
padding: 15px;
background-color: #EDE4F1;
min-height: 600px;
_height: 600px; /* emulate min-height in IE6*/
background-image: url(images/bg_contacto.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum