Foros del Web » Creando para Internet » CSS »

Pestañas no funciona en Internet explorer

Estas en el tema de Pestañas no funciona en Internet explorer en el foro de CSS en Foros del Web. Amigos, tengo un menú con pestañas que estoy modificando pero tengo un problema, como ustedes saben el IE 6 solamente entiende la seoudoclase :hove r ...
  #1 (permalink)  
Antiguo 22/02/2009, 13:49
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Pestañas no funciona en Internet explorer

Amigos, tengo un menú con pestañas que estoy modificando pero tengo un problema, como ustedes saben el IE 6 solamente entiende la seoudoclase :hover cuando se refiere a los enlace. Por lo menos eso lo dice el libro que estoy estudiando y de hecho, eso lo he podido observar

El efecto que quiero lograr en IE es que al pasar el ratón, tanto el fondo y el border que tiene cambien a blanco.

De la unica manera que logro hacerlo funcionar es usando la biblioteca http://dean.edwards.name/IE7/

Código HTML:
<body>
<ul id="pestaña"> 
   
  <li><a href="#">inicio</a></li>
  <li><a href="#">acerca de</a></li>
  <li><a href="#">contactos</a></li>
</ul> 
Código HTML:
/* CSS Document */  
body, html {
	margin: 0;
	padding: 0;
}

ul#pestaña {  
list-style: none;
  margin: 0;
  padding: 10px 0 0 0;
  height: 25px;
  border-bottom: 1px solid black;
  background: rgb(222, 222, 222);
}

ul#pestaña li {
	float: left;
	margin: 0 5px;
	height: 23px;
	text-align: center;
	position: relative;
	width: 150px;
	border: 1px solid black;
	top: 1px;
	background: rgb(128, 128, 128);
}

ul#pestaña li:hover {
	border-bottom: 1px solid  white;
	background: white;
}

ul#pestaña a {
	display: block;
	height: 100%;
	text-decoration: none;
	color: white;
	font: 14px arial;
}

ul#pestaña a:hover {
	color: black;
La Pagina donde puedes verlo

http://ianiferrer.site90.com/menu.html

muevan esto al foro de css que me equivoque de foro
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 22/02/2009, 16:25
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Pestañas no funciona en Internet explorer

modifique un poco el css y yo no estoy usando la librería de ie7

Código css:
Ver original
  1. body, html {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. ul#pestana {  
  7. list-style: none;
  8.   margin: 0;
  9.   padding: 10px 0 0 0;
  10.   height: 25px;
  11.   border-bottom: 1px solid black;
  12.   background: rgb(222, 222, 222);
  13. }
  14.  
  15. ul#pestana li {
  16.     float: left;
  17.     margin: 0 5px;
  18.     height: 23px;
  19.     text-align: center;
  20.     position: relative;
  21.     width: 150px;
  22.     border: 1px solid black;
  23.     top: 1px;
  24.     background: rgb(128, 128, 128);
  25. }
  26.  
  27. ul#pestana li a:hover,ul#pestana li a:active,ul#pestana li a:focus {
  28.     border-bottom: 1px solid #FFF;
  29.     background: white;
  30. }
  31.  
  32. ul#pestana li a {
  33.     display: block;
  34.     height: 100%;
  35.     text-decoration: none;
  36.     color: white;
  37.     font: 14px arial;
  38. }
  39.  
  40. ul#pestana li a:hover,ul#pestana li a:active,ul#pestana li a:focus {
  41.     color: black;
  42. }

avisas como te va
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 22/02/2009, 17:32
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Pestañas no funciona en Internet explorer

Raro.. no me funciona nada
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #4 (permalink)  
Antiguo 22/02/2009, 17:35
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Pestañas no funciona en Internet explorer

pues si, hay algunos errores y pido disculpas por eso

Código css:
Ver original
  1. body, html {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. ul#pestana {  
  7. list-style: none;
  8.   margin: 0;
  9.   padding: 10px 0 0 0;
  10.   height: 25px;
  11.   border-bottom: 1px solid black;
  12.   background: rgb(222, 222, 222);
  13. }
  14.  
  15. ul#pestana li {
  16.     float: left;
  17.     margin: 0 5px;
  18.     height: 23px;
  19.     text-align: center;
  20.     position: relative;
  21.     width: 150px;
  22.     border: 1px solid black;
  23.     top: 1px;
  24.     background: rgb(128, 128, 128);
  25. }
  26.  
  27. ul#pestana li a {
  28.     display: block;
  29.     height: 100%;
  30.     text-decoration: none;
  31.     color: white;
  32.     font: 14px arial;
  33. }
  34.  
  35. ul#pestana li a:hover,ul#pestana li a:active,ul#pestana li a:focus {
  36.     border-bottom: 1px solid #FFF;
  37.     background: white;
  38.  color: black;
  39. }

por que no lo pruebas en un archivo nuevo.
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 22/02/2009, 17:43
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Pestañas no funciona en Internet explorer

LO he hecho como me dijiste pero no pasa nada :(

¿que podría ser?

gracias por tu tiempo, se te agradece
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #6 (permalink)  
Antiguo 22/02/2009, 17:48
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Pestañas no funciona en Internet explorer

que raro a mi si me pone el background en white al pasarlo por encima en IE6
__________________
WFC
codigo82
  #7 (permalink)  
Antiguo 22/02/2009, 17:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pestañas no funciona en Internet explorer

Como ya comentaba en la segunda parte de la guía de migración, siempre en estos casos es recomendable que pongas las propiedades a los enlaces en lugar de a los LI, porque generalmente las querrás modificar en eventos como al pasar el ratón, y eso te evitará propblemas con IE6.

Prueba estas modificaciones a tu código (copia y pega y luego mira las diferencias con el tuyo):
Cita:
body, html {
margin: 0;
padding: 0;
}
ul#pestaña {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid black;
background: rgb(222, 222, 222);
}
ul#pestaña li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
top: 1px;
}
ul#pestaña a {
display: block;
height: 100%;
text-decoration: none;
color: white;
background: rgb(128, 128, 128); font: 14px arial;
border: 1px solid #000;
}
ul#pestaña a:hover {
color: black;
background: #fff;
border-bottom: 1px solid #fff;
}
(sólo quito el fondo y el borde de los LI y se lo pongo a los A, de manera que luego las modificaciones se las pongo a los a:hover)
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 22/02/2009, 18:09
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Pestañas no funciona en Internet explorer

Interesante.. gracias

La vedad se me paso consultar la guia una vez mas

el guru del css me ha salvado hehe
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 22/02/2009, 18:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pestañas no funciona en Internet explorer

No, quizá el ejemplo de donde has sacado eso es un poco antiguo. Parece lógico, ¿no? sabiendo lo de IE6 y el :hover, las propiedades que vayan a ser modificadas se le ponen al enlace y listo.

Saludos.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 22/02/2009, 19:57
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Pestañas no funciona en Internet explorer

a decir verdad el libro que tengo CSS practico de Richard york es de 2006, en pocas palabras es antiguo si :)
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
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 20:07.