Foros del Web » Creando para Internet » CSS »

Problema con div contenedor en IE, chrome FF

 Estas en el tema de Problema con div contenedor en IE, chrome FF en el foro de CSS en Foros del Web. Estimados recurro a ustedes nuevamente ahora con el tema de CSS. Les cuento soy muy novato en esto de CSS y hasta el momento me ...
  #1 (permalink)  
Antiguo 16/01/2012, 14:49
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años
Puntos: 0
Sonrisa Problema con div contenedor en IE, chrome FF
Estimados recurro a ustedes nuevamente ahora con el tema de CSS.
Les cuento soy muy novato en esto de CSS y hasta el momento me ha ido mas o menos bien, sólo que tengo un problema q no se como solucionarlo realizé un mantenedor y mi problema es que tengo un div contenedor que alberga a varios divs y cuando lo visualizo en los tres navegadores el div contenedor no llega al tope con la ventana del navegador, es decir, no llega hasta el límite y hay un espacio en blanco. Lo más extraño es que en chrome se ve más grande ese espacio y en los otros no tanto.
agradezco su valiosa ayuda.
Gracias
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Informe Centralizado</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv29 {
	position:absolute;
	left:0px;
	top:9px;
	width:207px;
	height:18px;
	z-index:1;
}
#apDiv30 {
	position:absolute;
	left:0px;
	top:27px;
	width:207px;
	height:24px;
	z-index:2;
}
#apDiv31 {
	position:absolute;
	left:0px;
	top:53px;
	width:207px;
	height:18px;
	z-index:3;
}
#apDiv34 {
	position:absolute;
	left:1px;
	top:73px;
	width:205px;
	height:26px;
	z-index:1;
}
#apDiv37 {
	position:absolute;
	left:11px;
	top:7px;
	width:229px;
	height:128px;
	z-index:1;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="codigo_colegio">RBD 9783</div>
<div id="nombre_colegio">Nuestra Se&ntilde;ora de la Guadalupe</div>
<div id="municipal">Municipal</div>
<div id="detalles_cursos">
	<div id="titulo_detalle_cursos">CURSOS</div>
    <div id="capacitor">Capacitor: Alejandra Past&eacute;n</div>
    <div id="div_linea_cursos"></div>
    <div id="lista_botones">
        <div id="codigo_curso">3&ordm;A</div>
        <input name="button" type="button" class="estilo_boton" id="button" value="Actividades" />
        <input name="button" type="button" class="estilo_boton" id="button" value="Alumnos" />
        <input name="button" type="button" class="estilo_boton" id="button" value="Informes" />
        <input name="button" type="button" class="estilo_boton" id="button" value="Tutor" />
	</div>
</div>
<div id="menu_region">
   <div id="titulo_comuna_region">
   	  <div class="encabezado_region_comuna" id="apDiv29">COMUNA</div>
	  <div class="texto_region_comuna" id="apDiv30">Padre de las Casas</div>
      <div id="div_linea_horizontal" class="fondo_div_linea"></div>
	  <div class="encabezado_region_comuna" id="apDiv31">REGI&Oacute;N</div>
	  <div class="texto_region_comuna" id="apDiv34">Araucanía
	    <div id="div_linea_horizontal3" class="fondo_div_linea"></div>
    </div>
   </div>
   <div id="fieldset_botones_region">
      <input name="btnAutoridadesContactos" type="image" id="boton_autoridades" src="img/boton_autoridad_contactos.png" />
      <input name="btnCalendario" type="image" id="boton_calendario" src="img/boton_calendario_lab.png" />
      <input name="btnContrato" type="image" id="boton_contrato" src="img/boton_contrato.png"/>
      <input name="btnFacturacion" type="image" id="boton_facturacion" src="img/boton_facturacion.png" />
      <input name="btnRedColegios" type="image" id="boton_red_colegio" src="img/boton_colegios.png" />
  </div>
</div>
<div id="menu_visitas">
  <input name="btnIngresarVisita" type="image" id="boton_visitas" src="img/boton_ingresar_visita_azul.png" />
  <input name="btnTodasActividades" type="image" id="boton_t_visitas" src="img/boton_todas_visitas_azul.png" />
  <input name="btnTodosInformes" type="image" id="boton_t_informes" src="img/boton_todos_informes.png"/>
  <input name="imgTodasActividades" type="image" id="boton_t_actividades" src="img/boton_todas_actividades.png" />
</div>
<div id="menu_laboratorios">
	<div id="titulo_laboratorio">LABORATORIO</div>
	<div id="titulo_capacitor"> T&eacute;cnico: Sebasti&aacute;n Jer&eacute;z</div>
    <div id="div_linea_laboratorio"></div>
   <div id="fieldset_laboratorio">
    <table width="" height="0" border="0">
         <tr class="estilo_fila_lab">
            <td>Estado</td>
         </tr>
         <tr class="estilo_fila_lab">
            <td class="texto_respuesta_lab">Operativo sin certif.</td>
         </tr>
         <tr class="estilo_fila_lab">
            <td>Colegio activo hace</td>
         </tr>
         <tr class="estilo_fila_lab">
            <td class="texto_respuesta_lab">27 semanas</td>
         </tr>
         <tr class="estilo_fila_lab">
            <td class="estilo_fila_lab">Tiempo en estado</td>
         </tr>
         <tr class="estilo_fila_lab">
            <td class="texto_respuesta_lab">14 semanas</td>
         </tr>
      </table>	
  </div> 
  <div id="fieldset_laboratorio_verde">
	<div id="detalle_lab_bloque1"># Labs: 2 <br />
		# PCs = 27
    </div>
	<div id="detalle_lab_bloque2">
    	Lab móvil: Sí <br />
        # PCs = 14
    </div>
	<div id="detalle_lab_bloque3">
    	Ancho banda <br />
        2 Mbps ded.
    </div>
  </div>
  <div id="grupo_botones_laboratorios">
	<input type="button" name="btnEncargadoL" value="Encargado Lab." id="boton_encargado" />
	<input type="image" class="estilo_boton_naranja" src="img/boton_ingresar_visita_naranja.png" />
    <input type="image" class="estilo_boton_naranja" src="img/boton_todas_visitas_naranja.png" /> 
  </div>
</div>
<div id="menu_mesa">
	<div id="apDiv37">
    <div id="titulo_mesa_ayuda">
    	MESA DE AYUDA
     <div id="div_linea_mesa_ayuda"></div>
    </div>
    <div id="resultado_mesa_ayuda">
     Incidentes = 24 <br />
     Incid. &uacute;lt. mes = 0 <br />
     Requerimientos = 13 <br />
     Req. &uacute;lt. mes = 11
     </div>
    </div>
    <div id="div_boton_contactos">
    <input name="btnTodosContactos" type="image" id="boton_contacto" src="img/boton_contactos.png" />
    </div>
</div>
</div>
</body>
</html>
Código CSS: 
Ver original
  1. /* CSS Document */
  2. * {margin:0; padding:0; border:0;}
  3. html, body {width: auto; height: 100%;}
  4. #contenedor{
  5.     width:100%;
  6.     height:100%;
  7.     position:absolute;
  8.     left: 0px;
  9.     top: 0px;
  10.     margin: 0px;
  11.     text-align:center;
  12. }
  13. #detalles_cursos {
  14.     position:absolute;
  15.     left:-37px;
  16.     top:27px;
  17.     width:793px;
  18.     height:264px;
  19.     z-index:1;
  20.     background-image: url(../img/fondo_detalle_curso.png);
  21.     background-repeat: repeat-x;
  22.     background-position: center;
  23.     overflow-x:hidden;
  24.     overflow-y:scroll; 
  25.     visibility: visible;
  26.     scrollbar-track-color:#A4E0FF;
  27.     scrollbar-arrow-color:#06C;
  28. }
  29. #menu_region {
  30.     position:absolute;
  31.     left:756px;
  32.     top:25px;
  33.     width:263px;
  34.     height:363px;
  35.     z-index:2;
  36.     background-image: url(../img/fondo_menu_region.png);
  37.     background-repeat: no-repeat;
  38.     background-position: center center;
  39.     border-left:solid 5px #000000;
  40.     border-bottom:solid 5px #000000;
  41. }
  42. #menu_visitas {
  43.     position:absolute;
  44.     left:1px;
  45.     top:289px;
  46.     width:755px;
  47.     height:99px;
  48.     z-index:3;
  49.     background-image: url(../img/barra_fondo_visitas.png);
  50.     background-repeat: no-repeat;
  51.     text-align:center;
  52.     background-position: center center;
  53.     visibility: visible;
  54.     border-bottom:solid 5px #000000;
  55. }
  56. #menu_laboratorios {
  57.     position:absolute;
  58.     left:0px;
  59.     top:392px;
  60.     width:755px;
  61.     height:227px;
  62.     z-index:4;
  63.     background-image: url(../img/fondo_menu_laboratorio.png);
  64.     background-repeat: repeat;
  65. }
  66. #menu_mesa {
  67.     position:absolute;
  68.     left:756px;
  69.     top:392px;
  70.     width:263px;
  71.     height:226px;
  72.     z-index:5;
  73.     background-image: url(../img/fondo_menu_ayuda.png);
  74.     background-repeat: no-repeat;
  75.     border-left:solid 5px #000;
  76.     background-position: center center;
  77. }
  78. #lista_botones {
  79.     position:absolute;
  80.     left:81px;
  81.     top:48px;
  82.     width:655px;
  83.     height:58px;
  84.     z-index:6;
  85.     text-align:center;
  86.     word-spacing: normal;
  87.     background-image: url(../img/barra_botones.png);
  88.     background-repeat: no-repeat;
  89. }
  90. #codigo_curso{
  91.     position:absolute;
  92.     left:8px;
  93.     top:15px;
  94.     width:36px;
  95.     height:21px;
  96.     z-index:7;
  97.     font-family:Arial;
  98.     color:#000000;
  99.     font-size:16px;
  100.     font-weight:bold;
  101. }
  102.  
  103. #grupo_botones_laboratorios {
  104.     position:absolute;
  105.     left:542px;
  106.     top:24px;
  107.     width:200px;
  108.     height:196px;
  109.     z-index:16;
  110.     text-align:center;
  111. }
  112. #codigo_colegio {
  113.     position:absolute;
  114.     left:2px;
  115.     top:0px;
  116.     width:149px;
  117.     height:26px;
  118.     z-index:17;
  119.     font-family: Arial;
  120.     font-size: 16px;
  121.     font-weight: bold;
  122.     background-color: #06C;
  123.     float: left;
  124.     text-align: center;
  125.     color: #FFF;
  126.     border-bottom: solid 5px #000000;
  127. }
  128. #municipal {
  129.     background-color: #06C;
  130.     position:absolute;
  131.     left:858px;
  132.     top:0px;
  133.     width:166px;
  134.     height:26px;
  135.     z-index:19;
  136.     font-family: Arial;
  137.     font-size: 16px;
  138.     color: #FFF;
  139.     text-align: center;
  140.     font-weight:600;
  141.     border-bottom:solid 5px #000;
  142. }
  143. #nombre_colegio {
  144.     position:absolute;
  145.     left:145px;
  146.     top:0px;
  147.     width:713px;
  148.     height:26px;
  149.     z-index:18;
  150.     background-color: #09C;
  151.     font-family: Arial;
  152.     font-size: 16px;
  153.     color: #FFF;
  154.     font-weight:700;
  155.     border-bottom:solid 5px #000000;
  156. }
  157. #comuna {
  158.     position:absolute;
  159.     left:0px;
  160.     top:19px;
  161.     width:192px;
  162.     height:28px;
  163.     z-index:1;
  164.     font-family: Arial;
  165.     font-size: 14px;
  166.     text-align: left;
  167. }
P.D: Puse algunos CSS ya que es muy largo
  #2 (permalink)  
Antiguo 17/01/2012, 08:59
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: Problema con div contenedor en IE, chrome FF
Estuve viendo tu código y en ningun caso, aparece ese espacio en blanco que mencionas, siempre se ven al tope tres divs flotados a izquierda en color azul-celeste-azul.
Además, que significa
Cita:
P.D: Puse algunos CSS ya que es muy largo
Tenés que poner todo el css que esté afectando a esa página

Y otra recomendación, usa un doctype válido

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">

Si tenés una url, pasala.
Una última posibilidad, es que tu archivo haya sido guardado en el editor con la marca de BOM de utf-8, para más datos
http://foros.emprear.com/codificar


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 17/01/2012, 12:51
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con div contenedor en IE, chrome FF
Estimado emprear, gracias por responder te comento que no puedo colocar todo el codigo CSS xq la caja de comentarios no me permite mas de 10.000 caractes. Te adjunto la foto donde sale el rectangulo blanco debajo del div naranja-blanco está marcado y esto pasa en chrome..


gracias
  #4 (permalink)  
Antiguo 17/01/2012, 13:14
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 6 meses
Puntos: 1567
Respuesta: Problema con div contenedor en IE, chrome FF
Solo con la imagen no es fácil, pero en principio veo que el problema está abajo, el bottom, no en el top, como señalabas

Si estás utilizando absolute y tamaños en medidas fijas, es complicado.
intentá no darle a los divs que contienen laboratorio y mesa de ayuda un alto mayor

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 17/01/2012, 13:24
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con div contenedor en IE, chrome FF
Cita:
Iniciado por emprear Ver Mensaje
Si estás utilizando absolute y tamaños en medidas fijas, es complicado.
intentá no darle a los divs que contienen laboratorio y mesa de ayuda un alto mayor
Saludos
te refieres que los divs de abajo laboratorio y mesa que el height quede en auto?
  #6 (permalink)  
Antiguo 17/01/2012, 13:31
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con div contenedor en IE, chrome FF
Código css completo
Código CSS: 
Ver original
  1. /* CSS Document */
  2. * {margin:0; padding:0; border:0;}
  3. html, body {width: auto; height: auto;}
  4.  
  5. #contenedor{
  6.     width:1009px;
  7.     height:100%;
  8.     position:absolute;
  9.     left: 0px;
  10.     top: 0px;
  11.     margin: 0px;
  12.     text-align:center;
  13. }
  14. #detalles_cursos {
  15.     position:absolute;
  16.     left:0px;
  17.     top:38px;
  18.     width:751px;
  19.     height:250px;
  20.     z-index:1;
  21.     background-image: url(../img/fondo_detalle_curso.png);
  22.     background-repeat: repeat-x;
  23.     background-position: center;
  24.     visibility: visible;
  25. }
  26. #menu_region {
  27.     position:absolute;
  28.     left:751px;
  29.     top:35px;
  30.     width:255px;
  31.     height:354px;
  32.     z-index:2;
  33.     background-image: url(../img/fondo_menu_region.png);
  34.     background-repeat: no-repeat;
  35.     background-position: center center;
  36.     border-left:solid 5px #000000;
  37.     border-bottom:solid 5px #000000;
  38. }
  39. #titulo_comuna_region {
  40.     position:absolute;
  41.     left:10px;
  42.     top:4px;
  43.     width:207px;
  44.     height:95px;
  45.     z-index:1;
  46.     font-size: 14px;
  47.     text-align: left;
  48. }
  49. #menu_visitas{
  50.     position:absolute;
  51.     left:0px;
  52.     top:290px;
  53.     width:751px;
  54.     height:99px;
  55.     z-index:3;
  56.     background-image: url(../img/barra_fondo_visitas.png);
  57.     background-repeat: no-repeat;
  58.     text-align:center;
  59.     background-position: center center;
  60.     visibility: visible;
  61.     border-bottom:solid 5px #000000;
  62. }
  63. #menu_laboratorios {
  64.     position:absolute;
  65.     left:0px;
  66.     top:394px;
  67.     width:751px;
  68.     height:224px;
  69.     z-index:4;
  70.     background-image: url(../img/fondo_menu_laboratorio.png);
  71.     background-repeat: repeat;
  72. }
  73. #menu_mesa {
  74.     position:absolute;
  75.     left:752px;
  76.     top:393px;
  77.     width:255px;
  78.     height:225px;
  79.     z-index:5;
  80.     background-image: url(../img/fondo_menu_ayuda.png);
  81.     background-repeat: no-repeat;
  82.     border-left:solid 5px #000;
  83.     background-position: center center;
  84. }
  85. .lista_botones {
  86.     position:relative;
  87.     left:15px;
  88.     top:48px;
  89.     width:655px;
  90.     height:58px;
  91.     z-index:6;
  92.     text-align:center;
  93.     word-spacing: normal;
  94.     background-image: url(../img/barra_botones.png);
  95.     background-repeat: no-repeat;
  96.     padding-bottom:5px;
  97. }
  98. .estilo_boton{
  99.     font-family:Arial;
  100.     color:#FFFFFF;
  101.     background-color:#C30;
  102.     font-weight:bold;
  103.     width:120px;
  104.     margin-bottom:10px;
  105.     margin-top:10px;
  106.     margin-left:10px;
  107.     margin-right:5px;
  108.     border-top-style: solid;
  109.     border-right-style: solid;
  110.     border-bottom-style: solid;
  111.     border-left-style: solid;
  112.     border-top-color: #930;
  113.     border-right-color: #930;
  114.     border-bottom-color: #930;
  115.     border-left-color: #930;
  116.     height: 30px;
  117.     font-size: 16px;
  118. }
  119. #codigo_curso{
  120.     position:absolute;
  121.     left:8px;
  122.     top:15px;
  123.     width:36px;
  124.     height:21px;
  125.     z-index:7;
  126.     font-family:Arial;
  127.     color:#000000;
  128.     font-size:16px;
  129.     font-weight:bold;
  130. }
  131. #boton_visitas{
  132.     font-family:Verdana, Geneva, sans-serif;
  133.     font-size:18px;
  134.     color:#FFF;
  135.     font-weight:300;
  136.     width:150px;
  137.     height:70px;
  138.     margin-right:10px;
  139.     margin-top:10px;
  140.     background-image: url(../img/boton_ingresar_visita_azul.png);
  141.     background-repeat: no-repeat;
  142.     background-position: center;
  143.     border:none;
  144. }
  145. #boton_t_visitas{
  146.     background-image: url(../img/boton_todas_visitas_azul.png);
  147.     background-repeat: no-repeat;
  148.     background-position: center;
  149.     width:150px;
  150.     height:70px;
  151.     margin-right:10px;
  152.     margin-top:10px;
  153. }
  154. #boton_t_informes{
  155.     background-image: url(../img/boton_todos_informes.png);
  156.     background-repeat: no-repeat;
  157.     background-position: center;
  158.     width:150px;
  159.     height:70px;
  160.     margin-right:10px;
  161.     margin-top:10px;
  162. }
  163. #boton_t_actividades{
  164.     background-image: url(../img/boton_todas_actividades.png);
  165.     background-repeat: no-repeat;
  166.     background-position: center;
  167.     width:150px;
  168.     height:70px;
  169.     margin-right:10px;
  170.     margin-top:10px;
  171.     border:none;
  172. }
  173. #titulo_detalle_cursos {
  174.     position:absolute;
  175.     left:22px;
  176.     top:7px;
  177.     width:79px;
  178.     height:20px;
  179.     z-index:8;
  180.     font-family:Arial;
  181.     font-size:16px;
  182.     font-weight:bold;
  183.     float:left;
  184.     text-align:left;
  185. }
  186. #titulo_laboratorio {
  187.     position:absolute;
  188.     left:12px;
  189.     top:3px;
  190.     width:121px;
  191.     height:19px;
  192.     z-index:9;
  193.     font-family:Arial, Helvetica, sans-serif;
  194.     font-weight:bold;
  195.     text-align:center;
  196.     float:left;
  197. }   
  198. #titulo_capacitor {
  199.     position:absolute;
  200.     left:527px;
  201.     top:2px;
  202.     height:20px;
  203.     z-index:10;
  204.     float:right;
  205.     font-family:Arial, Helvetica, sans-serif;
  206.     font-weight:bold;
  207.     text-align:right;
  208.  
  209. }
  210. #fieldset_laboratorio{
  211.     position:absolute;
  212.     left:151px;
  213.     top:31px;
  214.     width:200px;
  215.     z-index:14;
  216.     padding-top:7px;
  217.     background-image: url(../img/fieldset_laboratorio.png);
  218.     background-repeat: no-repeat;
  219.     background-position: center center;
  220.     text-align:center;
  221.     height: 180px;
  222.     
  223. }
  224. div#fieldset_laboratorio table{
  225.     margin: 0 auto;
  226.     text-align: left;
  227. }
  228. #titulo_estado{
  229.     position:absolute;
  230.     left:10px;
  231.     top:44px;
  232.     width:163px;
  233.     height:25px;
  234.     z-index:16;
  235.     text-align:center;
  236.     font-family:Arial, Helvetica, sans-serif;
  237.     font-size:14px;
  238.     font-weight:bold;
  239. }
  240. #estado_respuesta{
  241.     position:absolute;
  242.     left:7px;
  243.     top:85px;
  244.     width:163px;
  245.     height:25px;
  246.     z-index:17;
  247.     font-family:Arial;
  248.     font-size:14px;
  249.     text-align:center;
  250. }
  251. #indicador_color{
  252.     position:absolute;
  253.     left:16px;
  254.     top:37px;
  255.     width:100px;
  256.     z-index:12;
  257.     text-align:center;
  258.     height: 150px;
  259.     border:solid 2px #000;
  260. }
  261. #fieldset_laboratorio_verde{
  262.     position:absolute;
  263.     left:369px;
  264.     top:26px;
  265.     width:164px;
  266.     height:195px;
  267.     z-index:15;
  268.     background-image: url(../img/fieldset_laboratorio_verde.png);
  269.     background-repeat: no-repeat;
  270.     text-align:center;
  271.     background-position: center center;
  272. }
  273. #grupo_botones_laboratorios {
  274.     position:absolute;
  275.     left:542px;
  276.     top:24px;
  277.     width:200px;
  278.     height:196px;
  279.     z-index:16;
  280.     text-align:center;
  281. }
  282. .estilo_boton_naranja{
  283.     margin-bottom:3px;
  284.     margin-top:3px;
  285.     margin-left:10px;
  286.     margin-right:5px;
  287.  
  288. }
  289. #boton_encargado{
  290.     background-color:#C30;
  291.     font-family:Arial;
  292.     color:#FFFFFF;
  293.     font-weight:bold;
  294.     font-size:14px;
  295.     margin: 5px;
  296.     width:150px;
  297.     height:40px;
  298.     border-top-style: solid;
  299.     border-right-style: solid;
  300.     border-bottom-style: solid;
  301.     border-left-style: solid;
  302.     border-top-color: #930;
  303.     border-right-color: #930;
  304.     border-bottom-color: #930;
  305.     border-left-color: #930;
  306. }
  307. #detalle_lab_bloque1{
  308.     position:absolute;
  309.     left:25px;
  310.     top:12px;
  311.     width:105px;
  312.     height:43px;
  313.     z-index:17;
  314. }
  315. div#detalle_lab_bloque1, div#detalle_lab_bloque2, div#detalle_lab_bloque3{
  316.     text-align:left;
  317.     font-family:Arial;
  318.     font-size:16px;
  319.     padding:5px;
  320.     padding-left:5px;
  321. }
  322. #boton_autoridades {
  323.     background-repeat: no-repeat;
  324.     background-position: center center;
  325.     height: 55px;
  326.     width: 155px;
  327. }
  328. input[type="image"]{
  329.     width:155px;
  330. }
  331. #fieldset_botones_region{
  332.     position:absolute;
  333.     left:9px;
  334.     top:87px;
  335.     width:207px;
  336.     height:260px;
  337.     z-index:17;
  338.     float: left;
  339. }
  340. input#boton_autoridades, input#boton_calendario, input#boton_contrato, input#boton_facturacion, input#boton_red_colegio{
  341.     margin-bottom:3px;
  342.  
  343. }
  344. #codigo_colegio {
  345.     position:absolute;
  346.     left:0px;
  347.     top:0px;
  348.     width:149px;
  349.     height:28px;
  350.     z-index:17;
  351.     font-family: Arial;
  352.     font-size: 16px;
  353.     font-weight: 700;
  354.     background-color: #06C;
  355.     float: left;
  356.     text-align: center;
  357.     color: #FFF;
  358.     padding-top:2px;
  359. }
  360. #municipal {
  361.     background-color: #06C;
  362.     position:absolute;
  363.     left:889px;
  364.     top:0px;
  365.     width:120px;
  366.     height:28px;
  367.     z-index:19;
  368.     font-family: Arial;
  369.     font-size: 16px;
  370.     color: #FFF;
  371.     text-align: center;
  372.     font-weight:600;
  373.     padding-top:2px;
  374. }
  375. #nombre_colegio {
  376.     position:absolute;
  377.     left:145px;
  378.     top:0px;
  379.     width:746px;
  380.     height:28px;
  381.     z-index:18;
  382.     background-color: #09C;
  383.     font-family: Arial;
  384.     font-size: 16px;
  385.     color: #FFF;
  386.     font-weight:700;
  387.     padding-top:2px;
  388. }
  389. #comuna {
  390.     position:absolute;
  391.     left:0px;
  392.     top:19px;
  393.     width:192px;
  394.     height:28px;
  395.     z-index:1;
  396.     font-family: Arial;
  397.     font-size: 14px;
  398.     text-align: left;
  399. }
  400. #boton_contactos {
  401.     height: 50px;
  402.     width: 150px;
  403.     margin: 5px;
  404. }
  405. #div_boton_contactos {
  406.     position:absolute;
  407.     left:14px;
  408.     top:138px;
  409.     width:208px;
  410.     height:51px;
  411.     z-index:1;
  412.     text-align: center;
  413.     padding: 10px;  
  414. }
  415. .encabezado_region_comuna {
  416.     font-family: Arial;
  417.     font-size: 14px;
  418.     font-weight: bold;
  419.     color: #000;
  420. }
  421. .texto_region_comuna {
  422.     font-family: Arial;
  423.     font-size: 14px;
  424.     color: #000;
  425. }
  426. .fondo_div_linea{
  427.     background-color: #A77BD3;
  428.     width:196px;
  429.     height:1px;
  430. }
  431. #titulo_mesa_ayuda{
  432.     position:absolute;
  433.     left:0px;
  434.     top:1px;
  435.     width:228px;
  436.     height:30px;
  437.     z-index:1;
  438.     font-family: Arial;
  439.     font-size: 16px;
  440.     font-weight: bold;
  441.     color: #000;
  442.     text-align: left;
  443. }
  444. #div_linea_laboratorio{
  445.     position:absolute;
  446.     left:15px;
  447.     top:23px;
  448.     width:701px;
  449.     height:1px;
  450.     z-index:1;
  451.     background-color: #003399;
  452.     width:703px;
  453.     height:1px;
  454. }
  455. #resultado_mesa_ayuda {
  456.     position:absolute;
  457.     left:-5px;
  458.     top:28px;
  459.     width:228px;
  460.     height:95px;
  461.     z-index:1;
  462.     font-family: Arial;
  463.     font-size: 16px;
  464.     font-weight: bold;
  465.     color: #000;
  466.     text-align: left;
  467.     margin-top: 5px;
  468.     margin-bottom: 5px;
  469.     margin-left: 5px;
  470. }
  471. #div_linea_cursos {
  472.     position:absolute;
  473.     left:24px;
  474.     top:27px;
  475.     width:706px;
  476.     height:1px;
  477.     z-index:1;
  478.     background-color:#003399;
  479. }
  480.     
  481. #div_linea_mesa_ayuda {
  482.     position:absolute;
  483.     left:-1px;
  484.     top:20px;
  485.     width:222px;
  486.     height:1px;
  487.     z-index:1;
  488.     background-color:#003399;
  489. }
  490. #div_encabezado {
  491.     position:absolute;
  492.     left:1px;
  493.     top:0px;
  494.     width:1009px;
  495.     height:30px;
  496.     z-index:1;
  497.     text-align: center;
  498.     float: left;
  499.     border-bottom: solid 5px #000000;
  500. }
  501. #apDiv29 {
  502.     position:absolute;
  503.     left:0px;
  504.     top:1px;
  505.     width:207px;
  506.     height:18px;
  507.     z-index:1;
  508. }
  509. #apDiv30 {
  510.     position:absolute;
  511.     left:0px;
  512.     top:21px;
  513.     width:207px;
  514.     height:19px;
  515.     z-index:2;
  516. }
  517. #apDiv31 {
  518.     position:absolute;
  519.     left:0px;
  520.     top:42px;
  521.     width:207px;
  522.     height:18px;
  523.     z-index:3;
  524. }
  525. #apDiv34 {
  526.     position:absolute;
  527.     left:1px;
  528.     top:63px;
  529.     width:205px;
  530.     height:26px;
  531.     z-index:1;
  532. }
  533. #apDiv37 {
  534.     position:absolute;
  535.     left:14px;
  536.     top:7px;
  537.     width:229px;
  538.     height:128px;
  539.     z-index:1;
  540. }
  #7 (permalink)  
Antiguo 18/01/2012, 07:37
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con div contenedor en IE, chrome FF
emprear, ejemplificamé por favor lo que dices ya que no se como hacer en este caso.

Gracias
  #8 (permalink)  
Antiguo 20/01/2012, 08:08
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años
Puntos: 0
Respuesta: Problema con div contenedor en IE, chrome FF
ayuda por favor con este tema que me tiene vuelto loco

Gracias.
  #9 (permalink)  
Antiguo 21/01/2012, 05:37
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 16 años
Puntos: 306
Respuesta: Problema con div contenedor en IE, chrome FF
No es buena idea maquetar con position:absolute.
El error seguramente tendrá que ver con que la suma de alturas de algunas cajas supera el 100%. pero como el contenedor es solamente del 100% queda corto.


Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
Última edición por C2am; 21/01/2012 a las 05:42

Etiquetas: chrome, contenedor, html, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:29.