Eterno problema: la compativilidad IE vs FF

Darkot · #1 (**permalink**) 22/02/2008, 08:33

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

TheViejo · #2 (**permalink**) 22/02/2008, 09:31

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.

Raulmmmm · #3 (**permalink**) 22/02/2008, 09:32

Quítale las comillas a todo en el CSS. Ahí no debe haber comillas (por lo menos yo no las pongo

).

Darkot · #4 (**permalink**) 22/02/2008, 09:41

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 :)

Raulmmmm · #5 (**permalink**) 22/02/2008, 14:13

Quítale las herencias al CSS. Es decir, en vez de .top.top_left, pon solo .top_left y cuéntanos.

Darkot · #6 (**permalink**) 25/02/2008, 02:39

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.

_GaBY_ · #7 (**permalink**) 25/02/2008, 11:21

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

Raulmmmm · #8 (**permalink**) 25/02/2008, 11:56

Pues puedes poner el CSS:


Y eso sólo lo interpretará IE5.

_GaBY_ · #9 (**permalink**) 25/02/2008, 14:27

Muchas gracias!!!!!! ^^