Problemas con opacidad (raro...)

DoHITB · #1 (**permalink**) 23/01/2013, 05:04

Buenas!

Tengo el siguiente HTML:

Código HTML:

Ver original<div id="G_I_Error"></div>
<div class="main" id="main">
    <div class="content">
        <!--AQUÍ CONTENIDO...-->
    </div>
    
    <div class="footer">
        <span class="footerL"><span>Contact Us</span><span> | </span><span>FAQ</span><span> | </span><span>Web Map</span><span> | </span><span>Privacy</span><span> | </span><span>Legal Adverstiment & ToS</span><span> | </span><span>About Us</span><span> | </span><span>English</span></span>
        <span class="footerC">Copyright 2012</span>
    </div>
    <div id="G_I_Calendar"></div>
</div>

Entonces, al cargar la página compruebo los datos GET, para en caso de haber cierto valor, llamo a la siguiente función JS:

Código Javascript:

Ver originalfunction launchError(c){
  if(c==1){
    document.getElementById('G_I_Error').innerHTML='Texto';
    setOpacity(document.getElementById('main'), 50);
    document.re.d.setAttribute('onclick', 'voidFunction()');
  }
}
 
function setOpacity(e,o){
e.style.opacity=o/100;
e.style.MozOpacy=o/100;
e.style.filter='alpha(opacity='+o+')';
}

El problema que tengo es que en IE8 (cambiando la versión desde IE10) al lanzar la función el contenido se descentra...

Código CSS:

Ver original.main{
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    width:1000px;
}

Esta es la clase "main"...

¿Qué está pasando para que se descentre?

Gracias.

maycolalvarez · #2 (**permalink**) 23/01/2013, 07:58

¿incluiste adecuadamente el DOCTYPE en la página?, para IE es muy importante, así desactivas el modo quirks

DoHITB · #3 (**permalink**) 23/01/2013, 13:22

Tengo esto:

Código HTML:

Ver original<!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" lang="en_US" xml:lang="en_US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

¿Puede ser porque lo tenga en local? Por que (por ejemplo) firefox me da problemas con los CSS porque no los vincula bien (temas con "/" y "\")...

emprear · #4 (**permalink**) 23/01/2013, 15:06

El problema es con la opacidad o con el centrado?
Bueno, de todas maneras a falta de más datos hice esto

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.main{
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    width:1000px;
    background: lime;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
function launchError(c){
  if(c==1){
    document.getElementById('G_I_Error').innerHTML='Texto';
    setOpacity(document.getElementById('main'), 50);
    document.re.d.setAttribute('onclick', 'voidFunction()');
  }
}
 
function setOpacity(e,o){
e.style.opacity=o/100;
e.style.MozOpacy=o/100;
e.style.filter='alpha(opacity='+o+')';
}
 
 
//]]>
</script>
</head>
<body onload="launchError(1);">
<div id="G_I_Error"></div>
<div class="main" id="main">
    <div class="content">
        <!--AQUÍ CONTENIDO...-->
    </div>
    
    <div class="footer">
        <span class="footerL"><span>Contact Us</span><span> | </span><span>FAQ</span><span> | </span><span>Web Map</span><span> | </span><span>Privacy</span><span> | </span><span>Legal Adverstiment & ToS</span><span> | </span><span>About Us</span><span> | </span><span>English</span></span>
        <span class="footerC">Copyright 2012</span>
    </div>
    <div id="G_I_Calendar"></div>
</div>
</body>
</html>

El div main (al que le di un background: lime para diferenciarlo, aparece centrado horizontalmente (margin-left:auto; margin-right:auto;) tanto en IE9 como IE/8/7 (tecla F12).
Lo que no aparece centrado es el contenido del div .main, habría que agregarle text-align: center; ni tampoco la palabra texto generada por la script, que por supuesto está fuera de .main.
En definitiva, no veo el problema
Saludos

DoHITB · #5 (**permalink**) 24/01/2013, 00:10

El problema lo tengo con el centrado.

Mientras no cambio la opacidad (es decir, no llamo a la función JS) el contenido me sale todo centrado.

En cuanto llamo a la función... se me descentra el contenido.

El div de error se que está fuera de "main". Lo hice para que al aplicar la opacidad éste quedara opaco completamente.

Para centrar el Error tengo algo similar a la clase main:

Código XML:

Ver original#G_I_Error{
    top:100px;
    width:900px;
    height:0px;
    position:relative;
    text-align:center;
    z-index:1;
    color:#FFF;
    margin-left:auto;
    margin-right:auto;
}

Pero lo que me pasa es lo que te comento... en los otros navegadores al mostrar el error el contenido queda centrado; con IE8 se descentra (queda para la izquierda, como si fallara el margin)...

Gracias por responder.

emprear · #6 (**permalink**) 24/01/2013, 04:58

Te repito, no importa el caso

<body onload="launchError(1);">
ó
<body onload="launchError(0);">
ó
<body>

El centrado se mantiene
SAludos

DoHITB · #7 (**permalink**) 24/01/2013, 06:49

Vale, acabo de ver dónde fallaba:

Al colocar el texto dentro de G_I_Error, se descuadraba todo por el margin-left y margin-right de G_I_Error.

He quitado esos margin, y ya funciona bien... ahora solo me falta que funcione la opacidad en todas las versiones de IE (no ser porqué no funciona...)

De nuevo gracias por tu tiempo

emprear · #8 (**permalink**) 24/01/2013, 12:27

Cita:

Iniciado por DoHITB

Vale, acabo de ver dónde fallaba:

Al colocar el texto dentro de G_I_Error, se descuadraba todo por el margin-left y margin-right de G_I_Error.

He quitado esos margin, y ya funciona bien... ahora solo me falta que funcione la opacidad en todas las versiones de IE (no ser porqué no funciona...)

De nuevo gracias por tu tiempo

Aqui dejo una guía para conseguir opacidad "crossbrowser", incluyendo IE7/8. IE6 ni idea, ya que no dispongo
http://foros.emprear.com/css/opacity.html
Saludos

DoHITB · #9 (**permalink**) 25/01/2013, 00:45

Hola,

Si, así tengo puesta la opacidad... el problema es que los child no me la heredan...

Primero pensaba que no aplicaba bien la opacidad, pero le puse un fondo de color y si cambia... pero solo el color de fondo!

El resto se mantiene igual... ¿Tú sabes qué podría ser?

Gracias

emprear · #10 (**permalink**) 25/01/2013, 05:36

Cita:

Iniciado por DoHITB

Hola,

Si, así tengo puesta la opacidad... el problema es que los child no me la heredan...

Primero pensaba que no aplicaba bien la opacidad, pero le puse un fondo de color y si cambia... pero solo el color de fondo!

El resto se mantiene igual... ¿Tú sabes qué podría ser?

Gracias

Date cuenta que así no se puede analizar, al igual que con lo del centrado, a partir de tus datos vistos en forma aislada, no se podía reproducir el problema,
tendrías que postear todo el html y css en un solo código para ver el contexto

Saludos