SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overflow-X problem :)

    Hey everyone!

    I'm having trouble with overflow-x at the home page of my site http://www.unleashreality.com/

    The set of 3 posts next to each other has a small orange banner with the number of comments and has a negative margin to create a ribbon effect. Then I have an excerpt beneath the image for each which runs beyond the height of each of the 3 post blocks. I want the excerpt to be cut off so that each of the 3 blocks are the same height so i need the vertical overflow to be hidden but the horizontal overflow to be visible for the ribbons to work.

    using overflow-x:visible; overflow-y:hidden; doesn't seem to be working. I have read elsewhere that it may have to do with the doctype.

    Any ideas or tips would be much appreicated

    Thank you and have a great day,
    Alex

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

    The ribbons are cut off because your post block parent is set to overflow:hidden;. It's this element that is cutting the ribbons short.

    Code:
    div.post-block {
        float: left;
        height: 480px;
        margin-right: 15px;
        overflow: hidden;
        padding-bottom: 10px;
        width: 310px;
    }
    It's floated so doesn't need overflow:hidden for float clearing but for some reason you have given it a height and then cut off all the content. Seems a bit weird to me. You seldom want to set heights on elements that hold text.

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey paul, thanks for your reply

    I have the parent set to overflow hidden because I want each of the post blocks (and consequently the row of three) to have the same height. Each has a different title so therefore the height of the excerpt below is unknown a priori. I'm using wordpress and, as far as I can tell, I have to pre-set the number of characters to be displayed for the excerpt. What i've decided to do is to just display more excerpt than would be shown and set the overflow to be hidden so that it gets cut off and fills the space. So that's why i need to hide the overflow on the vertical but i need the horizontal overflow to be visible.

    I've uploaded the stylesheet with overflow-x:visible, overflow-y:hidden and when i inspect in chrome, it says that these attributes are set but the horiozontal overflow is still hidden.

    heeeelp

    really appreciate your input.
    thanks again
    alex

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    What you are doing here is really not practical at all, and will most likely make life a lot harder for visitors—which you can't afford. As Paul says, setting heights on text containers is a disaster, as is horizontal scrolling. It would be better to let each box sit be low the next and find its own natural height—better for the layout and better for visitors, who can then follow the posts down the page instead of scanning over columns and scrolling to see hidden content.

  5. #5
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why is it a disaster? I don't want horizontal scrolling. All I want is for the negative-margin of the ribbon to not be hidden by setting overflow to hidden of the entire element and rather want the horizontal overflow to be visible and the vertical overflow to be hidden.

    Please read the question again and, if you can, address the problem at hand rather than suggesting I 'fix' it by changing my design

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You can't set -y to hidden and -x to visible because if y-is hidden then x is reset to be hidden also.

    According to the specs "some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto".

    You could move your arrow outside of the div if there were no immediate parents that had position:relative set but unfortunately you have quite a few.

    e.g. This allows an element to move outside of an overflow:hidden box:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type"text/css">
    .wrap {
    	padding:40px;
    	position:relative;
    	width:600px;
    	border:1px solid red;
    }
    .test {
    	width:500px;
    	height:500px;
    	overflow:hidden;
    	border:1px solid #000;
    	margin:100px;
    }
    .outside {
    	position:absolute;
    	width:100px;
    	margin:0 0 0 -30px;
    	background:red
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="test">
    				<p>Lorem ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text</p>
    				<p class="outside">Outside</p>
    				<p>Lorem ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text</p>
    		</div>
    </div>
    </body>
    </html>
    Or maybe you could restructure the overflow:hidden container to have say 10px padding each side and then you could drag the arrow into the padding and it would not be hidden.


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
  •