SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Strange problem in Chrome (ok in FF)

    My design is ok in FF but in Chrome there is a gap at the bottom of the content panel.

    I have done everything I can think of to fix this but nothing works.

    Any help appreciated?


    http://errors.simplrweb.com/index.html
    http://errors.simplrweb.com/inner.html

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The problem is being caused by display:inline-block; in the clearfix code. So I would just remove the class="clearfix" from the content-middle div and instead add overflow:hidden (a simple alternative) to the styles for that div:


    Code:
    #content-middle {
    	background: url(images/content_middle.png) repeat-y;
    	padding: 0px 0px 20px;
            overflow: hidden;
    }
    EDIT: same with content-blog-middle, of course.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It worked Thanks!
    I did not realize that was possible.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome!

    Quote Originally Posted by drakke View Post
    I did not realize that was possible.
    Do you mean the problem with clearfix, or the use of overflow:hidden? Overflow is a really simple fix for containing floats, and is generally a great option unless you actually want to have some content overflowing the container (like an absolutely positioned element).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I mean clearing floats with overflow: hidden. I just read the article on you site about it and it helped.

    I thought overflow: hidden was to keep contents within a fixed size box.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by drakke View Post
    I thought overflow: hidden was to keep contents within a fixed size box.
    Yes, and basically that is its purpose. But it has this side effect that if the container is to do that, it first has to take a look at its content and make sure it is wrapping around it, which is what's needed to enclose floats.

    One this I perhaps should have mentioned is that there are variations to the clearfix code that help to avoid little bugs like you found. I'm not sure if this would have fixed the Crhome/Safari issue, but it's worth a try:

    Code:
    .clearfix:after {
    	visibility: hidden;
    	display: block;
    	font-size: 0;
    	content: " ";
    	clear: both;
    	height: 0;
    }
    .clearfix {display: inline-block;}
    I find this version of clearfix more reliable.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    From the recent threads, I wonder if we have to emphasise more the difference between containing floats and clearing floats. They often give the same desired result visually but are really different!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    From the recent threads, I wonder if we have to emphasise more the difference between containing floats and clearing floats.
    Unfortunately, these concepts are hopelessly confused right across the web. Certainly a clarification is worth having, though. Maybe in one of the stickies.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •