Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de IE solo acepta que aplique la primer clase de varias posible para un mismo elemento. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/02/2007, 12:37
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
IE solo acepta que aplique la primer clase de varias posible para un mismo elemento.

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.
__________________
oohh... quisiera ser godines!!!
  #2 (permalink)  
Antiguo 06/02/2007, 16:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: IE solo acepta que aplique la primer clase de varias posible para un mismo elemen

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.
  #3 (permalink)  
Antiguo 06/02/2007, 23:02
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Re: IE solo acepta que aplique la primer clase de varias posible para un mismo elemen

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!
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 07/02/2007, 01:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: IE solo acepta que aplique la primer clase de varias posible para un mismo elemen

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.
  #5 (permalink)  
Antiguo 07/02/2007, 11:20
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Re: IE solo acepta que aplique la primer clase de varias posible para un mismo elemen

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
__________________
oohh... quisiera ser godines!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:14.