Existe solución para la incopatibilidad de explorer??

**npreloaded** · 04/03/2010, 23:03

Hola, mi nombre es Nicolás y antes que nada queria agradecerles por que gracias a ustedes aprendi a usar html, y estoy aprendiendo a usar php... pero aun no puedo comenzar porque tengo un inconveniente.

Estube haciendo una pagina una semana entera, quedo buena, ordenada y copada.
explorer iba perfecto, con los demas se me veian los divs por cualquier lado.
Estube buscando en este y en varios foros, y no encuentro una solucion adecuada....
la verdad no quiero publicar el codigo al menos que sea muy necesario....
cualquier cosa mando screens.
Queria saber como suelen arreglar este problema uds,
probe con un script re largo que habia que agregar un browse_detection.php, y no funciono...
probe dandole margin y padding 0px al principio...
probe con margin 0px !important y no me paso nada....
la verdad necesito ayuda urgente porque ya hasta google me promociona con adcsense y no puedo tener una pagina decente....

HELP ME JORGENS!

**Foley** · 05/03/2010, 19:01

Para pedir ayuda en estos casos necesitas pasarnos los códigos que usas en tu web. A nosotros una captura de pantalla no nos dice nada, bueno sí, que tal div sale descolocado pero no podemos ver los estilos de ese div que hacen que en X navegador se vea así.

**npreloaded** · 05/03/2010, 19:55

ok Foley, me convenciste :P

http://www.lost.freeiz.com/ este es el link

Aca EL CODIGO DE INDEX

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="<? echo $a_browser_data[0];?>.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="La serie Lost (perdidos) Completa, Comoda, Actualizada">
<META name="keywords" Content="Lost, Perdidos, Desaparecidos, Series, ABC, Temporadas, Sexta, Oceanic">
<link rel= "stylesheet" href="Personalizar/index.css" type="text/css" media= "all">
<title>Lost: Descargable</title>

</head>
<body>

<div id= "pagina">
<div id= "logotipo"><img src= "Media/banner2.jpg" alt= "http://www.lost.freeiz.com/"></div>
<div id= "trailer"><object width="445" height="364"><param name="movie" value="http://www.youtube.com/v/OK61tfQJ-Rk&hl=es_ES&fs=1&color1=0x3a3a3a&color2=0x999999&b order=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OK61tfQJ-Rk&hl=es_ES&fs=1&color1=0x3a3a3a&color2=0x999999&b order=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="307" height="193"></embed></object></div>

<div id= "publicidad">
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id= "menu2"><ul>[*]- Home -[*]- Multimedia -[*]- Personajes -[*]- Descarga! -[/list]</div>
<div id= "contenido2">
<h1> Lost </h1>

<u>La Trama:</u></p>

Lost es una serie estadounidense que narra las aventuras de un grupo de supervivientes a un accidente aéreo ocurrido en una misteriosa isla del Océano Pacífico.</p>

El vuelo 815 de Oceanic Airlines, que iba de Sídney a Los Ángeles, se estrella en una remota isla del Pacífico. Debido a diversos problemas ocurridos durante el vuelo, el avión tuvo que desviar su trayectoria después de haber perdido las comunicaciones. Esto deja a un grupo de supervivientes en una isla en medio de la nada.

Fuente:Wikipedia </p>

<HR WIDTH=100%>
<h2> Cómodo, Compléto, Actualizado </h2>

<u>La Web:</u></p>

Bienvenidos a nuestro sitio web, basado en la exitosa serie Lost.</p>

El sitio web esta organizado de manera Fácil, Rapido y Cómodo. Con un arsenal de información Completo, y los más importante: Actualizado.</p>

<HR WIDTH=100%>

- Web Oficial -</p>
</div>
<div id= "banner"><img src= "Media/banner1.jpg"></div>
<div id="pie"><ul>[*]Mapa del sitio[*]Contacto [/list]</div>

</div>
</body>
</html>

Y ACA EL CODIGO DE ESTILOS

body {background-color: white}
*{margin: 0px; padding: 0px}

p a: {color: black ; font size: 18}
p a:link {color: black ; font-size: 18; text-decoration: none}
p a:visited {color: black ; font-size: 18; text-decoration: none}
p a:hover {color: grey ; font-size: 18; text-decoration: underline}
p a:actived {color: black ; font-size: 18; text-decoration: none}

#menu a: {color: black ; font size: 18; text-decoration: none}
#menu a:link {color: black ; font-size: 18; text-decoration: none}
#menu a:visited {color: black ; font-size: 18; text-decoration: none}
#menu a:hover {color: grey ; font-size: 18; text-decoration: none}
#menu a:actived {color: black ; font-size: 18; text-decoration: none}

#menupersonajes a: {color: black ; font size: 12; text-decoration: none}
#menupersonajes a:link {color: black ; font-size: 12; text-decoration: none}
#menupersonajes a:visited {color: black ; font-size: 12; text-decoration: none}
#menupersonajes a:hover {color: grey ; font-size: 12; text-decoration: none}
#menupersonajes a:actived {color: black ; font-size: 12; text-decoration: none}

#menumultimedia a: {color: black ; font size: 18; text-decoration: none}
#menumultimedia a:link {color: black ; font-size: 18; text-decoration: none}
#menumultimedia a:visited {color: black ; font-size: 18; text-decoration: none}
#menumultimedia a:hover {color: grey ; font-size: 18; text-decoration: none}
#menumultimedia a:actived {color: black ; font-size: 18; text-decoration: none}

#menu2 a: {color: black ; font size: 22; text-decoration: none; font-weight: bold}
#menu2 a:link {color: black ; font-size: 22; text-decoration: none; font-weight: bold}
#menu2 a:visited {color: black ; font-size: 22; text-decoration: none; font-weight: bold}
#menu2 a:hover {color: grey ; font-size: 22; text-decoration: none; font-weight: bold}
#menu2 a:actived {color: black ; font-size: 22; text-decoration: none; font-weight: bold}

#pie a: {color: #D0E7F2 ; font size: 16; text-decoration: none; font-weight: bold}
#pie a:link {color: #D0E7F2 ; font-size: 16; text-decoration: none; font-weight: bold}
#pie a:visited {color: #D0E7F2 ; font-size: 16; text-decoration: none; font-weight: bold}
#pie a:hover {color: #ADC4CE ; font-size: 16; text-decoration: none; font-weight: bold}
#pie a:actived {color: #D0E7F2 ; font-size: 16; text-decoration: none; font-weight: bold}

.centrado {text-algin: center}
.centrado2 {text-align: center; font-size: 20 }
.centrado3 {text-align: center; font-size: 15px }
.left {text-align:left}
.left2 {text-align:left; font-size:15px; color: black}
.justify {text-align: justify}
.justify2 {text-align: justify; font-size: 15px; margin-left: 5px; margin-right: 8px}
.centrado3 {text-aling: center; color:#D0E7F2}
.centrado4 {text-aling: center; font-size: 20px}
.centrado5 {text-aling: center; font-size: 18px}
.centradoimagen {text-aling: center}
#pie {float:right; background-image: url(../Media/banner3.jpg); padding-right: 40px}
#pie li {float= right; margin-left: 20px}
p {font-size: 16px; text-align= "center"}
#pagina {width: 806px; height: 700px; margin-left: 350px; border:3px solid black; background-color:#D0E7F2}
#logotipo {height: 194px; width: 380px; float:left; border-right: 2px solid black; border-bottom: 2px solid black}
#trailer {float: right; border-left: 2px solid black; border-bottom: 2px solid black}
#publicidad {background-color:#ADC4CE; width: 160px; height: 520px; float: right; border-left: 2px solid black}
#menu {background-color:#ADC4CE; border-right: 2px solid black;border-bottom: 2px solid black; float: left; width: 140px; height: 468px}
#menu li {padding: 12px; list-style:none; margin-top: 14px}
#menumultimedia {background-color:#ADC4CE; float: left; width: 140px; height: 468px;border-bottom: 2px solid black;border-right: 2px solid black}
#menumultimedia li {padding: 12px; list-style:none; margin-top: 8px}
#menupersonajes {background-color:#ADC4CE; border-right: 2px solid black; float: left; width: 140px; height: 468px}
#menupersonajes li {padding-left: 10px; list-style:none; margin-top: 5px}
#menu2 {float: left; background-color:#ADC4CE ; border: 2px solid black;width: 622px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px}
#menu2 li {float: left; margin: 15px}
#contenido {background-color:#D0E7F2; height: 468px; width: 500px; float:left; border: 2px solid black}
#contenido2 {background-color:#D0E7F2; height: 468px; width: 640px; float:left}
#contenido h1 {text-align: center}
#contenido h2 {text-align: center}
#contenido2 h1 {text-align: center}
#contenido2 h2 {text-align: center}
#banner {[border-top: 2px solid black]; width: 100%; border-right: 2px solid black}
[/quote]

**jmtwl** · 05/03/2010, 19:57

Con qué IE lo estás probando? IE 6, IE 7 o IE 8?

**npreloaded** · 05/03/2010, 20:03

con el 8 x? se ve mal en los anteriores?

**jmtwl** · 05/03/2010, 20:06

Iniciado por npreloaded

con el 8 x? se ve mal en los anteriores?

No tengo en idea. En Firefox, el footer se ve mal...
Mira: http://img692.imageshack.us/img692/2870/cctwa.jpg

**npreloaded** · 05/03/2010, 20:20

si, pero como se arregla eso ?

mira, si al menu2, en la hoja de estilo le pongo de width 620px, el contenido y el texto encajan... pero me lo desencaja para ie...
asi que .. que onda tengo que elejir ?
y lo del banner de abajo de lost, no tengo idea como repararlo

**Foley** · 06/03/2010, 08:35

lol, la web se ve mal en firefox, en ie6, en ie7 y en el 8 no pude mirarlo pero me imagino que mal también.

Te lo miraré hoy a la tarde pero pienso que lo primero que hay que hacer es centrar bien la web en conjunto porque siempre sale muy a la derecha.

Saludos

**Foley** · 06/03/2010, 15:24

Acabo de ver algunos errores, yo te recomiendo que mires todo tu css porque posiblemente tienes más fallos

Código:

#pie li {float= right; margin-left: 20px}
p {font-size: 16px; text-align= "center"}

Código:

#pie li {float:right; margin-left: 20px}
p {font-size: 16px; text-align:center}

Prueba a declarar en el css el div página justo después de:

Código:

p a:actived {color: black ; font-size: 18; text-decoration: none}

No sé si el orden influye, nunca lo comprobé.

Sácale el margin-left al div pagina para que se te vea centrada.

De momento haz todo eso ;)

**npreloaded** · 06/03/2010, 19:03

Foley, ante todo gracias por la paciencia...

Remplaze el "=" por :. No hubo ningun cambio... es raro que el validator no me lo haya detectado no ? :S

bueno, cambie el orden del div pagina.. y tampoco ningun cambio.

y por ultimo le saque el margen.. pero no me queda centrado, me queda pegado a la izquierda... justamente por eso le mande el margin-left.. para que no quede pegado a la izq..

Buenoo ayuda :)

**Foley** · 07/03/2010, 22:58

Solución existe aunque no sé yo si te valdría la pena ir haciendo la web desde 0 paso a paso fijándote en cómo se van viendo los diferentes cambios que le vas haciendo hasta tener el diseño que quieres en los diferentes navegadores.

Tu diséñala para firefox y luego ya arreglarás los problemas del ie con hacks css.

Te digo todo esto porque yo siempre englobo toda la web dentro de un div (en tu caso se llama pagina) y me queda centrado. Te paso lo que yo uso:

Código:

#container {background-image: url();margin: 0 auto;width:900px;border-style:solid;border-color:#000;border-width:1px;}

Con eso me queda centrado, con unos espacios más grandes o más pequeños a ambos lados según las resoluciones de los visitantes.

Saludos ;)

**npreloaded** · 08/03/2010, 01:34

ok.. entonces tengo que hacer todo de vuelta ? :S

bueno la cosa es que... si yo quiero quede en un espacio determinado...
como hago para que me acepte el mismo margin ie, y firefox ?
porque.. si me queda bien para uno .. me queda mal para otro...
mi pregunta es.. hay codigos que sean para solucionar esto?
vi por ahy, algunos que identificaban el navegador que el usuario utilizaba para redireccionarlo al estilo css del explorer o firefox.. pero tenes que hacer 2.... pero borraron la web donde estaba y no lo encontre :S
despues lei algo de que en firefox.. a los margenes habia que agregarle "!important" y tampoco funciono...
algun codigo excepcional ?

**Foley** · 11/03/2010, 14:10

Eso que comentas son hacks css, yo los uso.

En http://www.webtaller.com/construccio...de-IE-html.php explican su uso, básicamente se trata de poner el código que indica que tal hoja de estilos es para tal navegador en el head de tu web.

Te paso un ejemplo:

Código:

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

Al tener hojas de estilo específicas para ie por ejemplo pues puedes darle los márgenes, paddings, etc que te hagan falta en ese navegador.

Un saludo ;)

**npreloaded** · 11/03/2010, 21:37

ok osea si yo kiero que el usuario que tenga explorer 6, al entrar a mi pagina utilize el estilo de explorer 6..(ya configurado por mi ovbio).. le pongo esto:



donde lte IE6 le dice que a cualquier explorer menor o igual a 6..
y css/fix-ie6.css, le indica a la hoja de estilo que tiene que dirijirse...

no ?

osea deberia tener una de estas

por cada explorer? 6,7,8 ?
y para firefox?

**npreloaded** · 12/03/2010, 02:52

probe poniendo este codigo en index...



y este estaba debajo...

<link rel= "stylesheet" href="Personalizar/index.css" type="text/css" media= "all">

obviamente me toma el de abajo, que es general... si borro este, me toma el que puse arriba (ie

.. ahora.. con esto puedo crear un estilo para ie7, ie8 .. excelente... pero para firefox? para opera?