Tema: Problema con div contenedor en IE, chrome FF
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/01/2012, 14:49
ocarrasco20
 
Fecha de Ingreso: diciembre-2011
Ubicación: Algarrobo
Mensajes: 17
Antigüedad: 13 años, 1 mes
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