IE - Deterioro de diseño...

locoxchacho · #1 (**permalink**) 02/02/2009, 22:31

Buenas... cuando por fin crei que habia terminado el diseño, luego de mucho maquetar, y probar efectos con JS que no me salian, me enfrento a un enemigo comun de todos nosotros: IE.

SI. En todos mis navegadores, salvo en IE, se ve bien la siguiente pagina:

http://www.proyectoshuerto.com.ar/nu...dad/final.html

Ahora, los que tiene IE, podran ver que el menu se va para arriba, en vez de ser vertical, que el div contenedor blanco se baja, que el div oculto, no se oculta... en fin, un sinfin de errores... aca les dejo el codigo para ver si alguien puede ayudarme. llevo horas tratando de ver el error, pero no puedo!

espero que puedan ayudarme!!

css

Código:

body {
	font-family:Georgia; font-size: medium; background: #FFE337; color:#838383
	}
div#wrap {margin:auto; width: 800px; background:#000000; height:600px;}
div#contacto {padding: 25px 65px 0 0; text-align:right; background-color:transparent}	
div#logo {width:auto; margin:0 0 50px 40px; }
div#contenido {padding:0 40px 40px 40px; overflow:auto;}
div#menu {float: left; width:160px;}
div#frame {margin:0 0 0 190px; }
div#framesup{ margin:0 0 5px 0;}
div#frameinf{background-color:#ffffff; height:380px; padding:10px}

ul#nav{ list-style-type:none;}


#oculto {display:none}

/* NOSOTROS */
.nosotros img{border:0; outline:0}
.nosotros {background-image: url('nosotros_menu.jpg'); background-repeat:no-repeat; width:160px; height:24px; float:left;display: inline;}
.nosotros a{float:left; text-decoration: none; width:160px; height:24px;}
.nosotros a:hover,.nosotros a:active,.nosotros a:focus, .currentnos{background-image: url('nosotros_menu_r.jpg');}

HTML

Código:

	<div id="contenido">
		<div id="menu">
			<ul>
				<li><div class="nosotros"><a href="opcion1.html" target="frame" onclick="$('#oculto').slideUp('normal')"></a></div></li>
				<li><div class="nosotros"><a href="javascript:void(0)" onclick="$('#oculto').slideDown('normal')"></a></div></li>
				<div id="oculto">
				<li><a href="opcion2.html" target="frame">Uno</a></li><li>Dos</li><li>Tres</li>
				</div>
				<li><div class="nosotros"><a href="opcion3.html" target="frame" onclick="$('#oculto').slideUp('normal')"></a></div></li>
			</ul>
		</div>
		<div id="frame">
			<div id="framesup"><img src="nosotros.jpg"/></div>
			<div id="frameinf">
			<iframe marginheight="0" frameborder="0" src="opcion1.html" name="frame" scrolling="no"></iframe>
			</div>
		</div>
	</div>

Gracias nuevamente por la ayuda, les estare eternamente agradecidos!
Un saludo,

Pablo.

locoxchacho · #2 (**permalink**) 03/02/2009, 07:18

nadie me puede ayudar?? :S

gracias!!

Dalvenjha · #3 (**permalink**) 03/02/2009, 08:18

Estás usando una librería como Jquery no? para los efectos en JS.

Tendría que verse todo el código, no tengo ie6 aqui, si no se podría dar una mirada. Veré que puedo hacer desde aqui amigo.

locoxchacho · #4 (**permalink**) 03/02/2009, 08:25

si, utilizo jquery, exactamente...

y todo el codigo es el siguiente:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<title>Sophian Web Site</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>



<script type="text/javascript">
var visto = null;
function mostrar(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==visto) ? 'none' : 'block';
  if (visto != null)
    visto.style.display = 'none';
  visto = (obj==visto) ? null : obj;
}
</script>


</head>

<body onLoad="aggEvento()">
<div id="wrap">
	<div id="contacto"><img src="contacto.jpg"/></div>
	<div id="logo"><img src="logo.jpg"/></div>
	<div id="contenido">
		<div id="menu">
			<ul>
				<li><div class="nosotros"><a href="opcion1.html" target="frame" onclick="$('#oculto').slideUp('normal')"></a></div></li>
				<div id="1"></div>
				<li><div class="nosotros"><a href="javascript:void(0)" onclick="$('#oculto').slideDown('normal')"></a></div></li>
				<div id="oculto" class="oculto">
				<li><a href="opcion2.html" target="frame">Uno</a></li><li>Dos</li><li>Tres</li>
				</div>
				<li><div class="nosotros"><a href="opcion3.html" target="frame" onclick="$('#oculto').slideUp('normal')"></a></div></li>
				<div id="3"></div>
			</ul>
		</div>
		<div id="frame">
			<div id="framesup"><img src="nosotros.jpg"/></div>
			<div id="frameinf">
			<iframe marginheight="0" frameborder="0" src="opcion1.html" name="frame" scrolling="no"></iframe>
			</div>
		</div>
	</div>
</div>

</body>
</html>

y el css

Código:

* {margin:0; padding: 0;}
body {
	font-family:Georgia; font-size: medium; background: #FFE337; color:#838383
	}
div#wrap {margin:auto; width: 800px; background:#000000; height:600px;}
div#contacto {padding: 25px 65px 0 0; text-align:right; background-color:transparent}	
div#logo {width:auto; margin:0 0 50px 40px; }
div#contenido {padding:0 40px 40px 40px; overflow:auto;}
div#menu {float: left; width:160px;}
div#frame {margin:0 0 0 190px; }
div#framesup{ margin:0 0 5px 0;}
div#frameinf{background-color:#ffffff; height:380px; padding:10px}

ul#nav{ list-style-type:none;}


#oculto {display:none}

/* NOSOTROS */
.nosotros img{border:o}
.nosotros {background-image: url('nosotros_menu.jpg'); background-repeat:no-repeat; width:160px; height:24px; float:left;display: inline;}
.nosotros a{float:left; text-decoration: none; width:160px; height:24px;}
.nosotros a:hover,.nosotros a:active,.nosotros a:focus, .currentnos{background-image: url('nosotros_menu_r.jpg');}

Un saludo, espero que me puedas ayudar! Muchas gracias!!

Pablo

Dalvenjha · #5 (**permalink**) 03/02/2009, 09:34

Uhmmmm no tengo ie6 aqui, asi que no puedo ver bien como es la nota. No veo tampoco que le hayas dado estilos especificos a cada uno, tampoco veo la necesidad de crear un div para cada imagen, cuando basta meterlas en los li, y tampoco veo la necesidad del div vacío que metes flotando en la lista, sin que esté dentro de un li. Tu problema no lo explicas bien, desde donde yo veo, debes quitarle el list-style a la lista, y darle a oculto un oveflow:hidden, supongo que el jquery lo que está haciendo es hacer crecer el tamaño del div que contiene esas opciones. Además en tu div oculto haces una lista, pero ni la comienzas ni la terminas. Hay serios errores de maquetación.

Dale una revisada completa amigo.

locoxchacho · #6 (**permalink**) 03/02/2009, 11:03

lo del div lo puese porque al ponerlo en li, no se me visualizaba correctamente el ancho.

por otro lado, debo darle varias revisadas, ahora mismo me estoy dando cuenta de algunos errores, y algunas cosas inecesarias. Pero aun con cosas inecesarias, tendria que funcionar, o no?? Dice que hacieno lo ultimo que me propones se arreglara?? No estoy en casa, asique no puedo probarlo, pero agradezco tu ayuda. En serio.

En cuanto lo prueba, te doy aviso de si se me soluciono.

Gracias!

Pablo.

locoxchacho · #7 (**permalink**) 03/02/2009, 21:30

Estimado amigo Dalvenjha,

Le di una revisada como dijiste, y este es el resultado (bastante mejor)

http://www.proyectoshuerto.com.ar/nu...dad/index.html

Los unicos problemas que encuentro en IE es que, en el submenu portfolio, me separa las imagenes, cuando tendria que estar juntos (comos se ve en Opera o Firefox). Y estos son <li>, asique no tendrian por que separarse... algun comentario al respecto??

Y despues, la otra cosa que encontre en Firefox es que al hacer clic en cada li, por ende, link, se me queda marcado el recuadro del vinculo. Solo en Firefox. Es posible sacar eso???

Espero que me puedas ayudar, un saludo!!

Pablo.

locoxchacho · #8 (**permalink**) 03/02/2009, 21:33

ah, me olvidaba...

en una parte del frame que uso, preciso que el body sea transparente. Para ello utilize backgrounnd-color:transparent. Ahora, el Firefox y Opera lo acepta, pero IE no, lo deja en blanco el body del iframe.

Hay alguna hack, forma de solucionar esto??? Muchas gracias nuevamente!!

Pablo.

Dalvenjha · #9 (**permalink**) 03/02/2009, 22:16

Para tu problema de las imágenes, intenta dándole tamaño explicito a cada una, aún asi el ie siempre tendrá problemas con ello, para la transparencia de iframe en internet explorer ve el siguiente link:

http://www.cristalab.com/tips/como-p...frame-c57188l/

locoxchacho · #10 (**permalink**) 04/02/2009, 06:51

Gracias, amigo!!

Cita:

Y despues, la otra cosa que encontre en Firefox es que al hacer clic en cada li, por ende, link, se me queda marcado el recuadro del vinculo. Solo en Firefox. Es posible sacar eso???

Con respecto a eso, sabes como hacerlo??

Cita:

Para tu problema de las imágenes, intenta dándole tamaño explicito a cada una, aún asi el ie siempre tendrá problemas con ello

Con tamaño explicito a cada una te refieres a...?? Yo a cada <li> le di el tamaño exacto de la imagen que contenian (que varia, por cierto). Aun asi, en IE, se separan. Ese es el problema que siempre voy a tener con Explorer? O entendi mal??

Y si quieres, de paso.. que opinas de la solucion que le di? En otro tema estabamos debatiendo con mikmoro como resolverlo.. que piensas al respecto? Y de la pagina en general??

MUCHAS GRACIAS, AMIGO, NUEVAMENTE!!

Pablo.

Dalvenjha · #11 (**permalink**) 04/02/2009, 08:09

Dale el tamaño a los elementos img para que asi ocupen el espacio que deben, pero eso no asegura mucho, sería mejor que uses de fondo las imágenes.

Lo otro se soluciona, poniendo:

a:hover, a:focus, a:active, a:visited { outline:none;}

locoxchacho · #12 (**permalink**) 04/02/2009, 08:33

si, las imagenes estan de fondo en la las li.. y los li tienen el tamaño de cada imagen por separado.. asique, no tendrian por que separarse, noo???

esto se me esta complicando... maldito IE... pq en el resto no se separa..

y dp.. al hacer clic en una vinculo, queda como activo, pero al hacer clic en el frame con el contenido, se desactiva... es posible arreglar eso???

gracias, un saludo!!

pablo.

Dalvenjha · #13 (**permalink**) 04/02/2009, 09:01

Que??? que iframe, que active.. me rayas tío, ordena un poco tus ideas y ponlas en un solo post.

-.-, ya te dije en el otro post, usa ajax, sería mejor.

locoxchacho · #14 (**permalink**) 04/02/2009, 09:41

si, pero si no se como usar ajax??? o que elemnto de ajax usar??

no hay una forma directa de que la clase se quede activa?? gracias!