Problemas con CSS junto a IE

limboings · #1 (**permalink**) 08/10/2006, 15:21

Hola buenas,

Pues un porblema claro e importante esque no me muestran ninguna de las imagenes,son png y con transparencias,he leido un post y los enlaces que proporcionaron los usuarios pero no me entero de nada,como lo hago en JS o CSS?alguien que sea tan amable de resumirme que ocurre?

Otro problemas es con la pseudoclase :hover en internet explorer no me funcionan,como lo arreglo?

Al fin y al cabo,vale la pena hacer dos versiones de web? o es mejor restringir el acceso a la web a usuarios que utilizen internet explorer como navegador?

Un Saludo y gracias de antemano!

marce_str · #2 (**permalink**) 08/10/2006, 16:41

Para lo del png, lo que podes hacer es buscar alguna pagina que use png transparentes, y descargarla a tu disco rigido, analizás el codigo del html y buscas el archivo .js que utiliza ese sitio para permitir transparencias, y te lo copias para tu sitio.

lo del :hover, no se que puede pasa, a mi una vez me paso que con explorer ni siquiera me aparecia el cursor con la manito sobre los links, lo solucione ponieno position:absolute; pero no se si es tu caso, tendrias que publicar tu codigo para que podamos verlo

Y lo del las dos versiones, definitivamente NO, tenes que tratar de hacer una web accesible para todas las plataformas, navegadores y personas. Es bastante trabajo pero despues se te puede valorar un poco mas como profesional.

limboings · #3 (**permalink**) 08/10/2006, 18:25

Hola buenas de nuevo,

Bueno aqui os dejo el codigo,decir que es mi primer menu en css completamente desde cero,es decir,seguro que hay cosas que no las veis bien,en ese caso agradeceria las sugerencias de mejoras que pueden ser muchas.

Código:

#navegacion ul {
	position:absolute;
	left:0;
	top:260px;
	list-style:none;	
	margin-left:5px;
	margin-top: 20px;
	font-size: 12px;
	font-family:Verdana,Arial;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	width:146px;
	height:287px;
	
border:1px solid #a53323;
}

#navegacion ul li{
    background-image: url(ico.png);
	padding-left: 0px;
	padding-top: 7px;
	
	border-bottom:1px solid #a53323;
	border-top:8px solid #ff4f37;
	width:146px;
	height: 20px;
	text-align: center;
}
#navegacion ul li:hover{
    background-image: url(ico.png);
	margin-left:15px;
	padding-left:15px;
	padding-top: 7px;
	border:2px solid #fd5f21;
	border-top:8px double #fd5f21;
	width:146px;
	height: 20px;
	text-align: left;
	
}

a{
	color: #5c0803;
	text-decoration: none;
}
#navegacion ul li:hover a{
 color: #5c0803; #f59601 
	
}
#navegacion ul li:hover a:hover{
 color: #f59601 ; 
	
}

El problema esta en que en IE me visualiza el menu pero en estatico,cuando paso el raton por encima "no me hace el :hover".

Un Saludo y muchas gracias.

marce_str · #4 (**permalink**) 08/10/2006, 19:31

subí el css completo y el html, porque hay que verlo funcionando todo completo, a mi me ha pasado que algunas propiedades de algunos objetos influyen a otros.
De todas formas creo que no esta bien estructurado, (SI ME EQUIVOCO POR ESTO QUE DIJE QUE ALGUIEN ME CORRIJA).

Yo suelo especificar un elemento ID para contener la lista. Por ejemplo #nav
Después creo una clase para esa lista en este caso podemos llamarlo ul.principal.
Aca te paso un menu que tengo hecho en una página, es muy simple, y quizas no te sirva para aplicarlo, pero fijate como esta estructurado.

Código:

#nav {
	padding-top:12px;
}

ul.principal {
	list-style-type: none;
	margin-top:20px;
}
ul.principal li {
	height: 25px;
	width: 176px;
	display: block;
	text-align: right;
}

ul.principal li a {
	font-size: 1em;
	color:#666666;
	text-decoration: none;
	background-color: inherit;
}

ul.principal li a:hover {
	text-decoration: underline;
}

Igual no es necesario que respetes todo como esta aqui, todo depende de lo que quieras

limboings · #5 (**permalink**) 08/10/2006, 19:46

Hola buenas,

Entonces que hago? restructuro todo el css? o no servira de nada en cuanto al problema de que no se ve como se deveria ver en IE?

Cita:

Igual no es necesario que respetes todo como esta aqui, todo depende de lo que quieras

Lo que quiero es que se vea jeje,me da igual como hacerlo si asi se me ve en IE y en Netscape,Mozilla etc..

Bueno,muchas gracias,Un Saludo!

Rafael · #6 (**permalink**) 09/10/2006, 10:52

A ver lo del png deja ver, creo que en el mismo sitio de Microsoft hay un Js para la transparencia, deja ver si lo encuentro.

El :hover solo funciona en a.

marce_str · #7 (**permalink**) 09/10/2006, 11:26

Uy no note eso que te dijo Rafael, es muy cierto.

Pero de paso te explico lo de la estructura, te recomiendo que hagas el menu de nuevo.
En el ejemplo que te di

#nav : es el contenedor del menu

ul.principal : se refiere a las caracteríticas de la lista en si

ul principal li : afecta solo a los items, uno por uno

ul principal li a : son los items que funcionan como links

ul principal li a:hover : como ya debes saber son los links en estado de hover.

El html te tendria que quedar algo asi:

Código:

<div id="nav">
	<ul class="principal">
		<li><a href="index.html">Home</a></li>
		<li><a href="servicios.html">Servicios</a></li>
		<li><a href="contacto.html">Contacto</a></li>
	</ul> 
</div>

Cuando yo decia que "no es necesario que respetes todo como esta aqui" es porque la apariencia seguro es distinta a lo que vos queres, vos tenes que darle las propiedades que te sean necesarias.
En mi pagina personal por ejemplo tengo 3 listas de menu, y son muy distintas, y es mas.... tengo una que tiene problemas de visualizacion en :hover con explorer jajaja, pero despues algun dia le voy a dedicar mas tiempo.
El tema es que explorer te rompe la cabeza pero bueh... hay que hacer las webs accesibles para todos.

Rafael · #8 (**permalink**) 09/10/2006, 12:58

Png transparente. Estaba en estos mismos foros :)
http://www.forosdelweb.com/showthrea...encia+imagenes

limboings · #9 (**permalink**) 09/10/2006, 13:42

Hola buenas,

Muchas gracias a los dos,haveis sido de gran ayuda,ahora probare todo aver que tal,y lo del png..he probado unas cuantas cosas y no me funcionaban,a ver si esta solucion es exitosa.

Un Saludo y gracias de nuevo.

limboings · #10 (**permalink**) 09/10/2006, 13:59

Hola de nuevo,

Despues de probarlo no me funciona jaja la verda es que no me extraño..bueno,por curiosidad he probado una imagen .jpg,es decir sin trasparencia,y tampoco me funciona,no aparece ninguna imagen,yo estoy que no entiendo nada,haver si sabeis ahora por que no me deja ver imagenes...

Otra cosa,esto que dijo Rafael:

Cita:

El :hover solo funciona en a.

En firefox por lo menos si me deja aplicarlo a otros elementos,te referias que solo funciona en a en IE??

Un Saludo

Rafael · #11 (**permalink**) 09/10/2006, 14:28

Si, en Ie solo funciona en a.

El script PNG funciona bien, trata un poco más. Está bueno.

limboings · #12 (**permalink**) 09/10/2006, 15:19

Hola buenas,

El problema ahora rafael no son las transparentes,el problema es que no me muestra la imagen de fondo con background-image en IE,con la etiqueta <img> si,mira asi lo tengo:

Código:

#cabecera>#c1{
position:absolute;
left:1px;
top:7px;
background-position:0px 0px;
width:356px;
height:69px;
background-image: url(nube.jpg);
background-repeat: no-repeat;

Hay algun fallo para IE que evite que sea vean las imagenes de fondo??

Un Saludo y gracias!

marce_str · #13 (**permalink**) 09/10/2006, 18:37

mm... la verdad que no se que te pasa ahora... pero... por que le pusiste background-position: 0px 0px; ?? saca eso y trata de ubicarlo sin left ni top, prueba con margenes a ver que pasa.
De todas formas, volve a probar el script de js, yo uso ese o uno muy similar, no se y funciona bien

limboings · #14 (**permalink**) 09/10/2006, 18:58

Hola buenas,

Lo de background-position lo pongo para que me salga la imagen justo en la esquina superior izquierda del elemento <div>,marce lo de el script de js no me sirve de nada de momento,porque primero quiero averiguar que pasa que no se me ven las imagenes sea cual sea su extension.
He probado lo que me has dicho y sigue sin aparecer las imagenes..

Bueno un Saludo y gracias por la ayuda que me estais dando,se agradece.

marce_str · #15 (**permalink**) 09/10/2006, 20:07

probá con poner background-position= top left;

limboings · #16 (**permalink**) 10/10/2006, 14:13

Buenas,

Sigue sin funcionarme,estoy deseperado ya,que puedo probar mas??

Un Saludo y muchas gracias!

marce_str · #17 (**permalink**) 10/10/2006, 16:44

sera que pone #cabecera>#c1 ?
probaste con poner algo mas simple? no puedo opinar mucho porque nunca use ">"

o te pasa con TODAS las imagenes? Porque la verdad que no se que puede ser que no te muestre ni siquiera un jpg.
tenes la web en linea para mostrarla?

limboings · #18 (**permalink**) 11/10/2006, 15:01

Hola buenas,

Si,era el indicador de hijo,pero como en mozilla me funciona bien pues no pensaba que fuese eso..
Ahora solo queda la transparencia de las imagenes,que ya lo probare mañana que no me da tiempo ahora..ya os contare.

Un Saludo y muchas gracias!