SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS Madness

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Madness

    Hey everyone. I am having a terrible time with CSS at the moment and I can't figure what's going on. I am using wordpress to develop my site, and I am editing the footer part of the modules. Anyway here is the URL:

    Buddy Gregg Motor Homes | Knoxville Tennessee's Premier Motor Home Dealer

    If you will notice down at the bottom, there is whitespace. Why? I have no idea. If you look at the CSS via firebug or viewing source you will notice I have a footer div, left and right parts, and then a class to push the image to the right. I have no idea how this class is expanding beyond its parent div. I'm sure this is some sort of small overlook, but if someone could help me fix this that would be great. Don't mind the messy code please, I'm workin on it lol. Thanks everyone in advance.

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    You applied a background image to the body, and it doesn't stretch or repeat.

    The image would need to be bigger or scaled.

    Some scaling techniques here: Perfect Full Page Background*Image | CSS-Tricks
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean the gradient part? I want the footer to pull down to the bottom over the whitespace, not the part of the body background. It's something in the divs, because if i take away the padding everything looks fine but my image and text are moved up past my repeating footer image (with the slight drop shadow top border). However, when i try to make a new "Manufacturers" image to compensate for the extra pixels, it decides to do the same thing.

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Oh, I think I see what you're getting at.

    Try this technique: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well oddly enough I tried those steps earlier and it didn't work as expected, though it helped me keep my footer down at the bottom (not so much "sticking" with the scrolling of the page). I kind of like it how it is, I just don't understand why that stupid white space is there. Upon inspection its the "floatright" class that's somehow extending down or something. Idk.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I didn't see any whitespace but you have made some mistakes in the sticky footer. See the css faq (in my sig) for a full rundown on how the sticky footer works. (Note that the site Force Flow linked to above is using most of my code but not the latest version.)

    You have dragged the sticky footer up by 100px which means it will overlap content by 100px so you have to soak the space up somehow. Without changing all your code you could do something like this:

    Code:
    #main{padding-bottom:100px}
    #colophon {overflow: hidden;}
    Note that you have given your footer a height of 100px and then in the very next rule you have placed another element that is 100px and has 6px top padding! How can that fit? You must make sure everything fits and the footer needs to be an exact height for the sticky footer technique to work. Remember the height will also include any margins on inner elements also so make sure you set the bottom margins of any p elements or headings to zero in the footer.

    The css faq contains the full details and newest version for all browsers so check there if you need some clarification.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both of you for all your help! I'll get on this first thing back in the office.


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
  •