Hola, llevo varios días retocando una web y ya me he enfrentado con los típicos problemas de incompatibilidad entre IE y el resto.
El problema es que hasta ahora en Safari, FirefoxMAC, y FirefoxWIN lo veía todo perfecto, pero con IE6 y 7 fallaba. Eso lo he podido resolver con el típico truco del "/", pero hoy me enfrento a otro problema que se me empieza a quedar algo grande.
En el .html he creado un script para mostrar y ocultar las capas, de manera que en un .html tenga las cinco secciones que necesito para no añadir más .html:
Cita: <script LANGUAGE="javascript">
function individualess(){
document.getElementById('expo').style.Height = "775px";
document.getElementById('individuales').style.visi bility = "visible";
document.getElementById('anoind').style.lineHeight = "1.5em";
document.getElementById('nombreind').style.lineHei ght = "1.5em";
document.getElementById('colectivas').style.visibi lity = "hidden";
document.getElementById('colectivas').style.lineHe ight = "0em";
document.getElementById('ilustraciones').style.vis ibility = "hidden";
document.getElementById('ilustraciones').style.lin eHeight = "0em";
document.getElementById('colecciones').style.visib ility = "hidden";
document.getElementById('otros').style.visibility = "hidden";
}
function colectivass(){
document.getElementById('expo').style.Height = "2775px";
document.getElementById('individuales').style.visi bility = "hidden";
document.getElementById('colectivas').style.visibi lity = "visible";
document.getElementById('colectivas').style.lineHe ight = "1.5em";
document.getElementById('ilustraciones').style.vis ibility = "hidden";
document.getElementById('ilustraciones').style.lin eHeight = "0em";
document.getElementById('colecciones').style.visib ility = "hidden";
document.getElementById('otros').style.visibility = "hidden";
}
function ilustracioness(){
document.getElementById('expo').style.Height = "1450px";
document.getElementById('individuales').style.visi bility = "hidden";
document.getElementById('colectivas').style.visibi lity = "hidden";
document.getElementById('colectivas').style.lineHe ight = "0em";
document.getElementById('ilustraciones').style.vis ibility = "visible";
document.getElementById('ilustraciones').style.lin eHeight = "1.5em";
document.getElementById('colecciones').style.visib ility = "hidden";
document.getElementById('otros').style.visibility = "hidden";
}
function coleccioness(){
document.getElementById('expo').style.Height = "500px";
document.getElementById('individuales').style.visi bility = "hidden";
document.getElementById('anoind').style.lineHeight = "0em";
document.getElementById('nombreind').style.lineHei ght = "0em";
document.getElementById('colectivas').style.visibi lity = "hidden";
document.getElementById('colectivas').style.lineHe ight = "0em";
document.getElementById('ilustraciones').style.vis ibility = "hidden";
document.getElementById('ilustraciones').style.lin eHeight = "0em";
document.getElementById('colecciones').style.visib ility = "visible";
document.getElementById('otros').style.visibility = "hidden";
}
function otross(){
document.getElementById('expo').style.Height = "500px";
document.getElementById('individuales').style.visi bility = "hidden";
document.getElementById('anoind').style.lineHeight = "0em";
document.getElementById('nombreind').style.lineHei ght = "0em";
document.getElementById('colectivas').style.visibi lity = "hidden";
document.getElementById('colectivas').style.lineHe ight = "0em";
document.getElementById('ilustraciones').style.vis ibility = "hidden";
document.getElementById('ilustraciones').style.lin eHeight = "0em";
document.getElementById('colecciones').style.visib ility = "hidden";
document.getElementById('otros').style.visibility = "visible";
}
</script>
Este es el CSS:
Cita: #expo {
margin-left: 30px;
margin-right: 30px;
height: 775px;
top: 0;
position: relative;
}
#expo h2{
text-transform: uppercase;
margin-bottom: 15px;
margin-top: 50px;
}
h2#contenidos{text-transform: capitalize; height:30px;line-height:30px;background:#000;padding-left:10px;font-weight:bold;color:#fff;text-align:left;}
#individuales{
width: 700px;
height: 700px;
line-height: 1.5em;
}
#anoind {
width: 65px;
margin-left: 20px;
text-align: right;
margin-right: 20px;
float: left;
line-height: 1,5em;
}
#nombreind {
line-height: 1.5em;
text-align: left;
direction: ltr;
}
#colectivas {
visibility: hidden;
text-align: left;
line-height: 0em;
height: 2500px;
position: absolute;
top: -50px;
}
#anocol {
width: 65px;
margin-left: 20px;
text-align: right;
margin-right: 20px;
float: left;
}
#anocol p{
}
#nombrecol {
text-align: left;
direction: ltr;
}
#ilustraciones {
visibility: hidden;
position: absolute;
top: 0;
height: 500px;
line-height: 0em;
}
#ilustraciones h6 {
font-weight: bold;
margin-bottom: 10px;
}
#colecciones {
visibility: hidden;
position: absolute;
top: 0;
line-height:1.5em;
height: 500px;
}
#otros {
visibility: hidden;
top: 0;
position: absolute;
line-height:1.5em;
height: 500px;
}
#otros h6 {
font-weight: bold;
margin-bottom: 10px;
}
Creo que el problema lo tengo en que tanto IE como FF no interpretan bien el JS, ya que este no me modifica el atributo HEIGHT, pero me resulta muy raro ya que como he dicho más arriba en el CSSEdit se ve perfecto; también en Safari.
El enlace es el siguiente:
Un saludo.