Hola yo tengo un problema similar...
mi problema consiste en que estoy creando una web con un cms joomla de rockettheme, porque me parece un buen producto, pero a mitad del proyecto se le ocurrio a mi cliente un cambio : el cambio consiste en quitar los menús predefinidos por joomla y hacerlos customizados. Entonces se me hizo facil utilizar un plugin muy práctico llamado "hd-customcss06", este plugin ya lo había ocupado para cosas pequeñas y aparte me confié por que tiene la opción de mostrar el código css en todos los navegadores... y el truco lo logra con una posición nueva a través del tag <loadposition>.
pero o sorpresa no reconoce los div en ningun IE, que hago? alguien tiene algun tip que me pueda facilitar mi trabajo? acepto toda clase de sugerencias... :)
el codigo css que utilizo es el siguiente:
#box{
width: 170px !important;
height: 70px !important;
}
.abuelo{
margin: -50px 0px -40px 0px;
_margin: -50px 0px -40px 0px;
#margin: -50px 0px -40px 0px;
align: center;
_align: center;
}
.papa div:hover{
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-webkit-transition: -webkit-box-shadow 0.4s ease-in-out;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-transition: -moz-box-shadow 0.8s ease-in-out;
-webkit-transform: translate(0px,-2px);
-webkit-transition: -webkit-transform 0.50s ease-in-out;
-moz-transform: translate(0px,-2px);
-moz-transition: -moz-transform 0.50s ease-in-out;
}
.square{
width: 66px;
height: 81px;
display: inline-block !important;
/*border: 1px solid white;*/
background: transparent;
}
.rectangule{
width: 66px;
height: 81px;
display: inline-block !important;
/*border: 1px solid white;*/
background-color: #828282;
}
.rectanguloVert{
width: 37px;
height: 81px;
display: inline-block !important;
/*border: 1px solid white;*/
background-color: #828282;
}
y las clases son aplicadas asi:
<p>{loadposition topmenuscss}</p>
<div class="abuelo">
<div class="papa">
<div class="square"><a href="/index.php/secciones/inmuebles"><img src="images/topmenus/inmucdcd.png" alt="inmucdcd" height="81" width="66" /></a>
</div>
<div class="square"><a href="/index.php/secciones/decoracion"><img src="images/topmenus/decouhuh.png" alt="decouhuh" height="81" width="66" /></a>
</div>
</div>
</div>
</div>
Puse pocas para fines ilustrativos mi web es : vendemosyrentamos.com
Gracias y saludos !