Problemas con opacity e IE

_cronos2 · #1 (**permalink**) 03/03/2011, 14:39

Hola gente de FDW! De nuevo problemas con CSS. El primero de los problemas es que tengo un menú, y quiero que la opción que esté seleccionada tenga una clase determinada. El código es este:

Código CSS:

Ver original/* ... */
#menu li { 
 position:relative;
 float:left; 
 margin-left:35px; 
 margin-top:2%;
 font:110% Verdana, Arial, Helvetica, sans-serif;
 opacity:0.6;
 filter:alpha(opacity=60);
}
/* ... */
.selected {
 opacity:0;
 filter:alpha(opacity=100);
}
/* ... */

Código HTML:

Ver original<div id='container'>
 <ul id='menu'>
  <li id='about-tab'>About</li>
  <li id='pf-tab'>Portfolio</li>
  <li id='home-tab' class='selected'>Home</li>
  <li id='contact-tab'>Contact</li>
  <li id='algo-tab'>Algo</li>
 </ul>
 <img src='Collapse.png' class="cerrar" />
</div>

Sin embargo #home-tab sigue teniendo opacity:0.6

¿Por qué, y cómo lo puedo arreglar?
Segundo tema, como siempre IE dando problemas. Con este mismo menú, sólo se muestra la imagen que va dentro del menú:

Código CSS:

Ver original.cerrar, .abrir { 
 position:absolute; 
 width:40px; 
 height:40px; 
 left:51%; 
 top:100%; 
 z-index:2;
}
.cerrar:hover, .abrir:hover {
 cursor:pointer;
}

Sin embargo, al ponerle position:absolute y como el resto del div no sale, no tiene position:fixed, y sale en esa parte de la página. ¿Por qué no se ve el menú entero en IE?
Muchas gracias desde ya.
Saludos :D

sanxuan · #2 (**permalink**) 03/03/2011, 15:58

La primera pregunta se resuelve muy facil, usa el selector #menu li.selected en lugar de .selected.
La segunda no la puedo contestar sin ver el resto del código.
Si tienes la página subida a la red, sería fabuloso contar con un enlace.
Por cierto, para .selected declaras opacidad 0 y para IE 100. Invisible en general y visible para IE. Supongo que la idea era:
.selected { opacity:1; filter:alpha(opacity=100);

_cronos2 · #3 (**permalink**) 03/03/2011, 16:13

Aquí el link. Y lo de opacity:0, esque para asegurarme de que no funcionaba con .selected puse opacity:0 para que no se viera, y como hago las pruebas con FF pues no cambié el filter

Gracias y saludos (:

sanxuan · #4 (**permalink**) 03/03/2011, 16:57

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Una etiqueta como la anterior al principio de tu documento HTML es la diferencia que existe entre que se vea o no tu página en IE. Sirve para que el navegador sepa el tipo de documento HTML que estás usando.
Hay varios tipos de cabeceras diferentes como la anterior. Creo que esa te pueda servir.
No le des a container una altura en porcentaje. Termina sin verse el menú si redimensionas la ventana del navegador.

_cronos2 · #5 (**permalink**) 03/03/2011, 17:19

Pero si le pongo un DTD se me va a la *%#$ todo el trabajo que había hecho... Míralo en la página, que ya se lo puse.
Saludos :D

sanxuan · #6 (**permalink**) 03/03/2011, 18:17

Pues yo al menos veo ahora el menú, antes no.
Quedan cuatro o cinco cosas por pulir en la página. Es cuestión de experimentar y tener un manual de css a mano.

jomaruro · #7 (**permalink**) 05/03/2011, 03:20

Hola:

Cita:

Iniciado por _cronos2

Pero si le pongo un DTD se me va a la *%#$ todo el trabajo que había hecho...

Acostúmbrate porque el DTD es obligatorio ponerlo si quieres hacer un trabajo decente.

Saludos.

_cronos2 · #8 (**permalink**) 05/03/2011, 16:30

Gracias por el consejo @jomaruro (:
Sigo con problemas, IE de momento no me preocupa porque hay que dedicarle tiempo de más y ahora me estoy concentrando en FF y Chrome. Ya conseguí poner el menú y todo como quería, y ahora puse un botón para ocultar/mostrar el menú, pero resulta que lo que me oculta es el div#container, pero no #menu. Este es el link. Los tamaños los puse en % por eso, pero no funciona

Saludos (:
Edit: Me dí cuenta de que sí oculta #menu, lo que no oculta es #menu li, pero sigo sin entender por qué

_cronos2 · #9 (**permalink**) 08/03/2011, 13:09

¿De verdad nadie me sabe contestar?