IE solo acepta que aplique la primer clase de varias posible para un mismo elemento.

safe · #1 (**permalink**) 06/02/2007, 12:37

Hola,

Tengo un pequeño problemita intentando modificar un elemento (ya "formtateado" segun su ID) segun el class que le aplique.
El tema es asi: tengo un menu que se mantiene practicamente igual a lo largo del sitio.Salvo que segun en la seccion que se encuentre varian la imagen de fondo y el color del border.
Para eso al elemento en cuestion le aplique un id ("mainmenu") y segun en la seccion que este le aplico un class.

Código:

<div id="mainmenu" class="laboratorio">

Y despues en el CSS pongo lo siguiente:

Código:

	#mainmenu { 
	border-top: 7px solid #2b4882;
	border-bottom: 7px solid #2b4882;
	height:173px;
	background: #2b4882 url(img/menu_grupo.jpg) no-repeat;
}
#mainmenu.convencional { border-bottom-color:#4a8359; background-image:url(img/menu_convencional.jpg);}
#mainmenu.laboratorio { border-bottom-color:#999999; background-image:url(img/menu_laboratorio.jpg); }
#mainmenu.ecologica { border-bottom-color:#bad46a; background-image:url(img/menu_grupo.jpg); }
#mainmenu.exportacion { border-bottom-color:#607bb0;  background-image:url(img/menu_grupo.jpg);}

Esto funciona a la perfecion en firefox, opera y IE 7... pero obviamente no funciona en IE6 (y supongo que tampoco en inferiores).
En realidad lo que pasa es que solo me sirve para la primer clase que aparece en el CSS (#mainmenu.convencional en este caso). Pero para las siguientes no toma los estilos aplicados solo a la clase. Y si cambio el orden del CSS y pongo otra clase en primer lugar, solo me toma esa y no la otra que antes si me tomaba.

Lo mas raro es que un poco mas abajo, con el mismo fin de modificar algo del menu segun la seccion en la que este, tengo lo siguiente y funciona perfectamente!!!:

Código:

#mainmenu.convencional div { background-image:url(img/intro_convencional.gif); line-height:16px;}
#mainmenu.laboratorio div { background-image:url(img/intro_laboratorio.gif); }
#mainmenu.ecologica div { background-image:url(img/intro_convencional.gif); }
#mainmenu.exportacion div { background-image:url(img/intro_convencional.gif); }

¿Alguien a atravesado este prblema con exito? Les agradeceria mucho cualquier ayuda que puedan brindarme.

Mikmoro · #2 (**permalink**) 06/02/2007, 16:34

Te aseguro que no lo había visto nunca y no tengo ni santa idea de dónde puede estar el problema.
No obstante, una pregunta: ¿es necesario el identificador de ese div? Lo pregunto porque ya que vas a tener que cambiar la clase dinámicamente, igual te bastaría con que tenga la clase y evitarías ese problema. Si es por recoger el elemento por su id, supongo que también podría hacerse por className. Quizá no sea posible por alguna razón. Ya me dirás.

Mientras tanto, por si acaso, una muestra de un código complatible que funciona bien:

Código:

<!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>Documento sin t&iacute;tulo</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <style>
.convencional, .laboratorio, .ecologica, .exportacion { border-top: 7px solid #2b4882;
border-bottom: 7px solid #2b4882;
height:173px;
background: #2b4882 url(img/menu_grupo.jpg) no-repeat;
}
.convencional { border-bottom-color:#4a8359; background-image:url(img/menu_convencional.jpg);}
.laboratorio { border-bottom-color:#999999; background-image:url(img/menu_laboratorio.jpg); }
.ecologica { border-bottom-color:#bad46a; background-image:url(img/menu_grupo.jpg); }
.exportacion { border-bottom-color:#607bb0; background-image:url(img/menu_grupo.jpg);}
  </style>
</head>
<body>
<div class="exportacion"></div>
</body>
</html>

No sé si será posible el cambio. Ya nos contarás.

Mikel.

safe · #3 (**permalink**) 06/02/2007, 23:02

Hola Mikel,

Yo ya habia pensado lo que me propones, el tema es que en realidad dentro de ese DIV hay muchas cosas. Y si usara solo el nombre de las clases tendria que definir todas esas cosas para cada una de las clases.
Asi Mediante el ID formateo todo lo global y segun la clase cambio algunos detalles.
Lo que no entiendo es por que simplemente toma el primero y no los demas!

Mikmoro · #4 (**permalink**) 07/02/2007, 01:01

De acuerdo.
También puedes hacerlo sin ID, añadiendo dos clases diferentes:

Código:

<!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>Documento sin t&iacute;tulo</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <style>
.comun { border-top: 7px solid #2b4882;
border-bottom: 7px solid #2b4882;
height:173px;
background: #2b4882 url(img/menu_grupo.jpg) no-repeat;
}
.convencional { border-bottom-color:#4a8359; background-image:url(img/menu_convencional.jpg);}
.laboratorio { border-bottom-color:#999999; background-image:url(img/menu_laboratorio.jpg); }
.ecologica { border-bottom-color:#bad46a; background-image:url(img/menu_grupo.jpg); }
.exportacion { border-bottom-color:#607bb0; background-image:url(img/menu_grupo.jpg);}
  </style>
</head>
<body>
<div class="comun laboratorio"></div>
</body>
</html>

Luego esto acepta selectores como .comun a, .comun ul li, o cosas así sin problemas.

Ciertamente, ni idea de cuál es ese bug de explorer.

Mikel.

safe · #5 (**permalink**) 07/02/2007, 11:20

Perfecto mikel! a funcionado de maravillas.
Yo tampoco se cual es este bug, pero tiene tantos que es imposible de conocerlos a todos!.
Muchas gracias