Ayuda:- .::Graves Problemas con IE Y Firefox::.

skiletmk · #1 (**permalink**) 05/08/2008, 19:52

Bueno la verdad no entiendo, el codigo parece estar bien pero solo funciona en internet explorer y en firefox no.

Como pueden ver.. yo lo que hize es dentro de una tabla que esta en centro, llamar un div de color azul.. en explorer se ve bien y en firefox no..

Aca les dejo el Codigo para que ustedes mismo hagan una prueba..

Código PHP:

  <!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=utf-8" /> 
<title>en Internet Explorer Funciona - en Firefox no</title> 
<style type="text/css"> 
 
.tabla { 
    position:absolute; 
    left:25%; 
    /*Medidas de tabla*/ 
    width:800px; 
    height:600px; 
    border:1px solid #000; 
} 
 
/* Aca va un Div ID */ 
 
#gris { 
    position:absolute; 
    left:0px; 
    top:0px; 
    /* medidas del div visible y color */ 
    width:100px; 
    height:100px; 
    background:#000066; 
} 
 
 
</style> 
</head> 
 
<body> 
<table class="tabla"> 
    <tr> 
        <th scope="col"> 
            <div id="gris">Rarisimo No?</div> 
        </th> 
    </tr> 
</table> 
</body> 
</html>

jamesjara · #2 (**permalink**) 05/08/2008, 20:05

me pareces que estas metiendo un DIV dentro de una tabla no tiene sentido

skiletmk · #3 (**permalink**) 05/08/2008, 20:26

lo que pasa yo meti el div dentro una tabla para poder centrar los divs que llame hay alguna manera para centrar el div?.. y que funcione con otros divs en relacion de position:absolute left:px tantos?

y lo segundo porque en internet explorer funciona y en firefox no?

acoevil · #4 (**permalink**) 05/08/2008, 20:49

hola que tal sabes manejar css?? es una manera exelente para maquetear tu pagina web

skiletmk · #5 (**permalink**) 05/08/2008, 21:05

Cita:

Iniciado por acoevil

hola que tal sabes manejar css?? es una manera exelente para maquetear tu pagina web

y me estudie todo el css de 219 paginas y ahora lo quiero poner en practica. y ya me encontre con mi primer problema.

acoevil · #6 (**permalink**) 05/08/2008, 23:19

hola quetal pues yo hago eso de esta manera
CODIGO CSS

Primero ps le colocoque color background... despues le coloque width en porcentaje para que se ajuste a la resolucion de la persona asi = con el height y el margin que es el exterior le coloco cualquier porcentaje y le doi auto de esta manera me centra esa capa donde yo quiera
de igual manera con el sgte contendor. espero te sirva. LLEVO 15 DIAS EN CSS :) POR ESTA RAZON SI CONOCES MEJORES METODOS PUEDES DECIRMELOS
#contenedor1
{
background:#666666;
width:80%;
height:100%;
margin:15px auto;
}
#contenedor233
{
background:#fff;
width:60%;
height:100%;
margin:10px auto;
}

CODIGO HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="ayudas.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenedor1"><div id="contenedor233">

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

skiletmk · #7 (**permalink**) 06/08/2008, 12:03

Cita:

Iniciado por acoevil

hola quetal pues yo hago eso de esta manera
CODIGO CSS

Primero ps le colocoque color background... despues le coloque width en porcentaje para que se ajuste a la resolucion de la persona asi = con el height y el margin que es el exterior le coloco cualquier porcentaje y le doi auto de esta manera me centra esa capa donde yo quiera
de igual manera con el sgte contendor. espero te sirva. LLEVO 15 DIAS EN CSS :) POR ESTA RAZON SI CONOCES MEJORES METODOS PUEDES DECIRMELOS
#contenedor1
{
background:#666666;
width:80%;
height:100%;
margin:15px auto;
}
#contenedor233
{
background:#fff;
width:60%;
height:100%;
margin:10px auto;
}

CODIGO HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="ayudas.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenedor1"><div id="contenedor233">

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

Hola como andas. Esto de div los conosia igual gracias de paso te doy un consejo si queres que este centrado tenes que hacer esto

Código PHP:

  <html>
<style type="text/css">
/* este div lo que hace en centrar*/
#divcentrado
{
background:#666666;
width:800px;
height:600px;
/* Aca va la posision */
position:absolute;
left:25%;
background:#999999;
}

/* entonses si o si en los otros divs que van a ir al divcentrado tenes que colocarle position:absolite;*/


#prueba1 {
width:50px;
height:50px;

position:absolute;
left:20px;
background:#FF0033;
}

#prueba2 {
width:50px;
height:50px;

position:absolute;
left:100px;
top:100px;
background:#993300;
}
</style>
<body>
<div id="divcentrado">

<!--aca van los divs que van dentro del divcentrado-->

<div id="prueba1">Hola 1</div>
<div id="prueba2">hola 2</div>

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

bueno espero que te sirve, yo todavia no puedo intender como miercoles hacer que la tabla funcione. con los divs en centrado

Mikmoro · #8 (**permalink**) 06/08/2008, 12:18

Pues no entiendo muy bien qué es lo que quieres conseguir, pero esto igual te orienta:

Cita:

<!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=utf-8" />
<title>en Internet Explorer Funciona - en Firefox no</title>
<style type="text/css">
.tabla {
width:800px;
height:600px;
border:1px solid #000;
margin: 0 auto;
}
#gris {
width:100px;
height:100px;
background:#000066;
}

</style>
</head>

<body>
<table class="tabla">
<tr>
<th scope="col" align="center">
<div id="gris">Rarisimo No?</div>
</th>
</tr>
</table>
</body>
</html>

almagropaco_ · #9 (**permalink**) 06/08/2008, 12:26

podrias usar un frame, que no se si lograria que se vea bien..

ahora que pienso eso mismo tengo yo, pero haciendo un frame no use el div y use el table nomas.. ahora me fijo si se me ve bien en IE xD

diegoy2k · #10 (**permalink**) 06/08/2008, 12:59

No entiendo bien lo que queres hacer!!!
Lo que si no es muy bueno usar absolute!!!, esto hace que el div se ancle en una posicion dada, y esto no es muy bueno tengo entendido!.

Por lo pronto para centrar un div podes usar lo siguiente!!.
IE responde a align:center esto va en el Body, para FireFox usa margin: xpx auto xpx auto, esto va en el div que quieras centrar, esto y tambien se propaga a los div que esten contenidos dentro de otros div!!!
Acordate que el margin en los div van en sentido de las agujas del reloj!!
Este te sirva!!

K-Yezaad · #11 (**permalink**) 06/08/2008, 13:53

Si lo que quieres es centrar el div:

Cita:

#gris {
position:absolute;
left:50%;
top:50%;
/* medidas del div visible y color */
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
background:#000066;
}

Y ya no necesitas meterlo en una tabla.

skiletmk · #12 (**permalink**) 07/08/2008, 17:46

Hola yo otra vez..

Bueno aca les dejo el codigo,

Para que puedan intender a lo que voy, yo tengo divs, y uso position:absolute, para acomodar los divs en diferentes lados. lo podran ver en el codigo.

Fijense a lo que voy.

Gracias por todo y por responder

Código PHP:

  <html>

<head>

<title>Colores</title>

<style type="text/css">

#cabezera {
    width:800px;
    height:600px;
    border:0px;
    position:absolute;
    left:25&#37;;
    top:0px;
    }
    
#hostingr1c1 {
    position:absolute;
    left:0px;
    top:0px;
    width:334px;
    height:80px;
    z-index:1;
    visibility:visible;
    background:#003300;

}
#hostingr1c6 {
    position:absolute;
    left:334px;
    top:0px;
    width:277px;
    height:80px;
    z-index:2;
    visibility:visible;
    background:#003366;
}
#hostingr1c10 {
    position:absolute;
    left:611px;
    top:0px;
    width:189px;
    height:80px;
    z-index:3;
    visibility:visible;
    background:#0099FF;
}
#hostingr2c1 {
    position:absolute;
    left:0px;
    top:80px;
    width:800px;
    height:10px;
    z-index:4;
    visibility:visible;
    background:#999900;
}
#hostingr3c1 {
    position:absolute;
    left:0px;
    top:90px;
    width:191px;
    height:28px;
    z-index:5;
    visibility:visible;
    background:#CC6666;
}
#hostingr3c3 {
    position:absolute;
    left:191px;
    top:90px;
    width:101px;
    height:28px;
    z-index:6;
    visibility:visible;
    background:#FF3333;
}
#hostingr3c5 {
    position:absolute;
    left:292px;
    top:90px;
    width:91px;
    height:28px;
    z-index:7;
    visibility:visible;
    background:#CC3399;
}
#hostingr3c7 {
    position:absolute;
    left:383px;
    top:90px;
    width:93px;
    height:28px;
    z-index:8;
    visibility:visible;
    background:#6666FF;
}
#hostingr3c8 {
    position:absolute;
    left:476px;
    top:90px;
    width:115px;
    height:28px;
    z-index:9;
    visibility:visible;
    background:#663333;
}
#hostingr3c9 {
    position:absolute;
    left:591px;
    top:90px;
    width:209px;
    height:28px;
    z-index:10;
    visibility:visible;
    background:#9966CC;
}
#hostingr4c1 {
    position:absolute;
    left:0px;
    top:118px;
    width:800px;
    height:57px;
    z-index:11;
    visibility:visible;
    background:#FFFF00;
}
#hostingr5c1 {
    position:absolute;
    left:0px;
    top:175px;
    width:271px;
    height:105px;
    z-index:12;
    visibility:visible;
    background:#6600FF;
}
#hostingr5c4 {
    position:absolute;
    left:271px;
    top:175px;
    width:529px;
    height:371px;
    z-index:13;
    visibility:visible;
    background:#FF3399;
}
#hostingr6c1 {
    position:absolute;
    left:0px;
    top:280px;
    width:142px;
    height:33px;
    z-index:14;
    visibility:visible;
    background:#CC99FF;
}
#hostingr6c2 {
    position:absolute;
    left:142px;
    top:280px;
    width:129px;
    height:33px;
    z-index:15;
    visibility:visible;
    background:#66FFFF;
}
#hostingr7c1 {
    position:absolute;
    left:0px;
    top:313px;
    width:271px;
    height:108px;
    z-index:16;
    visibility:visible;
    background:#9900CC;
}
#hostingr8c1 {
    position:absolute;
    left:0px;
    top:421px;
    width:142px;
    height:28px;
    z-index:17;
    visibility:visible;
    background:#3399CC;
}
#hostingr8c2 {
    position:absolute;
    left:142px;
    top:421px;
    width:129px;
    height:28px;
    z-index:18;
    visibility:visible;
    background:#996699;

#hostingr9c1 {
    position:absolute;
    left:0px;
    top:449px;
    width:271px;
    height:111px;
    z-index:19;
    visibility:visible;
    background:#CC3300;
}
#hostingr10c4 {
    position:absolute;
    left:271px;
    top:546px;
    width:529px;
    height:54px;
    z-index:20;
    visibility:visible;
    background:#CC9966;
}
#hostingr11c1 {
    position:absolute;
    left:0px;
    top:560px;
    width:142px;
    height:40px;
    z-index:21;
    visibility:visible;
    background:#3399FF;
}
#hostingr11c2 {
    position:absolute;
    left:142px;
    top:560px;
    width:129px;
    height:40px;
    z-index:22;
    visibility:visible;
    background:#3366CC;
}
</style>
</head>
<body bgcolor="#ffffff">

<div id="cabezera">
<!-- Empieza aca la cabezera -->

<div id="hostingr1c1"></div>

<div id="hostingr1c6"></div>

<div id="hostingr1c10"></div>

<div id="hostingr2c1"></div>

<div id="hostingr3c1"></div>

<div id="hostingr3c3"></div>

<div id="hostingr3c5"></div>

<div id="hostingr3c7"></div>

<div id="hostingr3c8"></div>

<a href="index.htm"><div id="hostingr3c9"></div></a>

<div id="hostingr4c1"></div>

<div id="hostingr5c1"></div>

<div id="hostingr5c4"></div>

<div id="hostingr6c1"></div>

<div id="hostingr6c2"></div>

<div id="hostingr7c1"></div>

<div id="hostingr8c1"></div>

<div id="hostingr8c2"></div>

<div id="hostingr9c1"></div>

<div id="hostingr10c4"></div>

<div id="hostingr11c1"></div>

<div id="hostingr11c2"></div>

<!-- Termina aca la cabezera -->
</div>

</body>
</html>

Mikmoro · #13 (**permalink**) 08/08/2008, 02:29

Pues ahora sí que me has desconcertado: primero usabas una tabla, yo te puse un ejemplo para centrarlo todo que funciona perfectamente en IE y FF, que al parecer no has mirado.

Ahora no usas la tabla, y usas todo divs posicionados absolutamente.

No sé, la verdad. Si lo que quieres es centrar todo ese bloque, lo primero que debes hacer es añadir un DOCTYPE a la cabecera

Cita:

<!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>
<title>Colores</title>
etc...

Y después cambia el selector de la cabecera por este otro:

#cabezera {
width:800px;
height:600px;
border:0px;
margin: 0 auto;
position: relative;
}

Si haces eso, todo quedará centrado tanto en FF como en IE6 y 7, Opera, etc.

Ejemplo

skiletmk · #14 (**permalink**) 10/08/2008, 09:55

Cita:

Iniciado por Mikmoro

Pues ahora sí que me has desconcertado: primero usabas una tabla, yo te puse un ejemplo para centrarlo todo que funciona perfectamente en IE y FF, que al parecer no has mirado.

Ahora no usas la tabla, y usas todo divs posicionados absolutamente.

No sé, la verdad. Si lo que quieres es centrar todo ese bloque, lo primero que debes hacer es añadir un DOCTYPE a la cabecera

Y después cambia el selector de la cabecera por este otro:

#cabezera {
width:800px;
height:600px;
border:0px;
margin: 0 auto;
position: relative;
}

Si haces eso, todo quedará centrado tanto en FF como en IE6 y 7, Opera, etc.

Bonisimo Gracias ahora si funciona,

Si la tabla la mire, no me funciono,

otra pregunte yo le pongo top:0px; o margin-top:0px; y no me funciona?

Mikmoro · #15 (**permalink**) 11/08/2008, 00:34

Cita:

Iniciado por skiletmk

Bonisimo Gracias ahora si funciona,
otra pregunte yo le pongo top:0px; o margin-top:0px; y no me funciona?

No entiendo la pregunta.

jorgelinak · #16 (**permalink**) 11/08/2008, 02:19

Hola chicos,

visite el tema, y les queria consultar un problema que tengo con firefox e internet explorer. El firefox version 2.0.0.16 e internet explorer 6.

Tengo un template sencillo en html, que me funciona en firefox pero no arranca en internet explorer, es decir se queda como si estuviera cargando la pagina pero nunca la termina de cargar.
Despues de analizar el template, llegue al resultado de que el archivo css no tiene problemas, pero si el index.htm ya que si:
elimino esta linea del index.htm

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"/>

el explorer me carga la pagina.
El firefox anda independientemente le deje o le saque la linea.

transcribo el contexto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="header">
<img src="images/logo.gif" alt="" width="239" height="71" />
<div class="lang">

..........

Ademas tambien me pasa esto
que si a la linea la escribo con una comilla delante de charset=
me anda la pagina en los dos browsers.
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-5">

pero la verdad no se si realmente estan interpretando lo que tienen que interpretar o al poner la comilla se esta haciendo, de alguna manera, que saltee lo que sigue de charset....

por ultimo, tambien encontre navegando mucho, esta sentencia
<meta Content-type: text/html;charset=iso-8859-5>

y la probe y me carga la pagina en los dos browsers.

conclusion, qe es lo que paso?

cual de las dos sentencias es la mas adecuada para declarar el charset.

1: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
2: <meta Content-type: text/html;charset=iso-8859-5>

porque
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-5">
no anda en explorer 6?

Queria aclarar que recien me inicio en el tema html por lo que cualquier ayuda o respuesta lo mas explayada posible no tiene sobras para mi.
Y que el template lo baje de paginas que ofrecen templates gratis.

Desde ya muchas gracias.

Sldos.

Mikmoro · #17 (**permalink**) 11/08/2008, 02:57

Seguramente es que el juego de caracteres "iso-8859-5" es cirílico, y no sé por qué lo estás usando. Prueba con:

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

que es el juego occidental.

skiletmk · #18 (**permalink**) 11/08/2008, 11:20

Cita:

Iniciado por Mikmoro

No entiendo la pregunta.

Mikmoro,

Mira me quedo bien cenrado ahora, entonces lo que queria es ponerlo bien arriba el cuadro

Código PHP:

  #cabezera { 
    width:800px; 
    height:600px; 
    border:0px; 
    margin:0 auto; 
    margin-top:0px auto; 
    position:relative; 
    }

yo le pongo margin-top: 0px; y no funciona, y tambien probe con top:0px; tampoco funciona.

Gracias espero tu respuesta

Mikmoro · #19 (**permalink**) 11/08/2008, 11:30

Prueba añadiendo este selector al principio de tu css:

Cita:

* {margin: 0;padding: 0;}

skiletmk · #20 (**permalink**) 11/08/2008, 14:05

Cita:

Iniciado por Mikmoro

Prueba añadiendo este selector al principio de tu css:

Sos un Capo!! Maestro!!

Gracias por toda la ayuda!!!

Bueno cuando tenga mas problemas te volvere a molestar

Gracias!!!!!