Foros del Web » Creando para Internet » CSS »

Problema con CSS TBODY en Firefox 3

Estas en el tema de Problema con CSS TBODY en Firefox 3 en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 02/10/2008, 13:40
Avatar de ugmaster  
Fecha de Ingreso: abril-2008
Ubicación: Veracruz, México
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 1
Problema con CSS TBODY en Firefox 3

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.
__________________
"Lo que aun no existe... es porque el ser humano aún no lo ah imaginado..."
  #2 (permalink)  
Antiguo 02/10/2008, 16:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con CSS TBODY en Firefox 3

Yo no lo entiendo en absoluto. Quizá con el código me haría una idea de lo que hablas.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 03/10/2008, 12:59
Avatar de ugmaster  
Fecha de Ingreso: abril-2008
Ubicación: Veracruz, México
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con CSS TBODY en Firefox 3

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
__________________
"Lo que aun no existe... es porque el ser humano aún no lo ah imaginado..."
  #4 (permalink)  
Antiguo 03/10/2008, 18:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con CSS TBODY en Firefox 3

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 03/10/2008, 19:25
Avatar de ugmaster  
Fecha de Ingreso: abril-2008
Ubicación: Veracruz, México
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con CSS TBODY en Firefox 3

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 :)
__________________
"Lo que aun no existe... es porque el ser humano aún no lo ah imaginado..."
  #6 (permalink)  
Antiguo 03/10/2008, 19:43
Avatar de ugmaster  
Fecha de Ingreso: abril-2008
Ubicación: Veracruz, México
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con CSS TBODY en Firefox 3

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
__________________
"Lo que aun no existe... es porque el ser humano aún no lo ah imaginado..."
  #7 (permalink)  
Antiguo 04/10/2008, 03:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con CSS TBODY en Firefox 3

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.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 07/10/2008, 15:50
Avatar de ugmaster  
Fecha de Ingreso: abril-2008
Ubicación: Veracruz, México
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con CSS TBODY en Firefox 3

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

Saludos.
__________________
"Lo que aun no existe... es porque el ser humano aún no lo ah imaginado..."
  #9 (permalink)  
Antiguo 08/10/2008, 22:35
 
Fecha de Ingreso: octubre-2008
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Problema con CSS TBODY en Firefox 3

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%;
  #10 (permalink)  
Antiguo 28/10/2008, 10:49
Avatar de ugmaster  
Fecha de Ingreso: abril-2008
Ubicación: Veracruz, México
Mensajes: 73
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con CSS TBODY en Firefox 3

Gracias.. probando sugerencia... les cuento que tal me fue
__________________
"Lo que aun no existe... es porque el ser humano aún no lo ah imaginado..."
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




La zona horaria es GMT -6. Ahora son las 17:18.