Problema con position absolute en Opera

faiverson · #1 (**permalink**) 22/07/2008, 09:26

Hola gente...

Tengo un problema y por los test es con el position absolute, solo en Opera en el resto se ve bien (FF, IE6 and 7, safari).

Código PHP:

  <div id="playvideo"><img src="images/playvideo_grudge.png" border="0" height="54" width="98" /></div>

EL CSS es el siguiente, bien sencillo:

Código PHP:

  div#playvideo{position:absolute; left:250px; top:160px; z-index:5; }

Si uso en el CSS:

Código PHP:

  background-image:url(../images/playvideo_grudge.png); background-repeat:no-repeat;

soluciono el problema, o si le doy la vuelta y uso position relative en vez de absolute, igual me queda picando porque no anda?

Probe un HTML solo con ese div y le agregue texto con position absolute, y el texto se posiciona y se ve, pero la imagen no, asi que se ve que es cuando se usa una imagen con position absolute en Opera.

Ideas?

Alguien conoce algun hack para Opera?

Mikmoro · #2 (**permalink**) 22/07/2008, 09:31

¿Puedes poner el trozo de código con el que estás probando, incluido su doctype? ¿Y en qué versión de Opera te pasa?

Mikel.

faiverson · #3 (**permalink**) 22/07/2008, 09:51

Ya lo solucione...
La version de Opera es la Versión 9.51

Este particular error se debe a un script que uso para la transparenciade png's en IE6. (Ahora lo ejecuto solo para IE6, con lo que soluciono el problema...)

Agrego los codigos para el que quiera ir mas alla y probar:

A modo simple la pagina seria:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hi world!</title>
<link href="css/grudge.css" rel="stylesheet" type="text/css" />
<script defer type="text/javascript" src="js/png.js"></script><!-- aca ta el problema! -->
</head>
<body>
<div id="playvideo"><img src="http://www.forosdelweb.com/images/playvideo_grudge.png" border="0" height="54" width="98" /></div>
</body>
</html>

El CSS:

Código PHP:

  div#playvideo{position:absolute; left:250px; top:160px; }

Y el .js que trae el problema tiene:

Código PHP:

  function PNG_loader() { 
   for(var i=0; i<document.images.length; i++) { 
      var img = document.images[i]; 
      var imgName = img.src.toUpperCase(); 
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { 
         var imgID = (img.id) ? "id='" + img.id + "' " : ""; 
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""; 
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "; 
         var imgStyle = "display:inline-block;" + img.style.cssText; 
         if (img.align == "left") imgStyle += "float:left;"; 
         if (img.align == "right") imgStyle += "float:right;"; 
         if (img.parentElement.href) imgStyle += "cursor:hand;"; 
         var strNewHTML = "<span " + imgID + imgClass + imgTitle 
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"; 
         img.outerHTML = strNewHTML; 
         i--; 
      } 
   } 
} 
try{
window.attachEvent("onload", PNG_loader); 
}catch(e){}
/*
<!--[if gte IE 5.0]> 

<script type="text/javascript" src="png.js"></script> 

<![endif]--> 
*/

Gracias por responder tan rapido! Saludos!

Mikmoro · #4 (**permalink**) 22/07/2008, 09:59

Ah, pues nada. Me alegro de que hayas solucionado.

Mikel.