Flash Player z-index and Internet Explorer

Question

Here is a demo. Brown area and right column have to be prior. There is no problem in Firefox and Chrome. However, in IE flash player front all other elements. There is z-index both brown element and flash player and right column. How can i enable this page to seem same in all browsers?

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background:#000000;
    color:#fff;
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.temizle{clear:both;}

/*****************  Player  *********************/
#flashobj {
    position: relative;
    z-index: 1;
}




#banner {
        position: fixed;
        bottom: 0px;
        left: 0px;
        height:100px;
        width:85%;
        background: #88451c;
        z-index: 99;
}






/********************* Tag combination block on right side***********************/
 .FixedHeightContainer
{
  position: fixed;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 15%;
  padding: 3px;
  background-color: #000;
  font-family:"Arial",Georgia,Serif;
  font-size: 1em;
  font-weight: 600;

  z-index: 100;
}

.TContent
{
  color:#c11;
  height:95.8%;
  overflow:auto;
  background-image:url('http://cruisear.com/c/img/bg.png');
  color: #B7B7C7;
}

.checkbox{

}

.cbox:hover{
    background:#FCDC4C;
    color: #000;
}

score 2 · Answer 1 · answered Jun 27 '13 at 23:29

2

Apparently z-index does not play well with flash. Hopefully this helps out. -> http://manisheriar.com/blog/flash_objects_and_z_index

answered Jun 27 '13 at 23:29

jonosma

339
1
4

Do you have any idea that how can i add it to flash object created by javascript, like my site? – mcan Jun 28 '13 at 01:01

score 2 · Answer 2 · edited May 23 '17 at 12:08

2

Have to add the wmode="opaque" (or wmode="transparent") attribute to the flash object itself. Then you can use z-index to set stacking order.

more info: differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage

<object wmode="opaque">

edited May 23 '17 at 12:08

Community

1
1

answered Jun 27 '13 at 23:31

relic

1,662
1
16
24

score 2 · Answer 3 · edited May 23 '17 at 11:58

2

The following worked for me.

<param name="wmode" value="opaque" />

I found this solution at Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie?

edited May 23 '17 at 11:58

Community

1
1

answered Nov 19 '13 at 15:45

user3009500

31
1

This seems to be the correct way, putting new param element inside of object element, rather than just adding attribute wmode="opaque" to the object element – Maksim Luzik May 27 '15 at 12:38

Flash Player z-index and Internet Explorer

3 Answers3