SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Item with overflow:hidden appears as if overflow:visible

    On this page > http://stones-alt.clickbump.com/

    In the footer area menu (just above the "back to top" link), I'm trying to figure out why the first menu item text is wrapping under the image, while the others are not.

    Ideally, I don't want the text to wrap and I'm actually using this CSS to prevent it:

    Code:
    .cb_menu .post-entry{padding:0 0 5px 0;overflow:hidden!important}

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this is a typo in your post or your issue but you are missing a semi colon after overflow:hidden!important

  3. #3
    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 smanaher View Post
    Not sure if this is a typo in your post or your issue but you are missing a semi colon after overflow:hidden!important
    A semicolon after the LAST property is optional.

  4. #4
    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)
    Hi Scott,

    The text in the other boxes would wrap, too, it the titles were longer. Your could put all text in one container so overflow:hidden can be applied to the full column.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Overflow:hidden (and zoom1.0 for ie7 and under) will cause an element to create a rectangular block to the side of a floated element but only when the float would have influence on that element. If you add overflow:hidden to an element that is beyond the floats influence (e.g. underneath it) then the overflow will do nothing as far as moving the element is concerned.

    Both your spans would need to be in the same parent wrapper that is set to overflow:hidden to maintain the rectangular effect.


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
  •