Border-radius is not clipping contained content

Hi All,
I'm having a problem where I've got an element styled with a border-radius and the nested content is 'popping out' through the round border.  I've dug around the web a bit and a common solution is to place an 'overflow:hidden' tag on the containing element. That seems to work well in FF, but I can't get it to work in Safari.
Here's a sample of what I'm doing:  http://www.c2-it.com/clients/test/test.html
You can see I've also tried adding position information to both the parent and child elements based on some other suggestions I've seen, but neither has helped.  Since it seems to work in FF I'm assuming that I've just overlooked something simple.  Can anyone point me in the right direction?
Thank You,
CJ

Hi Al,
I kind of figured that I could add the border-radius to the child element.  The problem there is that when you have rounded borders within rounded borders it doesn't look exactly even because of the way the border is applied.  Its more evident on larger areas, so it shouldn't really be visible in my situation.  But I was hoping there was some easy fix for the webkit based browsers.  FWIW, I believe I saw something that says the border-radius for the parent item should be 3x the difference in border-width of the parent item compared to the child item. I'll see if I can find that info again and repost.
As for using the moz and webkit prefixes, can you point to any reference material that shows which versions of those browsers still need the prefix? I'd definately like to jettison them if its only a real small percentage of the public still using those versions.
Thanks,
CJ
Al Sparber wrote:
This is a known Webkit issue. The solution is to assign border-radius to the top corners of the child element:
.sidebar1 h1 {
  border-radius: 10px 10px 0px 0px;
By the way, unless you really have a need to support old versions of Firefox and Webkit, you only need to use the standard syntax of border-radius. The prefixed moz and webkit properties have not been necessary for quite some time.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Similar Messages

  • Border-radius property not being recognized in CS5

    I have just started using dreamweaver, and the border-radius css property is not working for me. It doesn't show up in the list, and it says that it is an "invalid" property when I type it in manually. Any help? Note: I'm using CS5, not CS5.5 as far as I can tell.
    Thanks in advance!

    Design View won't show the radius (or just about any CSS3), in fact, 3 versions later it still doesn't show up in DWCC. Live View  won't either since the webkit engine in DWCS5 is pretty ancient.
    Always use Preview in Browser to preview in the actual browsers you intend to support, that way you know exactly what's going on with your pages. This will also help you find the browsers that still require prefixes on certain CSS3 attributes.

  • Border-radius is not working in FireFox 4.06

    I am a web developer working in HTML 4/HTML 5 and CSS 2.1 and CSS 3. If I use the following piece of code so that Firefox gives rounded corners to images and boxes, I get a validation error from W3C. The piece of code is as follows "-moz-border-radius:", but if on the other hand I change the code to "border-radius:" I get beautiful rounded corners in Opera, Safari and Internet Explorer 9 "beta" with no markup validation problems with W3C. Is there a way to rectify this problem in Firefox before the full software is made available across the globe?

    This got fixed in Firefox 4.0 beta 7 (Gecko 2).
    The vender prefix can be dropped now!

  • Border-Radius Not Working in IE11 - any SharePoint Constraints?

    Hi all,
    I can't get Border-Radius to render rounded corners on my Divs. Is this an IE 11 or SharePoint constraint I am facing? I am not in compatibility mode.
    Thanks,
    Kelly
    Personal Blog: http://thebitsthatbyte.com

    Kelly,
    Try opening up Dev Tools (F12) and setting the browser mode to edge. Does this have any effect on the rendering of your CSS? If it does - you have an X-UA-Compatible tag in your master page and the value is set to IE8.
    It's not recommended you remove this because it breaks some functionality on the authoring side. What you could do is replace that line with this:
    <Sharepoint:SPSecurityTrimmedControl
    runat="server"
    Permissions="AddAndCustomizePages"><meta
    http-equiv="X-UA-Compatible"
    content="IE=8"/></SharePoint:SPSecurityTrimmedControl>
    And it will show at the appropriate times I believe. You can read more about the control here:
    http://www.markadrake.com/blog/2013/11/21/public-sharepoint-sites-and-ie8-compatibility/
    If this doesn't work please let me know.

  • I can't print Multiple pages in FF6 – clipping off content after page 1. I have thrown out firefox completely off my imac and re-installed... still does not print correctly. How do I fix this?

    After upgrading last week, i can no longer print multiple page print outs off of any website, without the secondary pages clipping off content. Page 1 prints fine... the remaining pages do not.
    pages print fine in both safari and chrome...

    If you are wondering why you are not getting any responses, it is because you have vented a complaint without any details that make any sense or give anyone something to work on.
    If you want help, I suggest actually detailing what has happened, with versions of software etc. Anything that would let us assist.
    As a start I am guessing that you have not really got the hang of "How it all works". Firstly download the Pages09_UserGuide.pdf from under the Help menu. Read that and view the Video Tutorials in the same place. A good addition would be the iWork 09 Missing manual book and something to help you learn how to use your Mac.
    If there are specific tasks you need help with:
    http://www.freeforum101.com/iworktipsntrick/index.php?mforum=iworktipsntrick
    Is a good resource.
    Peter

  • (bug?)Movie clip contains an object with a z value will not edit the object in place, it goes into a seperate window.

    When a movie clip contains an object with a z value, I can not edit the object in place, it goes into a seperate window.
    This changes the vanishing point relative to the movieclip instead of the stage (allong with everything else).
    This makes it very hard to keep track of where the movieclips will end up when actualy playing the animation.

    I should have explained my situation a little better. I have a machine that's made up of a number of parts, some of them are fairly large and some are quite small. When a user clicks on a part, I want to center that part on the screen and then move whole machine toward the screen until the selected part either fills the screen (for the larger parts) or the part bumps up against the front clip plane (for the smaller parts).
    I didn't think of checking for a collision with the ViewPlatform's TG, thanks for mentioning that. I wasn't sure how the ViewPlatform's location relates to the clipping plane, but I'll dig into it. I'm still learning how the ViewingPlatform, the image plate, and the clipping planes all relate to each other.

  • I have a new computer now with windows 8. Old one was windows 7. The itunes library contains all I expect on new computer. Ipod will not sync with content. It says it is syncing but only picks up 1 tune. Solution please. I am on itunes 64 but it makes no

    I have a new computer now with windows 8. Old one was windows 7. The itunes library contains all I expect on new computer. Ipod will not sync with content. It says it is syncing but only picks up 1 tune. Solution please. I am on itunes 64 but it makes no difference from 32 bit.

    See this older post from another forum member Zevoneer covering the different methods and software available to assist you with the task of copying content from your iPod back to your PC and into iTunes.
    https://discussions.apple.com/thread/2452022?start=0&tstart=0
    B-rock

  • Border radius not working in my web using firefox 18.0.2 using -moz or without

    I'm using the code below for the menu of my web and it works perfect in Safari 5 and in my html editor Coda but the rounded corners are missing in Firefox 18.0.2 on my iMac, did tried several changes without success ¿can you help me please? The code:
    <pre><nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Apple Menu In CSS3 Only</title>
    <style type="text/css">
    body {
    background: #ddd;
    margin: 30px;
    #menu {
    float: left;
    padding: 0;
    margin: 0;
    /* Box Shadow */
    box-shadow: 0 1px 0 #000;
    -moz-box-shadow: 0 1px 0 #000;
    -webkit-box-shadow: 0 1px 0 #000;
    /* Rounded Corners */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    #menu ul {
    border-top: #f3f3f3 1px solid;
    padding: 0;
    margin: 0;
    float: left;
    /* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
    #menu li {
    float: left;
    list-style: none;
    background: none;
    margin-right: 1px;
    #menu a { outline: none; }
    #menu li a:link, #menu li a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: block;
    color: #262626;
    padding: 12px 28px;
    text-decoration: none;
    text-transform: capitalize;
    /* CSS3 Text Shadow */
    text-shadow: 0px 1px 1px #fff;
    /* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
    #menu li a:hover {
    cursor: pointer;
    color: #fff;
    text-shadow: 0px -1px 1px #000;
    /* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
    #menu li:first-child a, #menu ul {
    /* Rounded Corners */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    #menu li:last-child a, #menu ul {
    /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    a.active:link, a.active:active, a.active:visited {
    color: #fff !important;
    text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
    /* Box Shadow */
    box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a class="active" href="index.html">home</a></li>
    <li><a href="menu.html">menu</a></li>
    <li><a href="project.html">projects</a></li>
    <li><a href="affiliates.html">affiliates</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    </div>
    </body>
    </html></nowiki></pre>

    The code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Apple Menu In CSS3 Only</title>
    <style type="text/css">
    body {
    background: #ddd;
    margin: 30px;
    #menu {
    float: left;
    padding: 0;
    margin: 0;
    /* Box Shadow */
    box-shadow: 0 1px 0 #000;
    -moz-box-shadow: 0 1px 0 #000;
    -webkit-box-shadow: 0 1px 0 #000;
    /* Rounded Corners */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    #menu ul {
    border-top: #f3f3f3 1px solid;
    padding: 0;
    margin: 0;
    float: left;
    /* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
    #menu li {
    float: left;
    list-style: none;
    background: none;
    margin-right: 1px;
    #menu a { outline: none; }
    #menu li a:link, #menu li a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: block;
    color: #262626;
    padding: 12px 28px;
    text-decoration: none;
    text-transform: capitalize;
    /* CSS3 Text Shadow */
    text-shadow: 0px 1px 1px #fff;
    /* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
    #menu li a:hover {
    cursor: pointer;
    color: #fff;
    text-shadow: 0px -1px 1px #000;
    /* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
    #menu li:first-child a, #menu ul {
    /* Rounded Corners */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    #menu li:last-child a, #menu ul {
    /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    a.active:link, a.active:active, a.active:visited {
    color: #fff !important;
    text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
    /* Box Shadow */
    box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    </style>
    </head>
    <body>
    <div id="menu">
    <ul>
    <li><a class="active" href="index.html">home</a></li>
    <li><a href="menu.html">menu</a></li>
    <li><a href="project.html">projects</a></li>
    <li><a href="affiliates.html">affiliates</a></li>
    <li><a href="contact.html">contact</a></li>
    </ul>
    </div>
    </body>
    </html>

  • Error:This page contains content of "application/x-java-applet" type. You do not have the plug-in required to view this content.

    Hi....i m using Mac OS x 10.5.8 with safari Version 5.0.2 (5533.18.5). I just updated the Java version to Java 6 and now m getting below error:
    This page contains content of “application/x-java-applet” type. You do not have the plug-in required to view this content.
    Please help me out on this....

    I am also having a problem with this. My website is hosted through "www.onlinepictureproof.com" and now that my laptop is back from repair with OS X 10.6.8 I am unable to upload my photos to my work website. It says "a plug-in is needed to display this content. Install plug-in" and then a window pops up that says "no suitable plug-ins were found".  Below that is "unknown plug-in (application/x-java-applet)" with a link to "manual install" which takes me to "http://www.oracle.com/technetwork/java/index-jsp-141438.html#download" which just leaves me lost. I've tried downloading the "JRE" but I have zero idea what that means or if Im downloading the proper thing. Once I click on the "download JRE" it brings me to a download page where there are WAY too many items for me to choose from to download, when I have no idea what I need or why I need it. please help, this is driving me insane. I actually preferred my constantly crashing laptop to the state its in now, "like brand new" back from apple repair...I have already updated everything that is promted through "Software Updates".
    "OnlinePictureProof.com" only directs me to apple support.
    Thank you for any help you can offer!
    Sheila

  • Skinning- Border Radius not working in IE8 / IE7

    Hi,
    Jdev Version: 11.1.1.5.
    I have styled my command button with the border-radius. The curved edges are not showing up in Internet Explorer 7 / 8.
    IE9, firefox and chrome rendering them properly.
    my CSS code..
    af|commandButton.testButton
        background-color: Black;
        color: White;   
        width: 85px;
        height: 30px;
        font-family: Calibri;
        font-size: larger;
        border-radius: 10px;
        behavior: url(PIE.htc);   
    I got line num# 10 from http://css3pie.com/about/
    But no luck. Can anyone help me ??
    Thanks,
    Saif.

    Question: have you installed PIE on the IE?
    Or have you just copied the line 10?
    You have to install the PIE extension and hope that it work, see Getting Started &amp;#8211; CSS3 PIE: CSS3 decorations for IE
    Timo.

  • When I try to sync a new audiobook from Audible on my iPod, I get the message that's not possible because the iPod "may only contain content from two Audible accounts." I

    When I try to put an audiobook on my iPod, I get message the "iPod may only contain content fro two Audible accounts." I had an old Audible account, which I used to download books. I cancelled that and recently opened a new Audible account and downloaded the book that will not transfer to the iPod. I also have an iTouch which I bought second-hand, and the previous owner may have had an Audible account.

    See this post.
    tt2

  • Sharepoint error - Search Issue - The content type text/html; charset=utf-8 of the response message does not match the content type of the binding (application/soap+msbin1).

    i see this error everywhere - In ULS logs, on site. On the site > Site settings > search keywords; I see this - 
    The content type text/html; charset=utf-8 of the response message does not match the content type of the binding (application/soap+msbin1). If using a custom encoder, be sure that the IsContentTypeSupported method is implemented properly. The first 1024 bytes of the response were: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IIS 7.0 Detailed Error - 500.19 - Internal Server Error</title> <style type="text/css"> <!-- body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-serif;background:#CBE1EF;} code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} .config_source code{font-size:.8em;color:#000000;} pre{margin:0;font-size:1.4em;word-wrap:break-word;} ul,ol{margin:10px 0 10px 40px;} ul.first,ol.first{margin-top:5px;} fieldset{padding:0 15px 10px 15px;} .summary-container fieldset{padding-bottom:5px;margin-top:4px;} legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} legend{color:#333333;padding:4px 15px 4px 10px;margin:4px 0 8px -12px;_margin-top:0px; border-top:1px solid #EDEDED;border-left:1px solid #EDEDED;border-right:1px solid #969696; border-bottom:1px solid #969696;background:#E7ECF0;font-weight:bold;'.
    I am facing issues in searching, my managed metadata service is not running, search results page throws internal error. Any Idea why this above error comes.
    P.S: We use windows authentication in our environment.

    Hi IMSunny,
    It seems you have solved this issue based on your another post.
    http://social.technet.microsoft.com/Forums/en-US/aa468ab0-1242-4ba8-97ea-1a3eb0c525c0/search-results-page-throws-internal-server-error?forum=sharepointgeneralprevious
    Thanks
    Daniel Yang
    TechNet Community Support

  • Border Radius Problem

    I'm having trouble getting a border radius to work as I want. Please keep in mind my pages are works in progress. The corner radii of the footer div do not fill correctly when I apply a 1px border around the container div. There's a tiny bit of page background color that bleeds through at the lower rounded corners. Look here:
    http://www.kiefferfurniture.com/testcss.html
    If I remove the border from the container div and add it to the footer div, then it does render correctly. Look here:
    http://www.kiefferfurniture.com/testcss2.html
    Applying the border to both causes the border to appear as 2px wide where the divs overlap, and that is no good. How do I get a 1px border around everything so it looks and renders correctly?

    I'm not seeing a problem in FF12.  But older browsers need proprietary code. Note the syntax difference for  Mozilla (whacky).
    Also, older IE doesn't support border-radius.
    #footer  {
    background-color: #66A7C5;
    margin-top: 0px;
    border: 5px solid #284B4D; /**increased border width**/
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com/

  • I want to do a border-radius with box shadow and it doesn't work, why?

    This should be simple but it's not working and I don't know why. I think the problem is in the html.
    I simply want to have a div with an image inside that is circular and has an inset shadow and is centered on the page.
    /*here is my css*/
    #div3 {
    -webkit-margin:25px auto;
    -webkit-border-radius:50%;
    .box-shad{
    -webkit-box-shadow: 15px 15px 15px #8 inset;
    <!-- here is my html -->
    <body>
      <div class="gridContainer clearfix">
      <div id="div3" class="fluid"><div class="box-shad"><a href="index.html"><img src="images/Big-tree-trans1.png" width="900" height="700" alt=""/></a></div>
      </div>
    </body>
    Here is my website: www.adjacentdimensionsmedia.com

    I want a different drop shadowed image on each page. Is there a way to do that?
    Sure.  Copy & paste the following code into a new, blank document.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    <style>
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    img {
        max-width: 100%;
        vertical-align: baseline
    body { background: #069 }
    header, footer {
        clear: both;
        width: 100%;
        padding: 0 2%;
        background: #CCC;
        color: #000;
        min-height: 50px
    article {
        clear: both;
        width: 75%;
        min-height: 600px;
        padding: 0 2%;
        background: #FFF;
        color: #069;
        margin: 0 auto;
    .shadow img { box-shadow: 1px 3px 5px #333 }
    .radius img {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    .border img { border: 20px solid #069 }
    .center {
        text-align: center;
        margin: 0 auto
    </style>
    </head>
    <body>
    <header>Header</header>
    <article> <h1>Main content area</h1>
    <div class="shadow radius border center">
    <!--INSERT YOUR UNIQUE IMAGE BELOW-->
    <img src="http://placehold.it/500x325.jpg"> </div>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <p> </p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </article>
    <footer>Footer</footer>
    </body>
    </html>
    Nancy O.

  • New to Flash - Imported layers contain contents of lower layers?

    Hello.
    I have just started using flash, and know next to nothing about some of its functions, so I apologise if I appear to ask questions with obvious answers.
    Anyway, I am attempting to add animation to a previously created layered image, which I am importing from a .psd. The image is structured so that different layers contain translucent masks for objects below - e.g., an upper layer might contain a purple tint gradient which is overlayed on the layers below. I can open up this image in photoshop and it behaves as you might expect, but I'm having difficulties importing the image into flash. When I do, for some reason, the layer contents are modified so that some layers contain not only the contents previously in the layer, but the contents of everything below it, as if that layer and all layers below have been merged down into that one layer. The lower layers are still present, but any modifications made to them are not visible as they are blocked by lower layers. This does not seem to be true for all layers -  only those that previously contained elements with an alpha value anywhere between 0 and 255 - i.e., the mask layers. This makes it impossible to achieve my goal, as I am attempting to animate the objects beneath the masks.
    I'm not sure entirely why this is happening - it seems to be flash converting my layers in a very unintuitive manner. If anybody can help me figure out how to get around this, I would be very grateful. Possibly I could import each layer one at a time and re-arrange them in flash, but this would be very time consuming, especially considering that I may want to add animation to multiple similar files in the future. As such, if there is a way to get the layers to import correctly as arranged in the .psd, then this would be extremely useful.
    Thanks!
    [moved from AS3 forum - not AS related]

    What are you using to generate the PSD?
    Flash's mask support is a bit tricky. In most versions of flash it works as an on/off switch. If a layer is marked as a mask layer, if there is ANY data (transparent or not, white or black or any color), it considers that you want to show that portion of the layers it masks. If there is no bitmap data of any kind in the area, it will NOT show that.
    Pictures are much easier to explain. This behavior would be much different in Photoshop.
    In Flash, say you start with a giant ugly stock rainbow square as the graphic you wish to mask:
    Note in the timeline above I have a layer above named 'mask' and it's set to actually be a mask layer. In that layer I have this radial black/white gradient:
    If I pasted that into the alpha channel of a layer in Photoshop it would gradient the pictures transparency based on the black/gray/white. In flash, it doesn't care about that. All it cares about is there "is" or "is not" data. Since there's data in a larger region than the image it is masking, it will show the whole rainbow square below it, unlike Photoshop:
    There's the output, mask applied.
    Now if I actually cut a square of "bitmap data" out of the middle of the mask, Flash will dutifully clip that area so you can't see it. No data = can't see. So my new mask:
    Now due to there being "missing data" in that rectangular area it will cut out that portion of the rainbow box:
    Does this clarify a bit about the simplicity of masks?
    To get masks to work a bit more like Photoshop there's a bit of a code workaround we've all used for quite a long time. You can read it in many links of you search for AS3 gradient mask. Take a look at the code samples to see how.

Maybe you are looking for