Compatibilidad con IE

Citar

Escrito el 31 Mar 2007 12:13 pm

Bueno el otro dia me puse hacer un pagina a partir de una imagen que hice, al principio muy bien, me cuadraban los campos, los posicionaba bien, hasta que lo voy a mirar con IE ( lo tenia que haber visto desde el principio) y todo descuadrado.

Mire por encima y pude solucionar algunas cosas, como poner los contendores a la izquierda , agrupandolos.

Pero no lo consigo del todo.

Ya que la parte del encabezado se me desordena, y dentro de ahi una caja de buscar no me ajusta en la misma linea.

y en la parte central el modulo de la izquierda no se me ajusta bien.

Os pongo el Codigo y direccion a la pagina

Css

Código :

Eliminado

El html

Código :

Eliminado

Supongo que es por la position o el float o las dos cosas, la verdad que no lo se muy bien.

La direccion de la pagina es

Enlace

Perdonar por el banner de arriba, es por que es de un hosting gratuito.

Gracias por perder el tiempo en leer el post y en responderme.

He eliminado el codigo, al estar mal y lo he vuelto a rehacer.

Por Suriv

131 de clabLevel

Envíale un mensaje privado

Ultima edición por Suriv el 01 Abr 2007 11:26 am, editado 1 vez

Citar

Escrito el 31 Mar 2007 05:12 pm

sí has visto en firefox que algunos elementos se quedan fijos con el scroll?
yo que tú me ponía a rehacerlo desde cero, posiblemente no sólo css sino xhtml. tu error es utilizar position, pues aunque de entrada puede ser la mejor solución, termina dando más problemas.
checa los tutoriales de css y aprende a hacer los diseños con sólo float.

suerte

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

Envíale un mensaje privado Web

@faelazo

Citar

Escrito el 31 Mar 2007 07:23 pm

gracias, seguramente lo empieze desde cero, me da una rabia la verdad ya que position te solucionaba muchas cosas....

Por Suriv

131 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 01 Abr 2007 11:26 am

Lo hice de 0 y quitandome el uso de las posiciones.

Lo que pasa es que ahora me ha surgido unos probremillas con Firefox, es la parte del encabezado pongo el codigo

Esta mejor estructurado que el anterior
Html

Código :

<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<title>Suriv</title>
<link rel="stylesheet" href="style/suriv.css" type="text/css" />
</head>
<body>
<div id="container">

   <div class="header">
      <div class="sm"></div>
      
      <div class="busqueda">
         <span class="texthead">Texto1:</span>
         <span class=""><input size="15" maxlength="25" type="text"></input></span>
         <span class="botones"><input name="Buscar" type="button" value="&nbsp;Buscar" /></span>
                  
      </div>
      
      
      <div class="menu">
         <ul>
            <li>PESTAÑA 1</li>
            <li>PESTAÑA 2</li>
         </ul>
         
      </div>
      
   <div class="sm1"></div>
   
   </div>
   
   
   
   <div class="medio">
         <div class="mizqui">
               
               <div class="micont">
                  
                  <div class="michead"><h3>Encabezado</h3></div>
                  <div class="miccontan"></div>
                  <div class="micfoot">
                     <div class="pie">
                           <span class="botones"><input name="Aceptar" type="button" value="&nbsp;Boton"/></span>
                     </div>
                  </div>
               </div>
               
               <div class="micont_1">
                  
                  <div class="michead"><h3>Encabezado</h3></div>
                  <div class="miccontan_1"></div>
                  <div class="micfoot">
                     
                     
                  </div>
                  
               </div>
         
         
         </div>
         <div class="mcent">
            
            <div class="mcconte">
                  
                  <div class="michead"><h3>Encabezado</h3></div>
                  <div class="mcccontan"></div>
                  <div class="micfoot">
                     <div class="pie1"><a href="#d">enlace</a></div>
                     <div class="pie">
                        <span class="botones">
                           <span><input type="button" value="Boton"/></span>
                           <span><input type="button" value="Boton_2"/></span>
                        </span>      
                     </div>
                  </div>
            </div>
            
            <div class="mcconte_1">
                  
                  <div class="michead"><h3>Encabezado</h3></div>
                  <div class="mcccontan_1"></div>
                  <div class="micfoot">
                     <div class="pie1"><a href="#d">enlace</a></div>
                     <div class="pie">
                        <span class="botones">
                           <span><input type="button" value="Boton"/></span>
                           <span><input type="button" value="Boton_2"/></span>
                        </span>      
                     </div>
                  </div>
                  
            </div>
               
         </div>
   
   
   </div>
   
   
   <div class="foot">
      <div class="enla"><a href="#d">enlace</a></div>
      
                     <div class="pie">
                        <span class="botones">
                        <span><input type="button" value="Boton"/></span>
                        <span><input type="button" value="Boton"/></span>
                        </span>      
                     </div>
   
   </div>



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

Css

Código :

/* Generales */
body{
font-family:Arial;
font-size:11px;
color:#000000;
margin:0;
}

a{

font:11px;
color:#FFFFFF;
text-decoration:none;


}
a:hover{text-decoration:underline;}

h3

{
   font: bold 12px Arial;
   color:#FFFFFF;
   /*margin:0 0 0 5px;*/
}
 /* Div´s*/
 
   /* Div contenedor */
#container{
background:#CECECE;
width:100%;
margin: 0 auto;



}
   /* Div encabezado */
.header{

background-color:#CECECE;
height:80px;
border-bottom: #A4A4A4 1px solid; 
margin: 0 auto;
/*display:inline; */

}
   /*Lista */
    .menu {
      margin:0;
      padding:0;
    
    }
      .menu ul{
      margin: 0 auto;
      
      }
      .menu li{
         list-style:none;
         background:#FFFFFF;
         font:bold 14px Arial;
         
         color:#0000FF;
         margin:44px 0 0 12px;
         padding:10px 20px 10px 20px;
         border-top:1px solid #A4A4A4;
         border-left:1px solid #A4A4A4;
         border-right:1px solid #A4A4A4;
         border-bottom:1px solid #FFFFFF;
         float:left;

      }
* html .menu li {margin:40px 0 0 12px !important;}
      .menu li a {
           color:#0000FF;
           text-decoration: none;
           
      }

      .menu li a:link, #menu li a:visited {
           text-decoration:underline;
      }

      .menu li a:hover {
          text-decoration:underline;
      }

/* Caja buscador */

      .busqueda
      {
         float:left;
         
         padding:45px 25px 0 25px;
         
      }
         /*IE*/
* html .busqueda
      {padding:40px 25px 0 25px !important;}
               
      .texthead{
         
         color:#FFFFFF;
      
      
      }
      /*Imagenes Encabezado */
      .sm
      {
            background: url(../img/suriv.png);
            width:61px;
            height:63px;
            float:left;
            margin: 8px 0 0 12px;

      }


      .sm1
      {
            background: url(../img/suriv1.png) no-repeat;
            width:100px;
            height:63px;
            
            margin:auto 0 0 890px;

            
      }
* html .sm1 {margin:8px 0 0 890px !important;}
      
 /* Div central  */   
.medio{

background:#FFFFFF;
   width:100%; 
   height:455px;
   padding:0;
   margin:0 auto;



}
      /*Div central izquierdo */
      .mizqui
      {
         float:left;
         margin: 0 0 0 15px;
      

      }
* html .mizqui {margin: 10px 0 0 15px !important}
      
         /* Hijo 1 */
         .micont
         {
         
            background:#b9dcec;
            width:244px;
            height:214px;
            margin:0 0 15px 0;
         
         }
                  .miccontan
                  {
                        background:#b9dcec;
                        height:169px;
                        


                  }
                  
         /* Hijo 2 */
         .micont_1
         {
         
            background:#b9dcec;;
            width:244px;
            height:200px;
            
            
         
         }
* html .micont_1{margin:0 0 10px 0 !important;}


                  .miccontan_1
                  {
                        background:#b9dcec;;
                        height:155px;
                        


                  }
                  
         /*Div central derecho */
      .mcent{
            
            width:710px;
            margin: 10px 0 0 279px;
      
      }
* hrml .mcent {margin: 10px 0 0 279px !important;}
         /* Hijo 1 */
         .mcconte
         {
            background:#b9dcec;
            height:149px;
            margin: 0 0 20px 0;
         }
               .mcccontan
               {
                  background:#b9dcec;
                  height:104px;
               
               }
         
         /* Hijo 2 */
         .mcconte_1
         {
            background:#b9dcec;
            height:250px;
         }
               .mcccontan_1
               {
                  background:#b9dcec;
                  height:205px;
               
               }
               
               
               

/* Caracteristicas de los Div centrales, izquierda y derecha */               
.michead
{
   background: url(../img/fnd_box.png) repeat-x;
   height:24px;
   padding: 0 0 0 10px;
   
}
* html .michead {   padding: 5px 0 0 10px !important;}
.micfoot{

      background: url(../img/fnd_boxfoot.png) repeat-x;
      height:21px;
      
      /*padding: 0 0 0 10px;  Mas tarde se lo añdimos*/

}

/* div pie */
.foot
{
   background: url(../img/fnd_foot.png) repeat-x;
   width:100%; 
   height:38px;
   margin:0 0 0 0;


}

/* Botones y enlaces */
.pie{text-align:right;margin:0 4px 0 0; padding: 1px 0 0 0;}

* html .pie {padding: 1px 0 0 0 !important;}

.botones input {
   background-color:#FFFFFF;
   border:1px solid #FF0000;
   color:#000000;
   font-size:9px;
   font-weight:normal;
   height:18px;
   
}

.pie1
{
   margin:0 0 0 5px;
   float:left;
   
}

 .enla{
   margin: 0 0 0 15px;
   float:left;
}

.enla a{

      font:11px;
      color:#666666;
      text-decoration:none;

}

.enla a:hover{

   text-decoration:underline;
}

La direccion de la pagina es la misma que la anterior.

Enlace

Por Suriv

131 de clabLevel

Envíale un mensaje privado