jQuery fade out div not displaying border properly when on top of flash object

Question

First time posting... go easy on me :-)

I have a QR Code test landing page for a client:

http://www.woodfold.com/qr

I did not develop the site, but am the one who is now in charge of changes.

For now, the client just wants a simple thank you box to appear and then fade out when the QR Code page is accessed. I wrote a simple div, css and used jQuery for a fade out effect.

The site has a .swf movie/rotater at the top of the screen.

The code works fine as long as the browser is sized larger enough for the QR thank you message to show below the movie.

If the browser/screen is sized small enough to push the message into the movie area FF and Opera do not render the rounded corners correctly. They are rendered correctly when the message appears below the movie.

I'm sure I am missing something stupid simple, but... Anyone have an idea about what is causing this? Here is the relevant code snippets.

    <div id="qrThanks">
        <img src="../i/qrSmall.png" title="Woodfold QR Code" alt="Woodfold QR Code" />
        <p class="qrContent">Thank you for using Woodfold's QR Code!</p>
    </div>
    <div id="contentContainer">
        <div id="flashContainer">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="731" height="312">
                <param name="movie" value="http://woodfold.com/flash/superhomeFlash.swf" />
                <param name="wmode" value="transparent">
                        <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="http://woodfold.com/flash/superhomeFlash.swf" width="731" height="312">
                        <!--<![endif]-->

                            <img src="slide.gif" alt="slide" width="731" height="312" />
                        <!--[if !IE]>-->
                        </object>
                    <!--<![endif]-->
            </object>
        </div> 

js/jQuery

<script type="text/javascript" src="../scriptz/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
     $('div#qrThanks').show();
     window.setTimeout(function() {
     $('div#qrThanks').fadeOut('slow');
     }, 2000);
});
</script>

CSS

#qrThanks {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -100px 0 0 -250px;
text-align: center;
z-index: 1000;
width: 500px;
height: 100px;
background-color: #FFF;
box-shadow: 5px 5px 3px #000;
border: 10px solid #ccc;
border-radius: 10px;
}
#qrThanks img {
margin: 20px 10px 20px 20px;
padding: 0px;
width: 60px;
float: left;
box-shadow: 5px 5px 3px #000;
}
.qrContent {
display: block;
margin: auto 0px;
font-size: 20px;
line-height: 100px;
}

Answer 1

interesting problem but it's not your code, it's normal behavior. I created a fiddle and tested various css settings, but couldn't get it to work. In your case, i would consider the workaround solution provided by Nate B. here: https://stackoverflow.com/a/7838520/1807551

quote:

In order to create the look of rounded corners, you would have to make four overlay divs that look like a rounded corner and position them at each corner. Not an elegant solution at all, but it's the only way to create that effect.

Containers with a border-radius don't consistently crop content contained within them, Flash content in particular. If you were to create one single div overlay, I imagine it would make it impossible to click any controls in the video, so that is why I think four absolutely-positioned corner divs are the only way to do it.