Foros del Web » Creando para Internet » HTML »

PAGINA SUPER SENCILLA QUE IE 8.0 no despliega

Estas en el tema de PAGINA SUPER SENCILLA QUE IE 8.0 no despliega en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/05/2010, 17:55
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Pregunta PAGINA SUPER SENCILLA QUE IE 8.0 no despliega

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <title> AKRON </title>
  3. <style type="text/css">
  4. <!--
  5. div.mapa_imagen {
  6.  position: relative
  7. }
  8.  
  9. ul.menu li {
  10.  list-style: none;
  11.  display: none;
  12.  position: absolute;
  13.  font-family: Arial;
  14.  text-decoration: underline;
  15.  color: #000;
  16. }
  17.  
  18. div.mapa_imagen:hover ul.menu li {
  19.  display: block;
  20. }
  21.  
  22. ul.menu li p {
  23.  margin: 5px 0 12px 4px;
  24.  padding: .3em;
  25.  display: none;
  26.  position: absolute;
  27.  top: -42%;
  28. }
  29. ul.menu li:hover p {
  30.  display: block;
  31. }
  32.  
  33. ul.menu li#quienes {
  34.  width: 130px; height: 20px; top: 120px; left: 480px;
  35.  cursor: pointer; cursor: hand;
  36. }
  37.  
  38. ul.menu li#contacto {
  39.  width: 80px; height: 20px; top: 120px; left: 630px;
  40.  cursor: pointer; cursor: hand;
  41. }
  42.  
  43. ul.menu li#catalogo {
  44.  width: 170px; height: 100px; top: 120px; left: 755px;
  45.  cursor: pointer; cursor: hand;
  46.  
  47. }
  48.  
  49. ul.menu li#acero {
  50.  width: 170px; height: 100px; top: 245px; left: 755px;
  51.  cursor: pointer; cursor: hand;
  52.  
  53. }
  54.  
  55. ul.menu li#adhesivos {
  56.  width: 170px; height: 100px; top: 375px; left: 755px;
  57.  cursor: pointer; cursor: hand;
  58.  
  59. }
  60.  
  61. ul.menu li#escaleras {
  62.  width: 170px; height: 100px; top: 505px; left: 755px;
  63.  cursor: pointer; cursor: hand;
  64.  
  65. }
  66.  
  67. ul.menu li#descargas {
  68.  width: 170px; height: 100px; top: 560px; left: 50px;
  69.  cursor: pointer; cursor: hand;
  70.  
  71. }
  72. -->
  73. </head>
  74. <div class="mapa_imagen">
  75.     <img src="main.jpg" />
  76.     <ul class="menu">
  77.     <li id="quienes"><p>&nbsp;quienes somos</li>
  78.  
  79.         <li id="contacto"><p><b>contacto</b></p></li>
  80.  
  81.         <li id="catalogo" onclick="window.open('http://google.com', 'Catalogo')"><p></p></li>
  82.         <li id="acero" onclick="window.open('http://yahoo.com', 'Acero')"><p></p></li>
  83.         <li id="adhesivos" onclick="window.open('http://desarrolloweb.com', 'Adhesivo')"><p></p></li>
  84.         <li id="escaleras" onclick="window.open('http://google.com', 'Escaleras')"><p></p></li>
  85.         <li id="descargas" onclick="window.open('http://google.com', 'Escaleras')"><p>&nbsp;</p></li>
  86.     </ul>
  87. </div>
  88.  
  89. </body>
  90. </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/

Última edición por netovs; 19/05/2010 a las 18:01 Razón: Colocar URL
  #2 (permalink)  
Antiguo 19/05/2010, 18:01
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: PAGINA SUPER SENCILLA QUE IE 8.0 no despliega

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.
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 19/05/2010, 18:07
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Respuesta: PAGINA SUPER SENCILLA QUE IE 8.0 no despliega

Cita:
Iniciado por Carlangueitor Ver Mensaje
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
  #4 (permalink)  
Antiguo 19/05/2010, 23:27
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 10 años, 2 meses
Puntos: 188
Respuesta: PAGINA SUPER SENCILLA QUE IE 8.0 no despliega

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 original
  1. function mostrar(){
  2.     document.getElementById('nombre_div').style.display = "block";
  3. }
  4.  
  5. function ocultar(){
  6.     document.getElementById('nombre_div').style.display = "none";
  7. }

y en las etiquetas
Código HTML:
Ver original
  1. <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
  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. function popup(url) {
  4.     newwindow=window.open(url,'name','height=250,width=350');
  5.     if (window.focus) {newwindow.focus()}
  6.     return false;
  7. }
  8. // -->
  9. </script>

y los abres con especificar el siguiente onclick en las etiquetas
Código HTML:
Ver original
  1. onclick="return popup('addNew.php');


Saludos.
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.

Etiquetas: sencilla, super
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:20.