menu se despliega en mozila pero en explorer no

Superlinux · #1 (**permalink**) 08/08/2009, 14:55

...

index.php

Código PHP:

 
<link rel="stylesheet" href="css/menu.css" type="text/css">

<body>

<?php include_once("css/menu.php") ?>

</body>

menu.css

Código PHP:

  * { 

padding: 0px; outline: 0;

}

 
html, body { width: 100%;}

 
body { background: #366;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

 
#menu {  text-align: center;

z-index: 99; 

font-size: 1.0em;

width: 940px;

margin: 0px auto;

position: absolute;

}

 
#menu ul{

    list-style-type: none;

    margin: 0;

    margin-left: 0; /*offset of first tab relative to page left edge*/

}

 
#menu ul li.nivel1 { float: left;

width: 187px;

margin-right: 1px;

}

 
#menu ul li a {display: block;

text-decoration: none;

color: #fff;

/*background: url(../img/arrow_separator.jpg) no-repeat center left; /*custom bullet list image*/

background-color: #399;

border: solid 0px #fff;

padding: 3px;

position: relative;

}

 
#menu ul li:hover {position: relative;

}

 
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;

color: #000;

position: relative;

}

 
#menu ul li a.nivel1 {display: block!important;display: none;

position: relative;

}

 
#menu ul li ul {margin:0px 0 0 -1px; *margin:0 0 0 0; clear:both; font-weight:normal;left:-999em;  position:absolute; width:187px; z-index:4;  background:url(submenu-bottom.png) no-repeat bottom left; padding:0 0 5px 0; }

 
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;

position: absolute;left: 0px;

}

 
#menu ul li ul li a {width: 187px;

padding: 3px 0px 3px 0px;

border-top-color: #000;

}

 
#menu ul li ul li a:hover {border-top-color: #000;

position: relative;

}

 
table.falsa {border-collapse:collapse;

color: #000;

border:0px;

float: left;

position: relative;

}

menu.php

Código PHP:

  <div id="menu">

<ul>

  <li class="nivel1"><a href="index.php" class="nivel1">Especialistas</a></li>

  <li class="nivel1"><a href="#" class="nivel1">Clinicas</a>

    <ul>

        <li><a href="indexadd_hoteles.php">Clinicas en Colombia</a></li>

        <li><a href="index_hoteles.php?idc=4">Armenia</a></li>

        <li><a href="index_hoteles.php?idc=6">Barranquilla</a></li>

        <li><a href="index_hoteles.php?idc=1">Bogota</a></li>

        <li><a href="index_hoteles.php?idc=2">Cali</a></li>

        <li><a href="index_hoteles.php?idc=5">Cartagena</a></li>

        <li><a href="index_hoteles.php?idc=3">Medellin</a></li>

        <li><a href="index_hoteles.php?idc=17">Pereira</a></li>

        <li><a href="index_hoteles.php?idc=18">Popayan</a></li> 

    </ul>

</li>

  <li class="nivel1"><a href="#" class="nivel1">Hospedaje</a>

    <ul>

        <li><a href="indexadd_clinicas.php">Clinicas en Colombia</a></li>

        <li><a href="index_clinicas.php?idc=4">Armenia</a></li>

        <li><a href="index_clinicas.php?idc=6">Barranquilla</a></li>

        <li><a href="index_clinicas.php?idc=1">Bogota</a></li>

        <li><a href="index_clinicas.php?idc=2">Cali</a></li>

        <li><a href="index_clinicas.php?idc=5">Cartagena</a></li>

        <li><a href="index_clinicas.php?idc=3">Medellin</a></li>

        <li><a href="index_clinicas.php?idc=17">Pereira</a></li>

        <li><a href="index_clinicas.php?idc=18">Popayan</a></li> 

    </ul>

</li>

  <li class="nivel1"><a href="pagina_enconstruccion.php" class="nivel1">Aerolìneas</a></li>

  <li class="nivel1"><a href="pagina_enconstruccion.php" class="nivel1">Otros</a></li>

</ul>

</div>

 
que pasara ???

alexk · #2 (**permalink**) 08/08/2009, 23:24

"li:hover" no hay en IE... podrias usar la
libreria de IE7
http://code.google.com/p/ie7-js/

o cambiar a "li a:hover"

o usar una libreria mas pequeña
http://www.xs4all.nl/~peterned/csshover.html

chao y suerte!...

Superlinux · #3 (**permalink**) 11/08/2009, 09:00

ok funciono bien .. pero tengo una duda .. mi menu css desplegable en explorer se carga por debajo los swf y galeria de imagenes

esto es lo que tengo

Código PHP:

  * { 

padding: 0px; outline: 0;

}

 
html, body { width: 100%;}

 
body { background: #366;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

 
#menu {  text-align: left;

z-index: 99; 

font-size: 1.0em;

width: 940px;

margin: 0px auto;

}

 
#menu ul{

list-style-type: none;

margin: 0;

margin-left: 0; /*offset of first tab relative to page left edge*/

}

 
#menu ul li.nivel1 { float: left;

width: 187px;

margin-right: 1px;

}

 
#menu ul li a {display: block;

text-decoration: none;

color: #fff;

/*background: url(../img/arrow_separator.jpg) no-repeat center left; /*custom bullet list image*/

background-color: #399;

border: solid 0px #fff;

padding: 3px;

position: relative;

}

 
#menu ul li:hover {position: relative;

 
}

 
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;

color: #000;

position: relative;

}

 
#menu ul li a.nivel1 {display: block!important;display: none;

position: relative;

}

 
#menu ul li ul {margin:0px 0 0 -1px; *margin:0 0 0 0; clear:both; font-weight:normal;left:-999em;  position:absolute; width:187px; z-index:4;  background:url(submenu-bottom.png) no-repeat bottom left; padding:0 0 5px 0; }

 
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;

position: absolute;left: 0px;

}

 
#menu ul li ul li a {width: 187px;

padding: 3px 0px 3px 0px;

border-top-color: #000;

}

 
#menu ul li ul li a:hover {border-top-color: #000;

position: relative;

}

 
table.falsa {border-collapse:collapse;

color: #000;

border:0px;

float: left;

position: relative;

}

?????

alexk · #4 (**permalink**) 11/08/2009, 09:24

ya se ah tratado mucho ultimamente. es agregar a tu <object> y <embed> un

Código html:

Ver original<param name="wmode" value="opaque" />

y al <embed>

Código html:

Ver originalwmode="opaque"

chao y suerte!...

PD: Igual podemos meter nuestro flash en un div... y meterle un exagerado z-index en negativo

Código css:

Ver original#miflas{z-index: -999;}

para reforzar el wmode, por si aun no anda segun dicen.

Superlinux · #5 (**permalink**) 11/08/2009, 09:42

gracias .. mira mi galeria de imagenes se visualiza por medio de

Código PHP:

  /*Define el Tamaño y color del de la ventana */

#myGallery, #myGallerySet, #flickrGallery

{

    width: 300px;

    height: 293px;

    z-index: 0;

    border: 1px solid #2C9FA9;

    position: relative;    

}

y es por debajo de este que se visualiza el menu

alexk · #6 (**permalink**) 11/08/2009, 09:49

y si le pones un z-index al ul que colapsa?... de "100" por ejemplo

PD: Lo del flash se soluciono? o tu galeria esta en flash?... no entiendo pon la URL de tu web o algo... que me es un poco dificil mi "Firefox Mental" anda fallando su firebug... jaja mentiras chao y suerte!...

Superlinux · #7 (**permalink**) 11/08/2009, 13:20

no la galleria esta toda en html y css al ubicar asi z-index: 100; no funciona ni en firefox ni explorer ... pero si lo pongo z-index: 0; funciona en firefox ... pero en explorer no

Código PHP:

  /*Define el Tamaño y color del de la ventana */

#myGallery, #myGallerySet, #flickrGallery

{

    width: 300px;

    height: 293px;

    z-index: 100;

    border: 1px solid #2C9FA9;

    position: relative;    

}

Superlinux · #8 (**permalink**) 11/08/2009, 13:22

si le pongo valores negativos... no visualiza nada ..

alexk · #9 (**permalink**) 11/08/2009, 13:28

mmm... perdona jeje... soy mas gráfico... no entiendo mucho podrías ponernos una URL?

Superlinux · #10 (**permalink**) 11/08/2009, 14:00

en firefox .. genial .. pero explorer ... falla ..

Superlinux · #11 (**permalink**) 11/08/2009, 14:02

que pena ..

alexk · #12 (**permalink**) 11/08/2009, 14:21

ok tu "#menu ul li ul" tiene un "z-index" de 4 y si le pones mmm nose "999" que pasa?... supongo que con eso vale... chao y suerte!...

Superlinux · #13 (**permalink**) 11/08/2009, 14:45

asi lo puse y nada de nada

Código PHP:

  #menu ul li ul {

margin:0px 0 0 -1px; *margin:0 0 0 0; clear:both; font-weight:normal;left:-999em;  position:absolute; width:187px; z-index:999;  background:url(remate_desplegable.png) no-repeat bottom left; padding:0 0 5px 0; 

}

alexk · #14 (**permalink**) 11/08/2009, 15:09

pues ya solo se me ocurre agregarle el "z-index" menor mmm nose "10" a los "slideElement"

sino modificar el script para que ese mismo elemento "slideElement" le ponga "position:relative;"
nose asi sin firebug en ie ta dificillito perdona jeje chao!

Superlinux · #15 (**permalink**) 11/08/2009, 15:41

mmm nada

este es mi css que usa mi gallery de noticias ... en el cual el menu se visualiza por debajo

Código HTML:

/*Define el Tamaño y color del de la ventana */
#myGallery, #myGallerySet, #flickrGallery
{
	width: 300px;
	height: 293px;
	z-index: 0;
	border: 1px solid #2C9FA9;
	position: relative;	
}

#flickrGallery
{
	width: 300px;
	height: 293px;
}

#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
	display: none;
}

.jdGallery
{
	overflow: hidden;
	position: relative;
}

.jdGallery img
{
	border: 0;
	margin: 0;
}

/*Define el tamaño de la Galeria de imagenes*/
.jdGallery .slideElement
{
	z-index: 10;
	width: 100%;
	height: 100%;
	position:relative;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .loadingElement
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

/*Visualiza tamaño de la barra de noticias */
.jdGallery .slideInfoZone
{
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 0px;
	left: 0;
	bottom: 0;
	height: 25%;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

/* Permite cambiar el evento de subir o bajar el texto del mudulo (Si es -1px sube en explorer, si esta comentado baja*/
* html .jdGallery .slideInfoZone
{
/*	bottom: -1px;  */
}

.jdGallery .slideInfoZone h2
{
	padding: 0;
	font-size: 80%;
	margin: 0;
	margin: 2px 5px;
	font-weight: bold;
	color: inherit;
}

.jdGallery .slideInfoZone p
{
	padding: 0;
	font-size: 60%;
	margin: 2px 5px;
	color: #eee;
}

.jdGallery div.carouselContainer
{
	position: absolute;
	height: 135px;
	width: 100%;
	z-index: 10;
	margin: 0px;
	left: 0;
	top: 0;
}

/*
.jdGallery a.carouselBtn
{
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
/*	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
}
*/

.jdGallery .carousel
{
	position: absolute;
	width: 100%;
	margin: 0px;
	left: 0;
	top: 0;
	height: 115px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}


.jdExtCarousel
{
	overflow: hidden;
	position: relative;
}


.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
	position: absolute;
	width: 100%;
	height: 78px;
	top: 10px;
	left: 0;
	overflow: hidden;
}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
	position: relative;
}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
	cursor: pointer;
	background: #000;
	background-position: center;
	float: left;
	border: solid 1px #fff;
}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
	margin-bottom: 10px;
}

.jdGallery .carousel .label, .jdExtCarousel .label
{
	font-size: 13px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	padding: 1px 2px;
	margin: 0;
	background: #222;
	border: 1px solid #888;
	cursor: pointer;
}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
	color: #b5b5b5;
}


.jdGallery a
{
	font-size: 100%;
	text-decoration: none;
	color: inherit;
}

.jdGallery a.right, .jdGallery a.left
{
	position: absolute;
	height: 99%;
	width: 25%;
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity: 0.2;
	opacity: 0.6;
}

* html .jdGallery a.right, * html .jdGallery a.left
{
	filter:alpha(opacity=50);
}

.jdGallery a.right:hover, .jdGallery a.left:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.jdGallery a.left
{
	left: 0;
	top: 50;
	background: url('img/fleche1.png') no-repeat center left;
}

* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }

.jdGallery a.right
{
	right: 0;
	top: 50;
	background: url('img/fleche2.png') no-repeat center right;
}

* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }

/* Visualiza el Open de imagen de <a href="#" title="open image" class="open"></a>

/*.jdGallery a.open
{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.withArrows a.open
{
	position: absolute;
	top: 0;
	left: 25%;
	height: 99%;
	width: 50%;
	cursor: pointer;
	z-index: 10;
	background: none;
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}*/

.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }

* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
	filter:alpha(opacity=80); }
	
	
/* Gallery Sets */

.jdGallery a.gallerySelectorBtn
{
	z-index: 15;
	position: absolute;
	top: 0;
	left: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
	opacity: .4;
	-moz-opacity: .4;
	-khtml-opacity: 0.4;
	filter:alpha(opacity=40);
}

.jdGallery .gallerySelector
{
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

.jdGallery .gallerySelector h2
{
	margin: 0;
	padding: 10px 20px 10px 20px;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.jdGallery .gallerySelector .gallerySelectorWrapper
{
	overflow: hidden;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #888;
	padding: 5px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
	background: #333;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
	background: #000;
	background-position: center;
	float: left;
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 5px;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}

kseso? · #16 (**permalink**) 11/08/2009, 16:13

El z-index se lo tienes que colocar a la caja que tiene el menú (creo que es #menu)
Y lo que me extraña es que los navegadores no echen humo

¿Qué hace en medio del body dentro de una celda todo esto y lo que sigue:

Código html:

Ver original<td valign="top" height="18" align="left" class="tcontenidocreme">
<link charset="utf-8" media="screen" type="text/css" href="smoothgallery/css/layout.css" rel="stylesheet"/>
<link charset="utf-8" media="screen" type="text/css" href="smoothgallery/css/jd.gallery.css" rel="stylesheet"/>
<script type="text/javascript" src="smoothgallery/scripts/mootools.v1.11.js"/>
<script type="text/javascript" src="smoothgallery/scripts/jd.gallery.js"/>
<link href="css/tablaestilos.css" type="text/css" rel="stylesheet"/>
<link type="text/css" rel="stylesheet" href="css/productnav.css"/>
 
<style type="text/css">
siguen los estilos...

Superlinux · #17 (**permalink**) 12/08/2009, 10:03

...

gracias nuevamente foros del web foros del

solucion ..

Código PHP:

  #menu ul li.nivel1 { 

z-index: 999; 

float: left;

width: 187px;

margin-right: 1px;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

}

kseso? sobre el uso de los css ... para que mi portal no vaya a colapsar .. si me gustaria algo mas de orientacion ... tienes alguna sugerencia ???

jomaruro · #18 (**permalink**) 12/08/2009, 15:42

Hola:

Cita:

Iniciado por Superlinux

kseso? sobre el uso de los css ... para que mi portal no vaya a colapsar .. si me gustaria algo mas de orientacion ... tienes alguna sugerencia ???

Yo te sugiero los manuales de CSS de www.librosweb.es

Saludos.

kseso? · #19 (**permalink**) 12/08/2009, 15:54

Superlinux, en la red hay donde elegir, y en las faq´s de este foro hay enlaces interesantes.
Un buen punto de partida es lo indicado por Jomaruro.
Y para las dudas puntuales seguro que alguien encuentras en el foro.
Suerte.

Superlinux · #20 (**permalink**) 22/08/2009, 00:02

... gracias por el link http://www.librosweb.es ... genial ... gracias foros del web ...

:apla uso:

Superlinux · #21 (**permalink**) 27/03/2010, 12:37

.... requiero eliminar este tema ..

gracias