...

View Full Version : Getting a footer where it should be



JohnL
05-20-2007, 11:19 AM
Can someone please assist me as it is driving me mad. I originally coded and checking using IE, first mistake I know. I have since started using both browsers and the validator and that has helped a great deal (I had a HEAP of errors but got them down.)

The problem is that I have a footer but am having trouble it being where I would like it to be. It is FINE in IE but no good in firefox. Currently I have not put the latest files up the net but here is the relevant coding:

CSS:

#body {
margin:10px 10px 0px 10px;
padding:0px;

}


#mainright {
width:20%;
float:left;
background:#ffffff;
padding-left:40px;
padding-top:150px;
padding-bottom:10px;

}

#mainright1 {
width:20%;
float:left;
padding-left:40px;
padding-top:80px;
padding-bottom:10px;

}

#maincenter {
width:55%;
float:left;
background:#ffffff;
padding-top:150px;
padding-left:10px;
padding-bottom:10px;

}

#maincenter1 {
width:70%;
float:left;
background:#ffffff;
padding-top:150px;
padding-left:50px:

}

#mainleft {
width:10px;
float:left;
background:#ffffff;
height:150px;
padding-left:100px;
width:50px;
padding-top:230px;
}

#footer {
width:100%;
height:20px;
text-align:center;
margin-top:5px;
padding:1px;
background:lightblue;
color:red;
border:1px solid red;
}

.points1 {
list-style-image: url('button.gif');
margin-left:60px;

}

ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
text-align:center;
position: absolute;
background:darkblue;
top: 200px;
left: 40px;
width: 150px;
}


ul.navbar li {
background: lightblue;
margin: 3px;
padding: 5px;

}

ul.navbar a {
text-decoration: none }
a:link {
color: black }
a:visited {
color: blue }
}

.table, .table TD, .table TH
{
font-family:Comic Sans MS;
font-size:5pt;
background:#2554C7;

}

h1.pos_abs
{
position:absolute;
left:250px;
top:520px
}

#banner1 {
background: #fff;
position:absolute;
top:0px;
left:50px
}

#banner2 {
background:url(bannerbg.gif) repeat-x;
width:1200px;
position:absolute;
top:0px;
left:-20px
}

p,h1,h4,pre {
margin:0px 10px 10px 50px;




}

#h1 {
font-size:15px;
padding-top:10px;
}



#mainright p { font-size:15px}

#bgboxes {
padding-left:40px
}


Link:

http://www.evolvewebservices.com.au/examples.html

If you look at the link, it does pretty much look as I have it especially with the problem I am having, that is - part of the "footer" is up in the top right hand corner and the rest of it is in the right hand column but it needs to be on the bottom of the page. Check the difference between IE and Firefox and you will see how I would like it to how it is.

Any help is muchly appreciated.

VIPStephan
05-20-2007, 02:28 PM
Yeah, as I suspected while reading the title of your thread you forgot to clear your floats:



#footer {
clear: both;
}


Also for curiosity recently I changed the default background color and font of my browser from white and Times New Roman to some light green and Helvetica Neue to see who didnít specify it in their stylesheet. Itís funny to see the results sometimes. :)

In your case I see that you didnít specify a general background color and not general font either. While the font isnít that important the background color is because this makes your page look really weird with my green default background and your snippets of white background in the content sections.

Excavator
05-20-2007, 03:21 PM
Good morning JohnL,
Couple other problems I see:
you don't have a #body - should be just body in your CSS.
I know #mainleft is wider than 10px. If you size and position #mainleft correctly you will be able to get rid of the absolute positioning on .navbar.
As it is now, #mainleft isn't doing anything.
Try this instead:

#mainleft {
width:150px;
float:left;
background:#ffffff;
margin:230px 0 0 40px;
}

#footer {
width:100%;
height:20px;
text-align:center;
margin-top:5px;
padding:1px;
background:lightblue;
color:red;
border:1px solid red;
clear: both;
}

.points1 {
list-style-image: url('button.gif');
margin-left:60px;

}

ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
text-align:center;
background:darkblue;
width: 150px;
}


Validator finds lots more things you can fix. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.evolvewebservices.com.au%2Fexamples.html)



.

JohnL
05-20-2007, 10:30 PM
Thanks very much for your help.

Excavator, I have cleared most of those little errors up via the validator. I doubt I will get it to zero errrors but I found that by using the validator it clears up a lot of the problems for Firefox. I will be coding for Firefox in the future.

I will give your suggestions a shot when I get home tonight and let you know how it goes.

JohnL
05-21-2007, 11:39 AM
OK, good and bad.

Good in the fact that by adding the "clear:both;" it then places the footer where it should be - at the bottom of the page for Firefox.

Bad because the banner is no longer there but only in IE. Looks OK in Firefox.

Changing the main left values puts the right tables on the left side of the screen in IE but looks OK in Firefox.

If I can just get the banner to be at the top in both browsers, I will be a happy man.....

_Aerospace_Eng_
05-21-2007, 06:41 PM
Can you post a link to your updated coded please or update the original link?

JohnL
05-21-2007, 10:38 PM
Can you post a link to your updated coded please or update the original link?

I did have the code suggested updated (clear:both) but because it takes out the banner, I then removed it as it is a live site and the banner needs to be there. It works fine in Firefox but not in IE.

Any assistance is much appreciated.

koyama
05-22-2007, 04:36 PM
I did have the code suggested updated (clear:both) but because it takes out the banner, I then removed it as it is a live site and the banner needs to be there. It works fine in Firefox but not in IE.
Hmm... I downloaded the page and tried VIP's suggestion. The footer goes in place in Firefox. I don't see the problem with the banner in IE6 after doing this.

Try to make a copy of your page that is not working after the fix applied and upload it with a different filename and post a new link.

JohnL
05-22-2007, 10:55 PM
I may have misled you....sorry. Yes the banner is on top for the page listed but it is NOT on the home page and a few others in IE6.

http://www.evolvewebservices.com.au/index.html - no banner
http://www.evolvewebservices.com.au/hosting.html - no banner
http://www.evolvewebservices.com.au/webbuilding.html - no banner
http://www.evolvewebservices.com.au/services.html - banner is fine
http://www.evolvewebservices.com.au/pricing.html - banner is fine
http://www.evolvewebservices.com.au/examples.html - banner if fine and this was the original link I posted.

Must be something simple with the actual pages themselves. I will look at them later...

Thanks for all the input

koyama
05-22-2007, 11:06 PM
I may have misled you....sorry. Yes the banner is on top for the page listed but it is NOT on the home page and a few others in IE6.
Ah.. I see. That's an IE bug only partially fixed in IE7:

IE/Win: floats and disappearing absolutely positioned boxes (http://www.brunildo.org/test/IE_raf3.html)

To solve your problem, you can wrap your #banner2 in an anonymous div element:


<div>
<div id="banner2">
<img src="index_files/banner007.gif" alt="banner">
</div>
</div>

JohnL
05-22-2007, 11:17 PM
BINGO!!!!!

Thanks very muchly. Can you explain to me why this works? Just updating the other pages as well. Especially since I don't have the extra dvis in pricing.html....

Seems strange to me

AWESOME....

koyama
05-22-2007, 11:25 PM
Can you explain to me why this works?
I'm afraid not. It's just that IE doesn't like adjacent siblings which are absolutely positioned and floated, respectively. If you find an explanation, Bruno Fassino, the author of the link I gave you, would probably like to know.

Anyway, glad you got it fixed.

JohnL
05-22-2007, 11:46 PM
Thanks again Koyoma.

I will look into why the index.html needed the extra div's but why the pricing.html did not. They are pretty much the same as I remember....

I am sure I may not get to the bottom of it, bit I too am happy it is fixed and I am even more ecstatic that forums like this exist and people are willing to assit dummies like me.

I reckon there are 90% dummies and 10% gurus on forums like these. I salute the 10%.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum