SitePoint Sponsor

User Tag List

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

    Clip the contents of the child to the parent

    On the slider on this site > http://clickbump.com/

    The top left corner has a "callout" div in which the top left corner is extending outside the boundary of the parent element. I want to clip the boundary so that the parent element's rounded corner shows through.

    I've tried adding overflow:hidden to the parent container element, but it does not seem to want to work.

    Any ideas?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I can't see any callout top left, Scott. Could you clarify what you mean?

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph, the callout is the text block inside the slider. On the first slide, it begins with the h2 "ClickBump 6". There is a div container holding that with class="callout". This is the element which appears to be extending outside the border-radius of the dd parent element.

    I've since moved the callout over to the right in order to avoid the glitch with the overflow. I believe it may have something to do with the fact that the element is being rotated with transform.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Hm, FYI, I'm getting a database error when I visit the site now ...

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

    webkit has trouble clipping elements to border-radius even in simple situations where position is concerned.

    In this small demo the blue box extends out of the container in webkit and opera but not in IE9 or Firefox.

    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>
    .test {
    	background:red;
    	width:200px;
    	height:200px;
    	border-radius:50px;
    	overflow:hidden;
    	background-clip:padding-box;
     position:relative;/* remove this and blue inner is clipped */
    }
    .inner { background:blue; }
    </style>
    </head>
    
    <body>
    		<div class="test">
    				<div class="inner">test</div>
    		</div>
    </body>
    </html>
    If you remove the position:relative above then all browsers clip the content inside the border-radius.

    One way around it would be to wrap a parent that has the position:relative applied.

    e.g.

    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>
    .test {
    	background:red;
    	width:200px;
    	height:200px;
    	border-radius:50px;
    	overflow:hidden;
    	background-clip:padding-box;
    }
    .inner { background:blue; }
    .outer { position:relative; }
    </style>
    </head>
    
    <body>
    <div class="outer">
    		<div class="test">
    				<div class="inner">test</div>
    		</div>
    </div>
    </body>
    </html>
    However you would still need to avoid position:relative on any elements that you want to stick out because they won't get clipped inside the border-radius. Add position:relative to .inner and then it pokes out of the div again in webkit.

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good on you Paul. The position:relative trick is well noted and appears to be what I was missing.

    Also, you were spot on with the webkit note (I'm doing dev in chrome with side trips to FF and IE for spot checks). The issue only appears in Webkit as best I can tell (haven't yet tested in Opera)


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
  •