PAGINA SUPER SENCILLA QUE IE 8.0 no despliega

netovs · #1 (**permalink**) 19/05/2010, 16:55

Saludos a todo el foro.

Les platico que he creado un HTML que se ve bárbaro en FireFox Chrome y Safari pero en Internet Explorer no se ve un carajo solo la imagen principal espero podan ayudarme, el código HTML no tiene mayor complicación.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> AKRON </title>
<style type="text/css">
<!--
div.mapa_imagen {
  position: relative
}
 
ul.menu li {
  list-style: none;
  display: none;
  position: absolute;
  font-family: Arial;
  text-decoration: underline;
  color: #000;
}
 
div.mapa_imagen:hover ul.menu li {
  display: block;
}
 
ul.menu li p {
  margin: 5px 0 12px 4px; 
  padding: .3em;
  display: none;
  position: absolute;
  top: -42%;
}
ul.menu li:hover p {
  display: block;
}
 
ul.menu li#quienes {
  width: 130px; height: 20px; top: 120px; left: 480px;
  cursor: pointer; cursor: hand;
}
 
ul.menu li#contacto {
  width: 80px; height: 20px; top: 120px; left: 630px;
  cursor: pointer; cursor: hand;
}
 
ul.menu li#catalogo {
  width: 170px; height: 100px; top: 120px; left: 755px;
  cursor: pointer; cursor: hand;
 
}
 
ul.menu li#acero {
  width: 170px; height: 100px; top: 245px; left: 755px;
  cursor: pointer; cursor: hand;
 
}
 
ul.menu li#adhesivos {
  width: 170px; height: 100px; top: 375px; left: 755px;
  cursor: pointer; cursor: hand;
 
}
 
ul.menu li#escaleras {
  width: 170px; height: 100px; top: 505px; left: 755px;
  cursor: pointer; cursor: hand;
 
}
 
ul.menu li#descargas {
  width: 170px; height: 100px; top: 560px; left: 50px;
  cursor: pointer; cursor: hand;
 
}
-->
</style>
</head>
<body>
<div class="mapa_imagen">
    <img src="main.jpg" />
    <ul class="menu">
    <li id="quienes"><p>&nbsp;quienes somos</li>
 
        <li id="contacto"><p><b>contacto</b></p></li>
 
        <li id="catalogo" onclick="window.open('http://google.com', 'Catalogo')"><p></p></li>
        <li id="acero" onclick="window.open('http://yahoo.com', 'Acero')"><p></p></li>
        <li id="adhesivos" onclick="window.open('http://desarrolloweb.com', 'Adhesivo')"><p></p></li>
        <li id="escaleras" onclick="window.open('http://google.com', 'Escaleras')"><p></p></li>
        <li id="descargas" onclick="window.open('http://google.com', 'Escaleras')"><p>&nbsp;</p></li>
    </ul>
</div>
 
</body>
</html>

Saludos a todos cuento con su ayuda.

Pueden ver que en FF3, Safari y Chrome funciona este es el url: http://www.akronmx.com/akron/

Carlangueitor · #2 (**permalink**) 19/05/2010, 17:01

Tienes un display none para los elementos de la lista por eso no se ve nada, además de que no tienes nada de texto más que lo de quienes somos y contacto. Te recomiendo que utilices enlaces href en lugar de javascript.

netovs · #3 (**permalink**) 19/05/2010, 17:07

Cita:

Iniciado por Carlangueitor

Tienes un display none para los elementos de la lista por eso no se ve nada, además de que no tienes nada de texto más que lo de quienes somos y contacto. Te recomiendo que utilices enlaces href en lugar de javascript.

De hecho esa es la idea que el display: none oculte todo y solo con el hover se pueda observar o en este caso un window.open

iovan · #4 (**permalink**) 19/05/2010, 22:27

Hola amigo, es que no estás haciendo un uso correcto del display:none.

La forma en que lo estás usando no está correcto. Por ejemplo

Usted dice que con window.open debería de observarse, pero el window.open funciona para abrir ventanas secundarias y solo funciona en algunos navegadores.

La forma correcta de hacer un display:none que se muestre con un hover es con js y es de la siguiente manea

1.- En el CSS general del sitio si defino un display none, con js debo definir un display:algo (por ejemplo display:block) al ejecutar una funcion,

por ejemplo

Código Javascript:

Ver originalfunction mostrar(){
    document.getElementById('nombre_div').style.display = "block";
}
 
function ocultar(){
    document.getElementById('nombre_div').style.display = "none";
}

y en las etiquetas

Código HTML:

Ver original<li onmouseover="mostrar()" onmouseout="ocultar()">

Este es un pequeño ejemplo de como se utiliza JS para ocultar y mostrar las etiquetas.

Y sobre abrir un POPUP, no te recomiendo window.open especificado desde una etiqueta, ya que esto solo funciona en algunos navegadores.

Lo correcto sería

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
<!--
function popup(url) {
    newwindow=window.open(url,'name','height=250,width=350');
    if (window.focus) {newwindow.focus()}
    return false;
}
// -->
</script>

y los abres con especificar el siguiente onclick en las etiquetas

Código HTML:

Ver originalonclick="return popup('addNew.php');

Saludos.