SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text overflowing

    I can't figure out why the text on this page keeps going down the page.

    I tried adjusting the height to 100%, but that doesn't work. The only way I can get the height to be right is to use a set pixel height, but I need the container to adjust to the height of the content. What am I doing wrong?

    thx

    http://www.newportsportsclub.com/gro...ess-classes-3/

  2. #2
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I adjusted the height to 1200px because the site is live, but with the 100% height setting it doesn't work.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    For starters , try this:

    Code:
    #Content_Container {
    width: 1024px;
    height: 1800px; /* REMOVE */
    background-color: #FFF;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 25px;
    overflow: hidden;  /* ADD */
    }

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx that worked. I don't fully understand it though...I guess since the height isn't defined that it just takes up the space that the content fills? And the overflow hidden hides extra white space? That part doesn't make sense to me, but thx.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BrianBam View Post
    And the overflow hidden hides extra white space? That part doesn't make sense to me, but thx.
    No, the problem was that the container wasn't wrapping around the floated elements, which overflow: hidden fixes. Floats hang out of their container by default.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm...weird, but okay. So, why is it that the images on the right side of the home page not all showing? http://www.newportsportsclub.com/

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hey, Brian. Still don't believe in validating your HTML, huh?

    Quote Originally Posted by BrianBam View Post
    Hmm...weird, but okay.
    No, not weird; completely normal; very repeatable/predictable. You can actually look up float behavior and learn about it, if you wish.

    Quote Originally Posted by BrianBam View Post
    So, why is it that the images on the right side of the home page not all showing? http://www.newportsportsclub.com/
    Pictures are cut off at the bottom of their container because Wordpress added a fixed height to the #ClassesList box.
    (I'm sure that's not your code in the local stylesheet.)
    Code:
    #ClassesList {
        clear: both;
        float: left;
        height: 77px;  /* delete me */
        width: 270px;
    }

  8. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still a rookie. You mean validate using this http://validator.w3.org/ ??

    And it worked so thx.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by BrianBam View Post
    I'm still a rookie. You mean validate using this http://validator.w3.org/ ??

    And it worked so thx.
    Yes, the w3 validator is a very useful tool. Sometimes, I find it a bit hard to understand, so I rely on the HTML Validator plug-in for Firefox. It uses exactly the same validation rules, but explains the errors in easier-to-understand language. If you have Firefox on your computer, you might give that plug-in a try. Can't hurt much . It can be found here: https://addons.mozilla.org/en-US/fir...or/?src=search . If you are running FF 23, I recommend that you go to the author's site and download the latest version, 0.9.5.8 .

    We always have to remember that perfectly valid code may not work. Even though all of the tags are correctly formed (and the validator smiles), the logic/layout may still be faulty. The validator is a first line of defense troubleshooting and quality control aid. I use it and it keeps me humble.

    Glad to hear that the fix worked. Thanks for the feedback.


Tags for this Thread

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
  •