Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/05/2010, 08:41
bittxo
 
Fecha de Ingreso: marzo-2006
Mensajes: 39
Antigüedad: 18 años, 1 mes
Puntos: 0
CSS de varios elementos en una línea...

Hola amigos. Tengo una duda complicada. Espero poder explicarme bien.

En un proyecto que desarrollo para web, sólo puedo modificar el CSS de la página, es decir no puedo variar el código asp de programación para modificar o añadir nombres de clase a los elementos.

O sea, tengo que modificar el aspecto a través de las hojas de estilo, usando los nombres de clase y elementos que ya figuran en el código fuente.

Bien ahora paso a la duda.

Tengo dos secciones a cambiar el carrito de la compra y el blog, ambos módulos incluidos en esa programación asp. Estos serían los códigos de ambas páginas:

- Carrito:

<div id="maincontainer" class="sccatalog itemlist">
<div class="sectiontbarea">
Título
</div>
</div>

- Blog:

<div id="maincontainer" class="blogarticles itemlist">
<div class="sectiontbarea">
Título
</div>
</div>



Como veis, ambas páginas tienen a los elementos (div, span, etc...) duplicados el nombre. Hay muchos que no os pongo para no hacerlo demasiado largo.

Comparten los nombres de las clases, con lo que todos los cambios que hago, afectan a ambas páginas por igual, aunque quiero que sean diferentes claro.

Pensé en usar el único elemento de clase o id, que varía entre ellos, para que los resultados se mostraran diferentes:

#maincontainer.sccatalog.itemlist .sectiontbarea {
border: 2px solid #F00;
}

#maincontainer.blogarticles.itemlist .sectiontbarea {
border: 4px solid #666;
}




Pues bien, de esta manera aunque ambas zonas tienen grosores diferentes de línea, muestra la misma en ambos, aunque el sccatalog y blogarticles sean de zonas diferentes. El itemlist hace que aparezca en ambos lo mismo...

En que me equivoco en el código CSS para no apuntar correctamente cada línea a una zona distinta?









Edito una aclaración... El código CSS se ve perfectamente en Mozilla, es decir, cada página tiene el grosor de la línea de un tamaño. Es Iexplorer el que no interpreta bien este código, y muestra el mismo para los dos, el del que está más abajo en la hoja de estilo...

Qué código CSS es bueno para que ambos browsers muestren lo mismo? El problema es no poder dar nombres de clases distintos y heredar obligado lo que ya está hecho... Pero entiendo que igual que Mozilla lo entiende, habrá forma de que Explorer lo haga...

Última edición por bittxo; 20/05/2010 a las 11:23