Foros del Web » Creando para Internet » CSS »

Eterno problema: la compativilidad IE vs FF

Estas en el tema de Eterno problema: la compativilidad IE vs FF en el foro de CSS en Foros del Web. Hola a todos los sin duda grandes desarrolladores de este foro que tantas veces me han ayudado sin saberlo :P Es la primera vez que ...
  #1 (permalink)  
Antiguo 22/02/2008, 08:33
Avatar de Darkot  
Fecha de Ingreso: febrero-2008
Ubicación: Sevilla, España
Mensajes: 5
Antigüedad: 16 años, 1 mes
Puntos: 0
Eterno problema: la compativilidad IE vs FF

Hola a todos los sin duda grandes desarrolladores de este foro que tantas veces me han ayudado sin saberlo :P

Es la primera vez que posteo y creo que es para un tema bastante interesante.
Tengo un problema muy extraño con la disposición de ciertas capas en mi web, el problema del distinto posicionado de las capas entre IE y FF ya me es bastante familiar, pero no se porque razón en este caso no es que no se coloquen bien o que no parezcan como quiero... es que no aparecen

En IE todo me va perfecto y exactamente como quiero...el problema llega al abrir el archivo con Firefox el cual ni siquiera me muestra las imagenes ni nada, solo el texto que apareceria situado en el centro de la capa central U.U

A ver si algun buen diseñador me echa una mano.

aqui dejo el codigo del html:



Código:
<HTML>
<HEAD>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<TITLE>Prueba CSS</TITLE>
<LINK REL="stylesheet" HREF="hoja_estilo.css" type="text/css">
</HEAD>
<BODY>

<DIV class="Big_contenedor">
<DIV class="Div">
    
    <div class="top">
        <div class="top_izq"></div>
        <div class="top_der"></div>    
        <div class="top_cen"></div>
    </div>

    <div class="central">
    
        
        <div class="izq"></div>
        <div class="der"></div>
        
        <div class="tex_box">
        
            <h1>T&iacute;tulo del art&iacute;culo.</h1>
            <p>P&aacute;rrafo de prueba #1. Aqu&iacute; va la informaci&oacute;n del art&iacute;culo. Aqui va la informaci&oacute;ndel art&iacute;culo.
                <br>Aqu&iacute; va la informaci&oacute;n del art&iacute;culo. Aqu&iacute; va la informaci&oacute;n del art&iacute;culo. Aqu&iacute; va la informaci&oacute;n del art&iacute;culo.
            </p>
            
            <div class="pie">
                <p>Pie del art&iacute;culo</p>    
            </div>
        </div>
        
    
    </div>
    
    <div class="bottom">
        <div class="bottom_izq"></div>
        <div class="bottom_der"></div>
        <div class="bottom_cen" ></div>
    </div>

</DIV>

</DIV>





</BODY>
</HTML>
y aquie el codigo del archivo css:


Código:
.Big_contenedor{
width:"400px";
height:"400px"; 
border:"5px solid";
padding:"0px"; 
margin:"0px";
}
    
.Div{  
padding:"0px"; 
margin:"0px";
width:"99%";    
height:"99%"; 
background-color:"#a9d974";

}

.Div.top 
{
    background-image:"url('imagenes/top_line.gif')"; 
    background-repeat:"repeat-x";
    height:"28px";
    width:"100%";
    margin:"0px";    
    padding:"0px";
}

.Div.top.top_izq { 
    float:"left";
    width:"28px";
    height:"28px"; 
    z-index:"2";
    background-image:"url('imagenes/top_left.gif')";
    background-repeat:"no-repeat"; 
    margin:"0px";
    padding:"0px";
}

.Div.top.top_der { 
    float:"right"; 
    width:"28px";
    height:"28px"; 
    z-index:"3";
    background-image:"url('imagenes/top_right.gif')";
    background-repeat:"no-repeat"; 
    margin:"0px";
    padding:"0px";
}


.Div.bottom 
{
    height:"28px";
    width:"100%";
    z-index:"1";
    background-image:"url('imagenes/bottom_line.gif')"; 
    background-repeat:"repeat-x";
    margin:"0px";    
    padding:"0px";
}

.Div.bottom.bottom_izq { 
    float:"left";
    width:"28px";
    height:"28px"; 
    z-index:"2";
    background-image:"url('imagenes/btm_left.gif')";
    background-repeat:"no-repeat"; 
    margin:"0px";
    padding:"0px";
}

.Div.bottom.bottom_der { 
    float:"right"; 
    width:"28px";
    height:"28px"; 
    z-index:"3";
    background-image:"url('imagenes/btm_right.gif')";
    background-repeat:"no-repeat"; 
    margin:"0px";
    padding:"0px";
}


.Div.central{ 
    float:"right";
    width:"100%";
    height:"100%"; 
    z-index:"1";
    margin:"0px";
    padding:"0px";
}
.Div.central.izq { 
    float:"left";
    width:"28px";
    height:"100%"; 
    z-index:"5";
    background-image:"url('imagenes/left_line.gif')";
    background-repeat:"repeat-y";  
    margin:"0px";
    padding:"0px";
    position:"relative";
    top:"0px";
    left:"0px";
}

.Div.central.der{ 
    float:"right";
    width:"28px";
    height:"100%"; 
    z-index:"4";
    background-image:"url('imagenes/right_line.gif')";
    background-repeat:"repeat-y"; 
    margin:"0px";
    padding:"0px";
}


.Div.central.tex_box{ 
    width:"90%";
    height:"90%"; 
    z-index:"6";
    text-align:"justify";
    margin:"0px";
    padding:"0px";
    overflow:"auto";
}
.Div.central.tex_box.h1{ 
    text-align:"justify";
    margin:"0px";
    padding:"0px";
}


.Div.central.tex_box.pie{ 
    float:"right";
    text-align:"right";
    font-size:"0.85em";
    width:"100%";
    height:"28px"; 
    z-index:"1";
    margin:"0px";
    padding:"0px";
    /*border:"2px solid";*/
}
Gracias de todas formas y espero que podrais ayudarme
  #2 (permalink)  
Antiguo 22/02/2008, 09:31
Avatar de TheViejo  
Fecha de Ingreso: marzo-2007
Ubicación: Delante de mi Vetusto PC.
Mensajes: 29
Antigüedad: 17 años
Puntos: 3
Re: Eterno problema: la compativilidad IE vs FF

Hola, mira lo primero que he detectado en tu css es el uso de " (comillas), eliminalas y te funcionara en ff.

Tu css sin comillas :
Código:
.Big_contenedor{
width:400px;
height:400px;
border:5px solid;
padding:0px;
margin:0px;
}

.Div{
padding:0px;
margin:0px;
width:99%;
height:99%;
background-color:#a9d974;

}

.Div.top
{
    background-image:url('imagenes/top_line.gif');
    background-repeat:repeat-x;
    height:28px;
    width:100%;
    margin:0px;
    padding:0px;
}

.Div.top.top_izq {
    float:left;
    width:28px;
    height:28px;
    z-index:2;
    background-image:url('imagenes/top_left.gif');
    background-repeat:no-repeat;
    margin:0px;
    padding:0px;
}

.Div.top.top_der {
    float:right;
    width:28px;
    height:28px;
    z-index:3;
    background-image:url('imagenes/top_right.gif');
    background-repeat:no-repeat;
    margin:0px;
    padding:0px;
}


.Div.bottom
{
    height:28px;
    width:100%;
    z-index:1;
    background-image:url('imagenes/bottom_line.gif');
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
}

.Div.bottom.bottom_izq {
    float:left;
    width:28px;
    height:28px;
    z-index:2;
    background-image:url('imagenes/btm_left.gif');
    background-repeat:no-repeat;
    margin:0px;
    padding:0px;
}

.Div.bottom.bottom_der {
    float:right;
    width:28px;
    height:28px;
    z-index:3;
    background-image:url('imagenes/btm_right.gif');
    background-repeat:no-repeat;
    margin:0px;
    padding:0px;
}


.Div.central{
    float:right;
    width:100%;
    height:100%;
    z-index:1;
    margin:0px;
    padding:0px;
}
.Div.central.izq {
    float:left;
    width:28px;
    height:100%;
    z-index:5;
    background-image:url('imagenes/left_line.gif');
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    position:relative;
    top:0px;
    left:0px;
}

.Div.central.der{
    float:right;
    width:28px;
    height:100%;
    z-index:4;
    background-image:url('imagenes/right_line.gif');
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
}


.Div.central.tex_box{
    width:90%;
    height:90%;
    z-index:6;
    text-align:justify;
    margin:0px;
    padding:0px;
    overflow:auto;
}
.Div.central.tex_box.h1{
    text-align:justify;
    margin:0px;
    padding:0px;
}


.Div.central.tex_box.pie{
    float:right;
    text-align:right;
    font-size:0.85em;
    width:100%;
    height:28px;
    z-index:1;
    margin:0px;
    padding:0px;
    /*border:2px solid;*/
}


Un saludo.
  #3 (permalink)  
Antiguo 22/02/2008, 09:32
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Re: Eterno problema: la compativilidad IE vs FF

Quítale las comillas a todo en el CSS. Ahí no debe haber comillas (por lo menos yo no las pongo ).
  #4 (permalink)  
Antiguo 22/02/2008, 09:41
Avatar de Darkot  
Fecha de Ingreso: febrero-2008
Ubicación: Sevilla, España
Mensajes: 5
Antigüedad: 16 años, 1 mes
Puntos: 0
Re: Eterno problema: la compativilidad IE vs FF

Cuando hice el código lo hice sin comillas y probé a poner las comillas 30min antes de subirlo aqui para ver si era ese el fallo, pero siguió sin solución (lo maximo que consigo es que se vea un color de fondo mal colocado o no), asi que lo de las comillas creo que no va ser el problema :S

Aki dejo un enlace acia el ejemplo para que sea más facil de entender lo que quiero:

http://www.fotogoth.com/Prueba_Capas/Pruenba_capas.html


Muchas gracias de todas formas :)
  #5 (permalink)  
Antiguo 22/02/2008, 14:13
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Re: Eterno problema: la compativilidad IE vs FF

Quítale las herencias al CSS. Es decir, en vez de .top.top_left, pon solo .top_left y cuéntanos.
  #6 (permalink)  
Antiguo 25/02/2008, 02:39
Avatar de Darkot  
Fecha de Ingreso: febrero-2008
Ubicación: Sevilla, España
Mensajes: 5
Antigüedad: 16 años, 1 mes
Puntos: 0
Re: Eterno problema: la compativilidad IE vs FF

Muchas gracias a todos por contestar. Al final di con la solución pero me da asta vergüenza contarlas XD, error de principiante. Al final todo fue porque yo ponina la herencias mal, si os fijáis son todas del tipo: ".Div.top.top_der " cuando deberian ser ".Div .top .top_der " osea que todo venia a que se me olvidaron los espacios.. lamento haberos molestado para una cosa asi :S



Muchas Gacias a todos.
  #7 (permalink)  
Antiguo 25/02/2008, 11:21
 
Fecha de Ingreso: diciembre-2007
Mensajes: 11
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Eterno problema: la compativilidad IE vs FF

Perdon por revivir este thread. Pero tambien tengo un problema de compatibilidad entre ff e ie.
El tema es el siguiente.
MI pagina seria algo asi:
Tiene una imagen de header de 700 x 300 px, con un rectangulo aprox de 500px de ancho en la parte inferior(estaria centrado). El body, seria continuacion de ese rectangulo, con la misma medida(hecho en css)
Cuando estoy diseñando la pagina en mi computadora y pruebo de verlo en los dos navegadores, éstos interpretan bien la pagina (ese rectangulo parece que fuera continuacion de la imagen).
Cuando subo al host la pagina, y quiero ver como queda. En FF se ve bien, pero en IE se ve mas angosto ese rectangulo hecho en css.
Pero lo que no entiendo es ¿por qué? Si en mi computadora los dos navegadores lo muestran bien, y cuando subo la pagina al host, solo FF lo interpreta como deberia :S
Si agrando ese rectangulo para que IE lo interprete como deberia, FF se va a ver enorme...
Qué se tendria que hacer en esos casos?
Lo peor de todo, es que los clientes que va la pagina, ellos lo ven con IE :S
Espero que hayan entendido mi consulta.
Saludos

Gabriela
  #8 (permalink)  
Antiguo 25/02/2008, 11:56
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Re: Eterno problema: la compativilidad IE vs FF

Pues puedes poner el CSS:
<!--[if IE 5]>
<style type="text/css">
div{ width: 500px;}
</style>
<![endif]-->

Y eso sólo lo interpretará IE5.
  #9 (permalink)  
Antiguo 25/02/2008, 14:27
 
Fecha de Ingreso: diciembre-2007
Mensajes: 11
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Eterno problema: la compativilidad IE vs FF

Muchas gracias!!!!!! ^^
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:35.