Problema con CSS TBODY en Firefox 3

ugmaster · #1 (**permalink**) 02/10/2008, 12:40

Hola gente...

Tengo un pequeño problema, tengo una tabla cuyo TBODY le doy formato por medio de CSS
algo como esto:

Código:

.contenedor_conceptos{
	height: 43pt;	
	background: WHITE;
}

Lo que limita su altura especificamente. Ahora bien esto no me da ningun problemas en firefox 2, pero al pasar al 3 tengo dos cosas

1.- Si el TBODY contiene un solo registro osea un solo TR este es alargado a cubrir todo el TBODY, va tomando su tamaño conforme agrego mas TR
2.- Si el TBODY contiene mas de lo que se puede ver y activa el scroll lo cual es normal, pero aun asi bajo su espacio limitado me pinta las lineas de los TR no me muestra alli la informacion pero si las lineas con el BACKGROUND en blanco.

Para el primero intente colocando al TR un height de 1em pero nada.. y para el segundo ni la mas minima idea...

Saludos.

Mikmoro · #2 (**permalink**) 02/10/2008, 15:41

Yo no lo entiendo en absoluto. Quizá con el código me haría una idea de lo que hablas.

ugmaster · #3 (**permalink**) 03/10/2008, 11:59

Okis.
El modulito esta hecho en python pero el codigo HTML generado es:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>

<!-- This file generated using Python HTMLgen module. -->
<HEAD>
  <META NAME="GENERATOR" CONTENT="HTMLgen 2.2.2">
        <TITLE></TITLE>

 <LINK rel=stylesheet href="/apps/yepas/styles/document.css" type=text/css title="/apps/yepas/styles/document.css">
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="/apps/yepas/scripts/conceptos.js" ></SCRIPT>

<SCRIPT LANGUAGE="JavaScript" ><!--
function sendForm(form_name,action) {
    document.getElementById("ACTION_FIELD").value=action;
    form_name.submit();
}

//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" ><!--
function setup() {
    var width=506;
    var height=435;
    var win_name=self.name.substring(0,self.name.length-3);
    parent.document.getElementById(win_name).style.width=width+"px";
    parent.document.getElementById(win_name).style.height=(height+26)+"px";
    parent.document.getElementById(win_name).winHeight=(height+26)+"px";
    parent.document.getElementById(win_name+"content").style.height=height+"px";
    parent.document.getElementById(win_name).contentHeight=height+"px";
parent.document.getElementById(window.name+'title').innerHTML='&nbsp;Modulo Conceptos';

}
window.onLoad=setup();

//-->
</SCRIPT>
<div class=windowBody style='width:500px;height:390px;overflow:auto;' align='center'>

<FORM METHOD="POST" ACTION="conceptos.py" ENCTYPE="multipart/form-data" TARGET="workspace" NAME="conceptos">
<input type=hidden name="action" value="show_items" id="ACTION_FIELD"><input type=hidden name="session_id" value="1271"><H3>Buscar:
<INPUT TYPE="text" NAME="buscar" ID="buscar" VALUE="" SIZE=20>
<INPUT TYPE="button" NAME="bbuscar" ID="bbuscar" VALUE="Buscar..."></H3>
<DIV class="contenedor_conceptos" id="grid_conceptos"><TABLE id="gconceptos" border="0" cellpadding="1" cellspacing="1" height="160px" width="100%"><THEAD class="gridHead"><TR><TD>&nbsp</TD><TD>Concepto</TD></TR>
</THEAD>
<TBODY class="gridBody" id="conceptos" style="height:150px;"><TR id="item_0" bgcolor="#E6E6E6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_0'),'click',click_item,false) "></TD><TD width="92%">Entrada X Ajuste de Inventario Fisico</TD></TR>
<TR id="item_1" bgcolor="#F6F6F6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_1'),'click',click_item,false) "></TD><TD width="92%">Entrada X Cambio de Codigo</TD></TR>

<TR id="item_2" bgcolor="#E6E6E6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_2'),'click',click_item,false) "></TD><TD width="92%">Entrada X Cambio de Conversion</TD></TR>
<TR id="item_3" bgcolor="#F6F6F6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_3'),'click',click_item,false) "></TD><TD width="92%">Entrada X Inventario Inicial</TD></TR>
<TR id="item_4" bgcolor="#E6E6E6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_4'),'click',click_item,false) "></TD><TD width="92%">Entrada X Productos de Cortesia</TD></TR>
<TR id="item_5" bgcolor="#F6F6F6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_5'),'click',click_item,false) "></TD><TD width="92%">Salida X Ajuste</TD></TR>
<TR id="item_6" bgcolor="#E6E6E6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_6'),'click',click_item,false) "></TD><TD width="92%">Salida X Cambio de Codigo</TD></TR>
<TR id="item_7" bgcolor="#F6F6F6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_7'),'click',click_item,false) "></TD><TD width="92%">Salida X Merma</TD></TR>
<TR id="item_8" bgcolor="#E6E6E6"><TD align="center" width="8%"><IMG src="/apps/yepas/images/actions/edit.png" alt="edit.png" onclick="addEvent(document.getElementById('item_8'),'click',click_item,false) "></TD><TD width="92%">Traspasos</TD></TR>
</TBODY>
</TABLE>
</DIV>

<DIV class="pedicion_conceptos" id="pedicion_conceptos"><H4>Naturaleza: <SELECT NAME="naturaleza" SIZE=1 title="Naturaleza del Movimiento">
<OPTION Value="1">Entrada
<OPTION Value="2">Salida
</SELECT>
</H4>
<H4>Modulo: <SELECT NAME="id_modulo" SIZE=1 title="Modulo al que afecta el movimiento">
<OPTION Value="1">Compras
<OPTION Value="2">Invetario
<OPTION Value="3">Ventas
</SELECT>
</H4>
<H4>Afecta: 
<INPUT TYPE="checkbox" NAME="afecta_conceptos" ID="afecta_conceptos"></H4>
<H4>Descripcion: 
<INPUT TYPE="text" NAME="descripcion_concepto" ID="decripcion_concepto" VALUE="" SIZE=20></H4>

<INPUT TYPE="hidden" NAME="permisos" ID="permisos" VALUE="t" SIZE=10><DIV class="bconceptos" id="baceptar">Guardar</DIV>
<DIV class="bconceptos1" id="bcancelar">Cancelar</DIV>

<INPUT TYPE="hidden" NAME="tipo" ID="tipo" VALUE="0">
<INPUT TYPE="hidden" NAME="id_concepto" ID="id_concepto" VALUE="0"></DIV>
<SCRIPT LANGUAGE="JavaScript" ><!--
include('/apps/yepas/scripts/niftycube.js',0);
			    addEvent(document.getElementById('bcancelar'),'click',click_cancelar,false);
			    addEvent(document.getElementById('baceptar'),'click',click_guardar,false);
			    NiftyLoad=function(){Nifty("div.pedicion_conceptos","big");						 
						}
//-->
</SCRIPT>
</FORM>

</div>
<div class=buttonsContainer align='right'>
<button id="Nuevo" type=button onClick="this.blur();document.getElementById('pedicion_conceptos').style.visibility='visible';">Nuevo</button><button id="Salir" type=button onClick="this.blur();closepop();">Salir</button>

</div>



</BODY> </HTML>

El archivo de CSS es :

Código:

.contenedor_conceptos{
	width: 100%;
	height: 43%;
	white-space:normal;
	background: WHITE;
}
.pedicion_conceptos{
	width: 50%;
	height: 39%;
	background: #FCFCE6;
	margin: 5pt;
	visibility: hidden;
}
div.pedicion_conceptos h4{	
	position : relative;
	left: 2pt;
	text-align: left;
}

.bconceptos{
	left: 120pt;
	width: 40pt;
	height: 10pt;
	cursor: default;
	bottom: 15pt;	
	position: absolute;
}
div.bconceptos:hover{
	background: #E1E1C2;	
}
.bconceptos1{
	left: 200pt;
	width: 40pt;
	height: 10pt;
	cursor: default;
	bottom: 15pt;	
	position: absolute;
}
div.bconceptos1:hover{
	background: #E1E1C2;	
}

y el resultado se ve mas o menos así:

Como puedes aprecias en la imagen el grid o tabla estalimitada pero se logra ver como se pintaron TR despues del espacio.

Eh estado buscando algo sobre el renderizado... pero nada en concreto.
Se aceptan sugerencias

Mikmoro · #4 (**permalink**) 03/10/2008, 17:19

Buf, realmente complicado, empezando porque con el código que has puesto no he logrado reproducir el problema.

Quizá tenga que ver con la caja

<DIV class="pedicion_conceptos" id="pedicion_conceptos">

que no está visible pero ocupa espacio fìsico.

ugmaster · #5 (**permalink**) 03/10/2008, 18:25

Lo mismos pense ... inclusive eh colocado el stylo directo en el codigo html pero nomas no quiere :S
mmm deja edito el codigo para que pueda reproducir el error.. lo curioso es que si lo ejecuto con firefox 2 todo marcha a la perfección.

Espera mientra aislo la ventana del problema... :S es que por las prisas solo tome el codigo tal cual es generado :)

ugmaster · #6 (**permalink**) 03/10/2008, 18:43

Hola... Listo aqui un ejemplo que reproduce mi problema...

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>

<!-- This file generated using Python HTMLgen module. -->
<HEAD>
  <META NAME="GENERATOR" CONTENT="HTMLgen 2.2.2">
        <TITLE></TITLE>

 <style type="text/css">
<!--
.contenedor_conceptos{
	width: 100%;
	height: 43%;
	white-space:normal;
	background: WHITE;
}
.pedicion_conceptos{
	width: 50%;
	height: 39%;
	background: #FCFCE6;
	margin: 5pt;
	visibility: hidden;
}
div.pedicion_conceptos h4{	
	position : relative;
	left: 2pt;
	text-align: left;
}

.bconceptos{
	left: 120pt;
	width: 40pt;
	height: 10pt;
	cursor: default;
	bottom: 15pt;	
	position: absolute;
}
div.bconceptos:hover{
	background: #E1E1C2;	
}
.bconceptos1{
	left: 200pt;
	width: 40pt;
	height: 10pt;
	cursor: default;
	bottom: 15pt;	
	position: absolute;
}
div.bconceptos1:hover{
	background: #E1E1C2;	
}
.grid {
	border:1px solid gray;
}
.gridHead {
	height:1em;
	background-color:#E6E6E6;
	font-weight:bold;
}
.gridHead td {
	border:1px silver outset;
}
.gridFoot {
	height:1em;
	background-color:#E6E6E6;
	font-weight:bold;				
}
.gridFoot td {
	border:1px silver outset;
}
.gridBody {
	overflow:scroll;
	overflow-x:hidden;
	border-bottom:1px solid gray;
}
.gridBody td {
	border-top:0px;
	border-right:1px solid lightgray;
	border-bottom:1px solid lightgray;
	border-left:0px;
	margin:0px;
	padding:1px;
}
.gridBody tr {
	background-color:white;
	height: 1em;
}
.gridBody tr:hover {
	background-color:#A0A0A0;
	color:white;
}

-->
</style>

</HEAD>
<BODY background=BLUE>
<div class=windowBody style='width:500px;height:390px;overflow:auto;border:solid 1pt;background:GREY;' align='center'>

<FORM METHOD="POST" ACTION="conceptos.py" ENCTYPE="multipart/form-data" TARGET="workspace" NAME="conceptos">
<DIV class="contenedor_conceptos" id="grid_conceptos" style='background:BLUE;'>
<TABLE id="gconceptos" border="0" cellpadding="1" cellspacing="1" height="160px" width="100%">
	<THEAD class="gridHead">
		<TR>
			<TD>&nbsp</TD>
			<TD>Concepto</TD>
		</TR>
	</THEAD>
<TBODY class="gridBody" id="conceptos" style="height:150px;">
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
	<TR id="item_0" bgcolor="#E6E6E6">
		<TD align="center" width="8%">UNO</TD>
		<TD width="92%">Entrada X Ajuste de Inventario Fisico</TD>
	</TR>
</TBODY>
</TABLE>
</DIV>



</BODY> </HTML>

Nota lo ejecuto con FireFox 3 beta 5. si lo ejecuto en firefox 2 no tengo problemas.

Saludos

Mikmoro · #7 (**permalink**) 04/10/2008, 02:58

Lo puedes solucionar añadiendo un overflow hidden al contenedor de la tabla:

<DIV class="contenedor_conceptos" id="grid_conceptos" style='background:BLUE;overflow: hidden;'>

y dándole el porcentaje justo:

.contenedor_conceptos{
width: 100%;
height: 45.6%;
white-space:normal;
background: WHITE;
}

De todas maneras, imagino que te habrás dado cuenta de que en explorer el scroll de la tabla no funciona como quieres.

ugmaster · #8 (**permalink**) 07/10/2008, 14:50

Asi es, jeje por suerte la mayoria trabaja con firefox :P bueno probare la sugerencia que me haces a ver que tal va...

Saludos.

wilburhimself · #9 (**permalink**) 08/10/2008, 21:35

prueba esto, porque FF tiene problemas cuando le asignas un height fijo a un elemento y el contenido de este es mayor:

min-height: 43%;
height: auto !important;
height: 43%;

ugmaster · #10 (**permalink**) 28/10/2008, 09:49

Gracias.. probando sugerencia... les cuento que tal me fue