Foros del Web » Creando para Internet » CSS »

el menu se ven en firefox pero no en ie, porke?:S

 Estas en el tema de el menu se ven en firefox pero no en ie, porke?:S en el foro de CSS en Foros del Web. holaa! veran, soy nueva en el css, me estoy iniciando hace poco =) me descargue un menu template en css para editarlo y ponerlo en ...
  #1 (permalink)  
Antiguo 27/03/2009, 10:47
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 16 años, 10 meses
Puntos: 0
el menu se ven en firefox pero no en ie, porke?:S
holaa!
veran, soy nueva en el css, me estoy iniciando hace poco =)
me descargue un menu template en css para editarlo y ponerlo en mi web, no tuve problemas al editarlo ni nada, pero a la hora de verlo es cuando me da problemas
en firefox puedo verlo perfectamente,
pero en internet explorer no lo veo

no me gusta usar ie, pero como la mayoria (86,6%) de los visitantes a mi web lo usan, necesito que funcione también con el.

este es el codigo:

Código: 
CSS
#menu {padding:0; margin:0; list-style:none; width:395px; height:64px; background:url(lay/toolbar.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='toolbar.png', sizingMethod='scale');
}
#menu li {float:left; width:64px; height:64px; position:relative;}
#menu li a {display:block; width:64px; height:64px;}
#menu li a b {position:absolute; left:-9999px;}

#menu li a:hover {white-space:nowrap;}
#menu li a:hover b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;}

.home #menu li#home a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden; background:url(lay/bhome.png);}
.colabora #menu li#colabora a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcolabora.png);}
.contacto #menu li#contacto a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcontacto.png);}
.newsletter #menu li#newsletter a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bnewsletter.png);}
.rss #menu li#rss a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/brss.png);}
.foro #menu li#foro a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bforo.png);}


#menu li#home a:hover b {background:url(lay/bhome.png);}
#menu li#colabora a:hover b {background:url(lay/bcolabora.png);}
#menu li#contacto a:hover b {background:url(lay/bcontacto.png);}
#menu li#newsletter a:hover b {background:url(lay/bnewsletter.png);}
#menu li#rss a:hover b {background:url(lay/brss.png);}
#menu li#foro a:hover b {background:url(lay/bforo.png);}

* html #menu li#home a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bhome.png', sizingMethod='scale');
}
* html #menu li#colabora a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcolabora.png', sizingMethod='scale');
}
* html #menu li#contacto a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontacto.png', sizingMethod='scale');
}
* html #menu li#newsletter a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bnewsletter.png', sizingMethod='scale');
}
* html #menu li#rss a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='brss.png', sizingMethod='scale');
}
* html #menu li#foro a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bforo.png', sizingMethod='scale');
}
* html #menu li#contact a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontact.png', sizingMethod='scale');
}

* html .home #menu li#home a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bhome.png', sizingMethod='scale');
}
* html .colabora #menu li#colabora a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcolabora.png', sizingMethod='scale');
}
* html .newsletter #menu li#contacto a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontacto.png', sizingMethod='scale');
}
* html .newsletter #menu li#newsletter a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bnewsletter.png', sizingMethod='scale');
}
* html .rss #menu li#rss a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='brss.png', sizingMethod='scale');
}
* html .foro #menu li#foro a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bforo.png', sizingMethod='scale');
}
* html .contact #menu li#contact a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontact.png', sizingMethod='scale');
}

y en mi web:

Código: 
<ul id="menu">
			<li id="home" class="first"><a href="#"><b>Home</b></a></li>
			<li id="colabora"><a href="#"><b>colabora</b></a></li>
			<li id="contacto"><a href="#"><b>Contacto</b></a></li>
			<li id="newsletter"><a href="#"><b>Newsletter</b></a></li>
			<li id="rss"><a href="#"><b>RSS</b></a></li>
			<li id="foro"><a href="#"><b>Foro</b></a></li>
			</ul>

como dije no tengo ni idea de css, asi que si alguien sabe porque me ocurre esto o puede ayudarme se lo agradeceria enormemente! ^^
muchas gracias por adelantadooo! besoos
  #2 (permalink)  
Antiguo 27/03/2009, 16:05
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
Antes de nada, corrige que en toda esta parte tienes puntos cuando deben ser almohadillas:
Cita:
* html .home #menu li#home a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bhome.png', sizingMethod='scale');
}
* html #colabora #menu li#colabora a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bcolabora.png', sizingMethod='scale');
}
* html #newsletter #menu li#contacto a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bcontacto.png', sizingMethod='scale');
}
* html #newsletter #menu li#newsletter a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bnewsletter.png', sizingMethod='scale');
}
* html #rss #menu li#rss a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='brss.png', sizingMethod='scale');
}
* html #foro #menu li#foro a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bforo.png', sizingMethod='scale');
}
* html #contact #menu li#contact a b {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='bcontact.png', sizingMethod='scale');
}
  #3 (permalink)  
Antiguo 27/03/2009, 17:25
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
hola mikmoro, gracias por tu respuesta =)
pero ese no es el fallo, puesto que lo he probado y ahora no me sale bien ni en firefox ni en ie
:S antes me salia bien en uno pero mal en el otro y ahora mal en los dos :S
  #4 (permalink)  
Antiguo 27/03/2009, 17:36
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
Bueno ese sí es un fallo, al margen de que tengas otros además de ese. el punto representa class, y la almohadilla un ID. ¿Tú qué tienes para identificar tus elementos del menú?
Cita:
<li id="home" class="first"><a href="#"><b>Home</b></a></li>
<li id="colabora"><a href="#"><b>colabora</b></a></li>
<li id="contacto"><a href="#"><b>Contacto</b></a></li>
<li id="newsletter"><a href="#"><b>Newsletter</b></a></li>
<li id="rss"><a href="#"><b>RSS</b></a></li>
<li id="foro"><a href="#"><b>Foro</b></a></li>
</ul>
Identificadores (ID's). Sin embargo, en la CSS los intentas llamar como clases (.foro, .rss, etc.)

Te decía "antes de nada corrige eso", y luego veremos cuál es el probelma real, pero sin corregir eso igual es que borres todas esas líneas, porque no hacen nada.

En este otro trozo tienes el mismo error:
Cita:
#home #menu li#home a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden; background:url(lay/bhome.png);}
#colabora #menu li#colabora a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcolabora.png);}
#contacto #menu li#contacto a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcontacto.png);}
#newsletter #menu li#newsletter a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bnewsletter.png);}
#rss #menu li#rss a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/brss.png);}
#foro #menu li#foro a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bforo.png);}
Cambia todo eso, examina bien tu css (ID's, clases y almohadillas), e intenta ponerlo en línea en algún sitio, porque sin ver tus imágenes será casi imposible.
Tampoco deberías usar ya el elemento "b" para poner negritas (<b>Foro</b>), sini en su elemento y selector CSS font-weight: bold;
  #5 (permalink)  
Antiguo 28/03/2009, 13:56
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
pero no lo entiendo.. porque con el codigo que yo he puesto al principio me funciona con firefox
y ahora con el que tu me has dado y corrigiendo los errores que me dices.. no me funciona con ningun explorador :S
  #6 (permalink)  
Antiguo 28/03/2009, 16:15
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
Bueno, ¿de dónde lo has sacado? mirando ahí podríamos ver cuáles son las diferencias entre el original y el tuyo.
No sé muy bien que quieres decir con "funcionar", pero sí te aseguro que tienes muchos selectores que no sirven absolutamente para nada tal y como están.

Por ejemplo, todos estos no hacen nada:
Cita:
.home #menu li#home a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden; background:url(lay/bhome.png);}
.colabora #menu li#colabora a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcolabora.png);}
.contacto #menu li#contacto a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bcontacto.png);}
.newsletter #menu li#newsletter a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bnewsletter.png);}
.rss #menu li#rss a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/brss.png);}
.foro #menu li#foro a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(lay/bforo.png);}
bórralos y verás.

Todos los que empiezan por * html son sólo para explorer.
  #7 (permalink)  
Antiguo 28/03/2009, 16:32
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
mira, los codigos originales son:

en el css
Código: 
#pad {height:100px;}

#menuContainer {padding:0; margin:0; list-style:none; width:448px; height:64px; position:relative; float:right; margin-right:50px;}

#menu {padding:0; margin:0; list-style:none; width:448px; height:64px; background:url(toolbar.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='toolbar.png', sizingMethod='scale');
}

#menu li {float:left; width:64px; height:64px; position:relative;}
#menu li a {display:block; width:64px; height:64px;}
#menu li a b {position:absolute; left:-9999px;}

#menu li a:hover {white-space:nowrap;}
#menu li a:hover b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;}

.home #menu li#home a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden; background:url(bhome.png);}
.single #menu li#single a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(bsingle.png);}
.dropdown #menu li#dropdown a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(bdropdown.png);}
.dropline #menu li#dropline a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(bdropline.png);}
.flyout #menu li#flyout a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(bflyout.png);}
.support #menu li#support a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(bsupport.png);}
.contact #menu li#contact a b {left:48px; top:-48px; width:64px; height:0; padding-top:64px; overflow:hidden;background:url(bcontact.png);}


#menu li#home a:hover b {background:url(bhome.png);}
#menu li#single a:hover b {background:url(bsingle.png);}
#menu li#dropdown a:hover b {background:url(bdropdown.png);}
#menu li#dropline a:hover b {background:url(bdropline.png);}
#menu li#flyout a:hover b {background:url(bflyout.png);}
#menu li#support a:hover b {background:url(bsupport.png);}
#menu li#contact a:hover b {background:url(bcontact.png);}

* html #menu li#home a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bhome.png', sizingMethod='scale');
}
* html #menu li#single a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bsingle.png', sizingMethod='scale');
}
* html #menu li#dropdown a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bdropdown.png', sizingMethod='scale');
}
* html #menu li#dropline a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bdropline.png', sizingMethod='scale');
}
* html #menu li#flyout a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bflyout.png', sizingMethod='scale');
}
* html #menu li#support a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bsupport.png', sizingMethod='scale');
}
* html #menu li#contact a:hover b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontact.png', sizingMethod='scale');
}

* html .home #menu li#home a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bhome.png', sizingMethod='scale');
}
* html .single #menu li#single a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bsingle.png', sizingMethod='scale');
}
* html .dropline #menu li#dropdown a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bdropdown.png', sizingMethod='scale');
}
* html .dropline #menu li#dropline a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bdropline.png', sizingMethod='scale');
}
* html .flyout #menu li#flyout a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bflyout.png', sizingMethod='scale');
}
* html .support #menu li#support a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bsupport.png', sizingMethod='scale');
}
* html .contact #menu li#contact a b  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bcontact.png', sizingMethod='scale');
}

en la pagina donde aparece el menu:

Código: 
<ul id="menu">
			<li id="home" class="first"><a href="index.html"><b>Home</b></a></li>
			<li id="single"><a href="single.html"><b>Single</b></a></li>
			<li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
			<li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
			<li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
			<li id="support"><a href="support.html"><b>Support</b></a></li>
			<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
		</ul>


al decir me funciona o no, kiero decir que lo veo o no con el explorador


gracias por tu ayuda =)
  #8 (permalink)  
Antiguo 28/03/2009, 16:38
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
Ahhhh, entiendo: los selectores que te he señalado no se corresponden con los ID de los elementos de la lista, sino con la clase que se dará en cada página distinta a su contenedor o probablemente el body para que cambie cada elemento por sí sólo en cada página.

Lo siento porque por no haber visto el orginal antes e imaginarlo te he confundido.

Vuelvo pues a tu primer mensaje a ver qué se ve.
  #9 (permalink)  
Antiguo 28/03/2009, 16:42
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
¿Recuerdas la dirección de donde conseguiste este menú? es que hay cosas que ni imagino para qué son.
  #10 (permalink)  
Antiguo 29/03/2009, 07:31
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
lo saqué de aquí: cssmenus.co.uk
sigle menus > bubble

que podria hacer que se viera bien en firefox y mal con internet explorer? :S
  #11 (permalink)  
Antiguo 05/04/2009, 08:49
 
Fecha de Ingreso: junio-2007
Mensajes: 37
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: el menu se ven en firefox pero no en ie, porke?:S
nadie sabe como podria arreglar esto? :(
ya no se que hacer, he probado todo lo que se y me han dicho por aqui... pero no encuentro solucion :(
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:14.