Hola, a todos, primeramente, no se si es correcto meter este tema en esta seccion del foro CCTW, pero es que no se en donde mas publicarlo.
Veran, he hecho un menu horizontal desplegable solamente con HTML y CSS, al estarlo contruyendo, me di cuenta que funcionaba perfectamente en Firefox y Google Chrome, todo era felicidad y Zen codding, hasta que... IE llego a echar todo al trasto. Probe subiendo la web a un FTP temporal, y solo me dio el mismo resultado, el link es el siquiente:
http://enygracol.kroksystem.com.mx/
Lo probe con IE8 y no funciono, luego con IE9 y solo funciona si permito funciones que se ejecuten funciones Activex, las cuales no recuerdo haber metido, lei un poco de compatibilidad y me recomendaron un script java, el cual no funciono para nada, ademas, no se casi nada de java... Por ahora.
Espero puedan alludarme con mi problema, les dejo aqui mi html y mi css.
Como pueden apreciar, mi problema es con la accesibilidad, ya que no quiero tener que recurrir a flash, quiero que todos puedan ver mi web sin tener nada mas que un navegador e internete. Como apreciaran, la web no esta teminda, es el esqueleto basico en lo que estoy trabajando, despues biene la mano de gato(Mas bien de tigre) en CSS para dejarla hermosa y accesible, como deve de ser.
Les gradesere muchisimo si pe pueden alludar.
Ademas les dejo los archivos adjuntos por si hubiese algun problema al copypastear los codigos.
PD: Mil gracias Jorgens(Creador de CCTW), sin ti, nada de esto que estoy haciendo seria porible, gracias.
Veran, he hecho un menu horizontal desplegable solamente con HTML y CSS, al estarlo contruyendo, me di cuenta que funcionaba perfectamente en Firefox y Google Chrome, todo era felicidad y Zen codding, hasta que... IE llego a echar todo al trasto. Probe subiendo la web a un FTP temporal, y solo me dio el mismo resultado, el link es el siquiente:
http://enygracol.kroksystem.com.mx/
Lo probe con IE8 y no funciono, luego con IE9 y solo funciona si permito funciones que se ejecuten funciones Activex, las cuales no recuerdo haber metido, lei un poco de compatibilidad y me recomendaron un script java, el cual no funciono para nada, ademas, no se casi nada de java... Por ahora.
<script language="javascript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
</script>Espero puedan alludarme con mi problema, les dejo aqui mi html y mi css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enygracol</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
<link rel="shortcut icon" href="objetos/logo gif.png">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script language="javascript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
</script>
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">
<a href="index.html"> <img src="objetos/Logo curado n transp.gif" width="800" height="155" alt="Pagina principal"/>
</a>
</div>
</div>
<div id="navegacion" align="center">
<div id="navbar" align="center">
<ul id="nav">
<li><a href="index.html">Inicio</a></li>
<li id="pys"><a title="Services" href="#">Precios y Servicios</a>
<ul>
<li><a href="#">Encuadenaciones</a></li>
<li><a href="#">Notas de venta</a></li>
<li><a href="#">Tripticos</a></li>
<li><a href="#">Volantes</a></li>
</ul>
</li><!-- end ul li -->
<li id="pys"><a href="#">¿Donde estamos?</a></li>
<li id="pys"><a href="#">¿Quienes somos?</a></li>
<li><a href="#">Contactanos</a></li>
</ul>
</div>
</div>
<div id="contenido">
<p>Aqui el contenido de la web</p>
</div>
<div id="pie">
<div id="pie1">
pie
</div>
<div id="pie2">
pie
</div>
<div id="pie3">
pie
</div>
</div>
</div>
</body>
</html>* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body {text-align: center ; background-color:#F5F5F5; behavior:url(csshover.htc);}
#global {width:800px ; margin:4px auto; margin-top:10px; position:center;}
#cabecera {background-image:objetos/Nuevo logo enygracol.gif ; height:155px;}
#logotipo {float:center-left; }
#navegacion {
width:800px;
height:30px;
margin-top:0px;
margin:0px auto;
margin-left:0px;
margin-bottom: 5px;
position:center;
padding: 0px;
}
#navbar { width:800px;
height:30px;
align: center;
margin-top:6px;
margin-bottom:6px;
background-color:#0F0
}
ul#nav {/* Estructura del head-menu */
list-style: none;
padding: 0;
margin: 0;
margin-left:60px;
margin-top: 6px;
}
li {
float: left;
position: relative;
width: 100px;
text-align:center;
height:30px;
}
#pys{ width:156px}
ul#nav li a { /* Elementos prencipales de le menu*/
display: block;
text-decoration:none;
color: #FFF;
height:30px;
text-align:center;
}
ul#nav li a:hover {/* Los estilos roll-over para los links de los primeros items*/
background-color:#00F;
}
ul#nav li ul { /* Primeros items > Estructura de submenu */
list-style:none;
width:156px
}
li ul {
display: none;
position: absolute;
width:156px;
top: 0px;
left: 0px;
margin-left:0px;
background-color:#999;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
/*Para sub elementos desplegables*/
ul#nav ul li a {
text-align:center;
text-decoration:none;
margin-left:0px;
width:156px;
}
#contenido {background-color:#D3D3D3 ; height:500px; text-align:center;}
#pie {background-color:#B8860B;}
#pie1 {float:left; width:250px; background-color:#0000CD}
#pie2 {float:left; width:300px; background-color:#0000CD}
#pie3 {float:left; width:250px; background-color:#0000CD}
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color: ; text-decoration:underline ; background-color:}
a:active {}
.lizq {background-image:url(objetos/menu_l.jpg); background-repeat:no-repeat; height:35px;A}
/*body {text-align: center ; background-color:#F5F5F5;}
body {
background: -webkit-gradient(linear, 0 0, 0 210%, from(white), to(#BEBEBE)); align:center;
}*/Como pueden apreciar, mi problema es con la accesibilidad, ya que no quiero tener que recurrir a flash, quiero que todos puedan ver mi web sin tener nada mas que un navegador e internete. Como apreciaran, la web no esta teminda, es el esqueleto basico en lo que estoy trabajando, despues biene la mano de gato(Mas bien de tigre) en CSS para dejarla hermosa y accesible, como deve de ser.
Les gradesere muchisimo si pe pueden alludar.
Ademas les dejo los archivos adjuntos por si hubiese algun problema al copypastear los codigos.
PD: Mil gracias Jorgens(Creador de CCTW), sin ti, nada de esto que estoy haciendo seria porible, gracias.