De nuevo... problemas con ie...

IruLaN · #1 (**permalink**) 08/06/2009, 14:13

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;}

sattua · #2 (**permalink**) 08/06/2009, 15:51

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

AlbertoGarcia · #3 (**permalink**) 09/06/2009, 05:28

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:



Salud!

willyfc · #4 (**permalink**) 09/06/2009, 09:24

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu para Irulan</title>
<style type="text/css">
#menu{width:100%; height:6em; background:#000; position:relative; text-align:center;}
#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}
#menu a:hover{ display:block; color:#333; background:#CCC;width:120px; height:4em; float:left;}
#menu a:hover span{display:block; color:#FFF; width:200px;}
 
#menu a span {position: absolute;top: 25px;right:10%;display:none;color:#FFF;}
#menu a:focus span{ display:block;}
</style>
</head>
 
<body>
<div id="menu">
    <a href="#">Home<span>Home</span></a>
    <a href="#">Portafolio<span>visita mis proyectos de dise&ntilde;o grafico y web</span></a>
    <a href="#">Curriculum<span>Mi historia...Conoceme!!!</span></a>
    <a href="#">Contacto<span>Contacto</span></a>
</div>
</body>
</html>

ya nos comentarás.

IruLaN · #5 (**permalink**) 09/06/2009, 13:24

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!!!