Foros del Web » Creando para Internet » CSS »

De nuevo... problemas con ie...

Estas en el tema de De nuevo... problemas con ie... en el foro de CSS en Foros del Web. Bueno, después de haber luchado para que mi menú se visualizase bien en firefox... resulta que en ie se ve fatal... Mi mayor problema... trabajo ...
  #1 (permalink)  
Antiguo 08/06/2009, 15:13
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
De nuevo... problemas con ie...

Bueno, después de haber luchado para que mi menú se visualizase bien en firefox... resulta que en ie se ve fatal...

Mi mayor problema... trabajo con mac y no puedo ver internet explorer... me he descargado el darwine con el ie6 pero no me funciona bien... así que no puedo probarlo...

Por otra parte no se como utilizar los hacks... es decir que no entiendo... que es exactamente como lo tengo que hacer...

Algun apuesto caballero o bella dama sería tan amable de echarme una mano??

Muchas gracias chicos, gracias a vosotros aprendo un monton!!!! Espero dentro de poquito estar enseñando yo css :D

Anda que... me iba sin poner los códigos:

http://www.asleepbook.com

HTML:
Código:
<div id="menu">
        <ul id="navi"> 
            <li><a href="index.html">Home<span class="home">Regresemos al inicio... ¡NO HAY QUE PERDER DETALLE!</span></a></li>
			<li><a href="book.html">Portafolio<span class="portfolio">Visita mis proyectos de diseño gráfico y web</span></a></li>
            <li><a href="me.html">Currículum<span class="curriculum">Mi historia... ¡Cónoceme!</span></a></li>
            <li><a href="contacto.php">Contacto<span class="contacto">Te ha gustado mi portfolio? ¡ Contacta conmigo!</span></a></li>
        </ul>

</div><!--Final menu-->
CSS:
Código:
#navi {
	list-style:none;
	margin:0;
	padding:0;
	
	}
	
#navi li{
	float:left;
	margin:0;
	border-right:solid 3px #CCC;
	}

#navi li a{
	width:150px;
	height:100%;
	display:block;
	padding-top:15%;
	padding-bottom:15%;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	font-size:14px;
	text-align:center;
	background-color:#000;
	}
	
#navi li a:hover{
	background-color:#fff;
	color:#000;}
	
	
/*Ocultamos la información que aparece al hacer hover en un boton*/

a span.home {display:none;}
a:hover span.home {
	display:block;
	position:relative;
	top:-12px;
	left:650px;
	width:400px;
	color:white;}
	
a span.portfolio {display:none;}
a:hover span.portfolio {
	display:block;
	position:relative;
	top:-12px;
	left:450px;
	width:400px;
	color:white;}
	
a span.curriculum {display:none;}
a:hover span.curriculum {
	display:block;
	position:relative;
	top:-12px;
	left:250px;
	width:400px;
	color:white;}

a span.contacto {display:none;}
a:hover span.contacto {
	display:block;
	position:relative;
	top:-12px;
	left:155px;
	width:400px;
	color:white;}

Última edición por IruLaN; 08/06/2009 a las 15:37 Razón: Creo que he conseguido solucionarlo... cuando pueda probarlo en ie podré saberlo seguro... :S
  #2 (permalink)  
Antiguo 08/06/2009, 16:51
 
Fecha de Ingreso: mayo-2009
Mensajes: 45
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: De nuevo... problemas con ie...

que usas para hacer el css (que programa)?? por q yo lo que hago es usar topstyle lite 3 para hacer todo eso...y casi simpre lo pongo a q me tire solo CSS q sirva en IE q por lo general sirve en todos los demas
usalo te lo recomiendo (digo, si no lo conoces =P)

chao suerte
  #3 (permalink)  
Antiguo 09/06/2009, 06:28
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: De nuevo... problemas con ie...

Hola, esta herramienta online te puede ser de utilidad: brousershots

No te aconsejo que uses hacks, usa una hoja de estilos aprte para ie donde corriges los errores:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->

Salud!
  #4 (permalink)  
Antiguo 09/06/2009, 10:24
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: De nuevo... problemas con ie...

Aquí una forma más corta de hacerlo, espero te sirva, es solo la parte del menú, lo he probado en IE6, FF3, Chrome 2 y safari.

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. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Menu para Irulan</title>
  5. <style type="text/css">
  6. #menu{width:100%; height:6em; background:#000; position:relative; text-align:center;}
  7. #menu a{display:block; color:#CCC; text-decoration:none;width:120px; height:4em; padding:32px 0 0 0; float:left; border-right:3px solid #999}
  8. #menu a:hover{ display:block; color:#333; background:#CCC;width:120px; height:4em; float:left;}
  9. #menu a:hover span{display:block; color:#FFF; width:200px;}
  10.  
  11. #menu a span {position: absolute;top: 25px;right:10%;display:none;color:#FFF;}
  12. #menu a:focus span{ display:block;}
  13. </head>
  14.  
  15. <div id="menu">
  16.     <a href="#">Home<span>Home</span></a>
  17.     <a href="#">Portafolio<span>visita mis proyectos de dise&ntilde;o grafico y web</span></a>
  18.     <a href="#">Curriculum<span>Mi historia...Conoceme!!!</span></a>
  19.     <a href="#">Contacto<span>Contacto</span></a>
  20. </div>
  21. </body>
  22. </html>

ya nos comentarás.
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 09/06/2009, 14:24
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: De nuevo... problemas con ie...

Muchas gracias por las respuestas... hoy no he tenido tiempo en probar todas esas cositas que me habéis dicho.

En cuanto lo pruebo os digo que tal!!!
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 11:06.