SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer works half way....

    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?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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.

    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!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deronsizemore
    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.

    Quote Originally Posted by 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?
    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...

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    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.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only problem is the default margins and padding - once you set them, they should be the same (more or less).

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    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.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You haven't actually given the 'current' link any style rules... Nothing screwy about it.

  10. #10
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    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!

    Code:
    CSS:
    
    .navlist li a:hover, .navlist li a:visited:hover, .navlist .current a {
      	text-decoration: none;
      	color: #666699;
    	font-weight: bold;
    	font-size: 12px;
    }
    Code:
    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>
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  11. #11
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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'.
    Last edited by BonRouge; May 24, 2005 at 00:55.

  12. #12
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


Bookmarks

Posting Permissions

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