Hola a todos.
Les comento mi problema.Pero antes que nada,quiero decirles que para solucionar este problema ya he revisado el soporte css y javascript de internet explorer y no he encontrado las respuestas que necesito.
Resulta que estoy haciendo una página hecha con la menor cantidad de javascript posible ,utilizando css siempre que se pueda,para probar mis habilidades en maquetación y por fin ,empezar a trabajar de esto.
Se supone que la propiedad list-style:none oculta los adornos de las listas ul y ol.
Eso es lo que puse en el código que les voy a mostrar más abajo.Uso javascript solo para mostrar con display="block"; la parte que quiero mostrar.Pero en ie 8 en adelante,no me oculta las viñetas.
Les agradezco la ayuda que me puedan dar.
Página html original:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html name = "inicio" >
<head>
<title>Ventas Reino.</title>
<script type="text/javascript" id="codigo" src="funciones_web_chrome.js" >
</script>
</head>
<body onload="navegador();" >
<br>
<div id="pagina">
<div id="cabecera" >
<ul id="menu" >
<li onmouseover="desplegar('menu_capilares');" onmouseout="enrollar('menu_capilares');"><a href="">Capilares</a></li>
<li onmouseover="desplegar('cuidado_facial');" onmouseout="enrollar('cuidado_facial');"><a href="">Cuidado facial</a></li>
<li onmouseover="desplegar('cuidado_corporal');" onmouseout="enrollar('cuidado_corporal');"><a href="">Cuidado corporal</a></li>
<li><a href="" >Chicos</a></li>
<li onmouseover="desplegar('Belleza_interior');" onmouseout="enrollar('Belleza_interior');" ><a href="">Belleza interior</a></li>
<li onmouseover="desplegar('fragancias');" onmouseout="enrollar('fragancias');" ><a href="">Fragancias</a></li>
<li><a href="" >Aromas</a></li>
<li onmouseover="desplegar('reino_beauty');" onmouseout="enrollar('reino_beauty');" ><a href="">Reino beauty</a></li>
</ul>
<ul id="menu_capilares" onmouseover="desplegar('menu_capilares');" onmouseout="enrollar('menu_capilares');">
<li><a href="Capilares/Almendras/bano_de_crema_con_jojoba_y_almendras_DA101.html" > Línea almendras</a></li>
<li><a href="Capilares/Bamboo/shampoo_bamboo_ultrahidratante_CI102.html" > Línea bamboo</a></li>
<li><a href="Capilares/Hair_solutions/shampoo_de_aminoacidos_HS103.html" > Línea hair solutions</a></li>
<li><a href="Capilares/Henna/shampoo_henna_OC106.html" > Línea henna</a></li>
<li><a href="Capilares/Lino/shampoo_con_extracto_de_semillas_de_lino_LN100.htm l" > Línea lino</a></li>
<li><a href="Capilares/Ortiga/locion_tonica_anticaida_del_cabello_OC102.html" > Línea ortiga</a></li>
</ul>
<ul id="cuidado_facial" onmouseover="desplegar('cuidado_facial')" onmouseout="enrollar('cuidado_facial');">
<li><a href="Lifting_hidratante.html" >Lifting hidratante</a></li>
<li><a href="Antioxidante.html" >Antioxidante</a></li>
<li><a href="Phytoactiva.html" >Phytoactiva</a></li>
<li><a href="Rejuvalene.html" >Rejuvalene</a></li>
<li><a href="Nectar.html" >Nectar</a></li>
<li><a href="Collagenesse.html" >Collagenesse</a></li>
<li><a href="Tratamiento.html" >Tratamiento</a></li>
<li><a href="Dyamante_cell.html" >Dyamante cell</a></li>
<li><a href="Abyssine.html" >Abyssine</a></li>
<li><a href="Hidracalme.html" >Hidracalme</a></li>
<li><a href="Time_release.html" >Time release</a></li>
<li><a href="H20_termal.html" >H20 termal</a></li>
<li><a href="Acai.html" >Açai</a></li>
<li><a href="Spa.html" >Spa</a></li>
</ul>
<ul id="cuidado_corporal" onmouseover="desplegar('cuidado_corporal');" onmouseout="enrollar('cuidado_corporal');" >
<li><a href="Citrus.html" >Citrus</a></li>
<li><a href="Golden_sun.html" >Golden sun</a></li>
<li><a href="Mantecas_corporales.html" >Mantecas corporales</a></li>
<li><a href="Seda.html" >Seda</a></li>
<li><a href="Top_modeling.html" >Top modeling</a></li>
<li><a href="Triple_accion.html" >Triple acción</a></li>
<li><a href="Camila.html" >Camila</a></li>
<li><a href="Propoleos_b.html" >Propóleos b</a></li>
<li><a href="Blueberry.html" >Blueberry</a></li>
<li><a href="Eucalyptus.html" >Eucalyptus</a></li>
<li><a href="Beauty_feet.html" >Beauty feet</a></li>
</ul>
<ul id="reino_beauty" onmouseover="desplegar('reino_beauty');" onmouseout="enrollar('reino_beauty');">
<li><a href="Ojos.html" >Ojos</a></li>
<li><a href="Labios.html" >Labios</a></li>
<li><a href="Rostro.html" >Rostro</a></li>
<li><a href="Manos.html" >Manos</a></li>
</ul>
<ul id="fragancias" onmouseover="desplegar('fragancias');" onmouseout="enrollar('fragancias');">
<li><a href="Femeninas.html" >Femeninas</a></li>
<li><a href="Masculinas.html" >Masculinas</a></li>
</ul>
<ul id="Belleza_interior" onmouseover="desplegar('Belleza_interior');" onmouseout="enrollar('Belleza_interior');" >
<li><a href="Eco_reino.html" >Eco reino</a></li>
<li><a href="Infusiones.html" >Infusiones</a></li>
<li><a href="Propoleos_plus.html" >Propóleos plus</a></li>
<li><a href="Suplementos.html" >Suplementos</a></li>
</ul>
</div>
<div id="productos" >
<div id="imagenes" >
<a href="../../index.html" ><img src="Capilares/Almendras/da101.jpg" alt="Bańo de crema con jojoba y almendras."></a>
<a href="Capilares/Almendras/acondicionador_de_almendras_DA103.html" ><img src="Capilares/Almendras/da103.jpg" alt="Acondicionador de almendras."></a>
</div>
<div id="contenido" >
<p>Capilares > ALMENDRAS</p>
<p>BAÑO DE CREMA CON JOJOBA Y ALMENDRAS</p>
<p>Su fórmula enriquecida con aceite de almendras dulces y aceite de jojoba penetra en la fibra capilar, humectándola. Así, nutre, repara e hidrata profundamente el cabello, especialmente en las zonas castigadas. Devuelve el nivel de hidratación ideal, dejando el cabello suave, brillante y protegido. Apto para todo tipo de cabellos dañados por agresiones ambientales o químicas.</p>
<p>COD: DA101 | 200g</p>
<p>$ 69.9</p>
<a href="" id="comprar" onclick="cargar_chango('Baño de crema con jojoba y almendras.');" >Comprar</a>
</div>
</div>
</div>
</body>
</html>
Adjunto el codigo css que utilicé:
/* Cabecera */
#pagina {
position:relative;
left:10%;
width:960px;
}
#cabecera {
position:absolute;
padding:6px 0px;
width:910px;
z-index:5;
left:-0.4%;
}
#menu {
position:relative;
width:940px;
}
ul li {
list-style-type:none;
background-color:lime;
font-size:1.28em;
padding:7px 9px;
}
ul li a {
text-decoration:none;
}
ul#menu li {
float:left;
}
ul li:hover {
background-color:yellow;
}
#menu_capilares,#cuidado_facial,#cuidado_corporal, #reino_beauty,#fragancias,#Belleza_interior {
position:absolute;
display:none;
top:44px;
z-index:2;
}
#cuidado_facial {
left:10.5%;
}
#cuidado_corporal {
left:25.5%;
}
#Belleza_interior {
width:144px;
left:51.5%;
}
#fragancias {
width:105px;
left:67.3%;
}
#reino_beauty {
width:128px;
left:88.2%;
}
/* Productos */
#productos {
margin:0 auto;
position:relative;
width:900px;
top:6.25em;
}
#imagenes {
margin-left:35%;
border:none; /*ie 8*/
}
img {
border:none; /* Para ie 8 */
}
a:visited {
color:blue;
}
#contenido {
width:900px;
font-size:1.28em;
padding:0px 15px;
}
Acá va el código javascript:
function desplegar(seccion) {
document.getElementById(seccion).style.display="bl ock";
}
function enrollar(seccion) {
document.getElementById(seccion).style.display="no ne";
}
function navegador() {
var nav = navigator.userAgent;
if(nav.indexOf("MSIE 6.0") > 0)
crearlink("estilos_web_ie.css");
else if(nav.indexOf("MSIE 7.0") > 0)
crearlink("estilos_web_ie7.css");
else if(parseInt(nav.substring(nav.indexOf("MSIE") + 5,3)) >= 8 || parseInt(nav.substring(nav.indexOf("MSIE") + 5,3)) <= 10)
crearlink("estilos_web_ie8.css");
else if(nav.indexOf("Windows NT 6.1") > 0 )
crearlink("estilos_web_ie8.css");
else
crearlink("estilos_web_chrome.css");
}
function crearlink(hojadeestilo) {
var link = document.createElement("link");
link.setAttribute("href",hojadeestilo);
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
document.getElementsByTagName("head")[0].appendChild(link);
document.close();
}
Resulta que si añado el archivo css con <link rel="stylesheet" type="text/css" href="estilos_web_ie8.css" /> el código funciona perfecto.
Cuando elimino el <link> y utilizo el código javascript del archivo javascript que mostré mas arriba,las viñetas se empiezan a mostrar.
Les agradezco cualquier sugerencia que elimine mi ignorancia y/o torpeza.
Gracias.
