Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/02/2008, 08:33
Avatar de Darkot
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