Liado con un iframe , un div y un swf en IE

Archivado
Hola! creo que mi pregunta va en este sitio ya que no he encontrado nada sobre diseño...

Bueno, estoy haciendo una prueba con un swf de fondo al 100% de ancho y alto ocupando toda la pantalla de cualquier monitor y quiero agregarle el botón de me gusta de facebook en la esquina superior izquierda, eso lo tengo desde el principio, me aparece donde quiero si entramos en firefox y chrome, pero al entrar en IE el swf se superpone al div donde tengo declarado que se fije en la esquina...

He probado a poner posición absoluta (y relativa, por si acaso...) en el div del iframe de facebook y también posición relativa (y absoluta, también por si acaso) al div del swf, también he probado con los z-index y no consigo hacer que se vea en IE como tiene que salir (en Firefox y Chrome si se ve como quiero...)

Alguna solución?

Dejo el código por si alguien se le ocurre algo...

Css del div del iframe de Facebook que sí se ve bien en Chrome y Firefox
#esquina-fija {
position:absolute; z-index: 2;
top:20px;
left:0;
margin-left:50px;
}


Css del div donde está el swf (lo he cambiado tantas veces que no sé si lo que acabo de poner está bien
#atras {
position:relative; z-index: 1;
}


Id del div del iframe
<div id="esquina-fija">
<iframe src="http://www.facebook.com/plugins/like.php?href=(#, esto lo he cambiado yo para no hacer spam, pero aqui va la url de la web)&amp;layout=box_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:73px; height:62px" bgcolor="transparent";></iframe>
</div>


Id del div del swf
<div id="atras">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="Portfolio" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
         <param name="movie" value="prueba.swf" />
         <param name="quality" value="high" />
         <param name="bgcolor" value="#ffffff" />
         <param name="allowScriptAccess" value="sameDomain" />
         <param name="wmode" value="opaque" />
         <param name="WMODE" value="transparent" />
   </object>
</div>


Y con todo esto no aparece bien en IE... Alguna solución?

Gracias!
Prueba a darle tamaño a los div.
He probado a poner esto en el div del iframe
style="width: 73px; height: 62px;"


Y sigue sin funcionar :( Pero gracias por contestar, eso no se me había ocurrido..
Ese es un problema típico de IE, tienes que ponerle un valor "transparent" al swf. No me acuerdo exactamente como era. Ahora te lo miro.

EDIT: <param name="wmode" value="transparent" /> y/o en Firefox: wmode="transparent"

Me acabo de dar cuenta que lo has probado. Pero has puesto los 2 valores, opaco y transparente:

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

ponlo como yo te he puesto. <param name="wmode" value="transparent" />
Tambien se me ocurre sin posicion relativa y con margin-top. Por probar...
@Dex89 Acabo de probar lo que me dices y sigue sin funcionar...

@Eric Draven He añadido lo que tu me has puesto y sigue sin salir xD

Tanto les cuesta a MS hacer un IE en condiciones?

EDIT: El caso es que a veces el swf no carga y el iframe de facebook si sale... está puesto pero por detrás del swf :(
Es raro xq yo tuve ese problema, y lo solucioné así.


Cambia los valores como widht y height y el nombre del swf.

Debes incluir todo el codigo.

<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
        codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=,0,0,0'
        width="960" height="260">
        <param name='movie' value="nombre.swf">
        <param name='quality' value="high">
    <param name="wmode" value="transparent">

        <param name='bgcolor' value='#DCDCDC'>
        <param name='loop' value="false">
        <EMBED src="nombre.swf" wmode="transparent" quality='high' bgcolor='#DCDCDC' width="960"
        height="260" loop="true" type='application/x-shockwave-flash'
        pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'>
        </EMBED>
        </OBJECT>
Nada.. sigue sin funcionar... Estoy convencido que el problema radica en el css...

Gracias por intentar ayudarme, en serio :)
<param name="bgcolor" value="#ffffff" />

Quitale eso tb, sumado con lo de ponerle fondo transparente te dejara ver lo que hay detras.
Prueba con condicional.

Y que al estar en IE, haga 2 floats.

El Facebook (float:left;) y el swf (float:right).
¿De que version de IE estamos hablando? ¿Falla en todas?
@Eric: Me temo que lo que me pides no se hacerlo... lo he puesto directamente en el css pero creo que no es eso lo que me dices (no funciona xD)
@ionesteraX: He probado eso y tampoco funciona...
@mcklain: Pues tengo el IE8, el que me venía con W7, no lo uso xD
Como desarrollador web, simplemente afirmo: puto Internet Explorer [uzi]

Imagen
Vale, ante la incapacidad de poder realizar esto he decidido hacerlo como siempre he dicho si de buenas no te sale: Hacerlo a lo cutre, ahora lo que voy a hacer el es swf más pequeño desde el html cambiandole los parametros de ancho y alto que estan en porcentaje, cambio el swf pero no el contenido, digamos que se re corta.

Ahora dejo espacio por los lados para poner el iframe de facebook que estaba detras y se ve perfecto, me queda poner la imagen de fondo y que no se me repita el swf :)

Parece que funcionará xD

EDITO: Pues ha funcionado de la manera cutre xD

Gracias a todos por ayudarme, de verdad :)
como desarrollador web, prueba: http://code.google.com/p/swfobject/ ;)
Okk, lo probaré !!

Gracias! :)
15 respuestas
Archivado
Volver a General