Footer works half way....

[deronsizemore]

Here is the link: www.deronsizemore.com/countryside

In Mozilla I have the footer working the way I want it to, but in IE there is a gap between the bottom of the window and the footer which shouldn't be there. I just want the footer links to sit at the bottom. I've followed the "how to" thread for this problem but with no luck. The only thing that happens when I try to do what is done in the example is that the page is no longer 100% in height anymore...?

Anyone got ideas?

[BonRouge]

http://bonrouge.com/test/countryside.htm

Hey Deron,
You need to put the footer outside the container for the effect to work.
Other things you need to be careful with or I recommend you do... Don't use the same id twice (reason).
Also, you want to make more use of the cascade and less use of classes. If you want all of your paragraphs in the #leftcontent div to have be styled a certain way, you don't need to give every 'p' tag a class - just reference '#leftcontent p' in the stylesheet. It's the same thing with the active/current link - you don't need to give the 'a' tag a class/id when you've already given the li one. You can use the cascade and reference 'li.active a'.
You don't need a containing div for a ul - just use the ul. I think this is a habit people have picked up from Listomatic...
Erm.. what else? Be careful with ul and li margins. I think you had different top padding for the lists for IE and Firefox because of the different margins.... oh, and it's too late now, but I think you would have been better putting the background of the top menu actually in the menu as opposed to on the image.

I hope this helps.

[deronsizemore]

http://bonrouge.com/test/countryside.htm

Hey Deron,
You need to put the footer outside the container for the effect to work.
Other things you need to be careful with or I recommend you do... Don't use the same id twice (reason).
Also, you want to make more use of the cascade and less use of classes. If you want all of your paragraphs in the #leftcontent div to have be styled a certain way, you don't need to give every 'p' tag a class - just reference '#leftcontent p' in the stylesheet. It's the same thing with the active/current link - you don't need to give the 'a' tag a class/id when you've already given the li one. You can use the cascade and reference 'li.active a'.
You don't need a containing div for a ul - just use the ul. I think this is a habit people have picked up from Listomatic...
Erm.. what else? Be careful with ul and li margins. I think you had different top padding for the lists for IE and Firefox because of the different margins.... oh, and it's too late now, but I think you would have been better putting the background of the top menu actually in the menu as opposed to on the image.

I hope this helps.

Yeah it helped a lot! You are very right about listomatic...I basically learned how to do everything with lists there.

Is it bad that I have different padding for the top list for IE and Firefox? That was the only was that I seemed to be able to get it to work in both browsers, but if there is a better way I'm all ears, or was the way you're talking about to have just put the background of the top menu actually in the menu?? If so, that couldn't have been helped on this one, I didn't do the artwork. Just had my supervisor basically give me a jpeg and let me code it.

Thanks, the things you've listed have been very helpful!

[deronsizemore]

Hey, thanks again for fixing the footer! While I was looking through the code you gave me I notice there is some javascript in there that I didn't put there. What does that do?

[BonRouge]

Is it bad that I have different padding for the top list for IE and Firefox? That was the only was that I seemed to be able to get it to work in both browsers, but if there is a better way I'm all ears, or was the way you're talking about to have just put the background of the top menu actually in the menu??

No, I wouldn't say it's a bad thing to have different padding for the two browsers, but I think it should be avoided where possible. As I said above, the reason you needed different padding values was because you hadn't taken into account the differences in margins and/or padding that IE and Firefox give to lists. If you make them the same - as I did at the top of the page and then further on down the page by setting them (so they don't use the browser default values) - there's no need for the hack.

Hey, thanks again for fixing the footer! While I was looking through the code you gave me I notice there is some javascript in there that I didn't put there. What does that do?

Sorry - I don't know what you're looking at, but I didn't add any javascript. I did fix the footer, but it's just CSS. I just checked the source I'm getting in my browser and there's no javascript on it...

[deronsizemore]

As I said above, the reason you needed different padding values was because you hadn't taken into account the differences in margins and/or padding that IE and Firefox give to lists. If you make them the same - as I did at the top of the page and then further on down the page by setting them (so they don't use the browser default values) - there's no need for the hack.

That is part of my problem. I have no idea how lists's margins and padding render differently in different browsers, I realize that they do, but I don't know what the difference is, so I'll take a look at the css file tonight when I'm off work to see what you did exactly.

Thanks again.

[BonRouge]

The only problem is the default margins and padding - once you set them, they should be the same (more or less).

[deronsizemore]

The only problem is the default margins and padding - once you set them, they should be the same (more or less).

Ahh...I see. So basically if I just were to set the margin and padding to 0 in the html, body css style then I'm set and everything is the same (more or less)?

EDIT: Another thing that is screwy is the "current" link style. I've used this method to keep the current page link a different color but for some reason in this site, it doesn't seem to be working, but the same method works on my other sites.

[BonRouge]

You haven't actually given the 'current' link any style rules... Nothing screwy about it.

[deronsizemore]

You haven't actually given the 'current' link any style rules... Nothing screwy about it.

Isn't the current link style listed here with the hover states? This is the code from the site. If not don't tell me...I'll get it! lol It might just take me a couple days!

CSS:

.navlist li a:hover, .navlist li a:visited:hover, .navlist .current a {
  	text-decoration: none;
  	color: #666699;
	font-weight: bold;
	font-size: 12px;
}

HTML:


<ul class="navlist">
			<li class="current"><a href="index.htm">Home</a></li>
			<li><a href="preowned.htm">Pre-Owned Vehicles</a></li>
			<li><a href="newchryslers.htm">New Chryslers</a></li>
			<li><a href="newfords">New Fords</a></li>
			<li><a href="paymentcalc.htm">Payment Calculator</a></li>
			<li><a href="testdrive.htm">Test Drive</a></li>
			<li><a href="quickquote.htm">Quick Quote</a></li>
			</ul>

[BonRouge]

AH! I didn't see that - sorry...
Change it to '.navlist li.current a'. You'll need to change the one in the footer nav too - you've called that one 'active' rather than 'current'.

[deronsizemore]

Ahh yes, that did it. Its weird because the other sites I've done I've used this exact code without the "li" in '.navlist li.current a' and it has still worked. At any rate, it works now.

Thanks