Html – overlay parts of div over flash

cssflashhtml

usually it can be solved with the "wmode transparent" param, but in firefox
i have a strange problem. when i overlay a flash element with a part of a div
the div renders strange (like stairs at the border of the flash element)

http://img522.imageshack.us/i/bildschirmfoto20110111u.png/

the grey area (and a small transparent area above) is the flash element. the outline is the
div with a border.

the error occurs only on FF (i have 3.6) chrome/safari works fine…

CODE:

its an swfobject implementation. the overlaying div/ul is positioned after the
flash-wrapper.

        <div id="flash-wrapper">
            <object width="740" height="500" type="application/x-shockwave-flash"
            data="/flash/photobook.swf?1295004511635" id="photobook-wrapper" style="visibility: visible;">
            <param name="wmode" value="transparent">
            <param name="flashvars" value=""></object>
        </div>

        #flash-wrapper {
            height: 500px;
            position: relative;
            width: 740px;
        }


        <ul id="frame_options_select-menu" style="z-index: 0; top: 213px; left: 388px;">
            <li class=""><a href="#" id="ui-selectmenu-item-74">Cover: full size photo</a></li>
        </ul>

        element.style {
            left: 388px;
            top: 213px;
            z-index: 0;
                -moz-border-radius: 6px 6px 6px 6px;
                visibility: visible;
            -moz-border-radius: 0 0 0 0;
            background: none repeat scroll 0 0 #08A0D9;
            border: 1px solid #08A0D9;
            list-style: none outside none;
            margin: 0;
            overflow: auto;
            padding: 0;
            position: absolute;
            top: 0;
            visibility: hidden;
            z-index: 1005 !important;       
        }

Best Answer

ok, that was complicated to debug but i found the answer:

i had following code:

    <div id="page">
      <div id="flash-wrapper">
        flash object
      </div>
    </div>

    #flash-wrapper {
        height: 500px;
        position: relative;
        width: 740px;
    }

    #page {
        width: 700px;
    }

the problem was the page div. if i change the width to 800px it works fine. if the width is under the width of the flash-wrapper i get the stairs effect.

as a result: the parent div's can not be smaller than the object tag. (usually it shouldnt be anyways). "overflow: hidden;" doesn't fix the problem.

Related Topic