altura de fila en explorer: BUG!!

SiR.CARAJ0DIDA · #1 (**permalink**) 02/10/2005, 15:49

Código HTML:

<tbody id="body_comentario_291">
	<tr>
		<th rowspan="2" style="width:130px; vertical-align:top;">
			lalalala
		</th>
		<td style="height:20px; font-weight:normal;">texto loco</td>
	</tr>
	<tr>
		<td id="comentario_291" style="vertical-align:top;">lalalalal</td>
	</tr>
</tbody>

tengo este pedazo de tabla, lo que pasa en explorer es que no hay forma de fijar el alto de la 2da celda de la 1ra fila, cuando el contenido de la 2da fila se agranda se agranda tambien la 1ra fila!!! ya probe forzando el height en la fila y en la celda y no hay caso, hay remedio para esto o simplemente los q tienen explorer que se jodan?

pueden verlo aquí: http://www.torneosnydus.com/noticias...33#comentarios

y ya que estamos, el opera 8.5 no entiende la propiedad max-width/height en las imagenes? porq eso tengo y solo funciona en firefox

saludos!

matius · #2 (**permalink**) 03/10/2005, 04:49

a barbaro, pero para que le das a td un valor en height acaso no sabes que es un valor irreal, tal como lo es align, sabias que el contenido le da el tamaño al alto de la tabla

lo peor es esto: Optimizado para Mozilla Firefox & Opera, IE Sucks , tons, de que te quejas.
y rematas con una contradicción pues mencionas que es "optimizada " :

Cita:

¿Por qué se me ve mal en IE? Porque esta lleno de BUGS e interpreta los estilos como se le canta.

al contrario, el que esta lleno de bugs es tu forma de programar mi querido compa, tu pagina es insalvable tanto en ie, y firefox. Si no sabes de standares css evita usar los tags optimizados que siempre estan fuera de estandar de los navegadores

una solucion sin css usando tablas pegadas dentro de celdas en porcentajes sin valores en alto y con un espaciador que debe ser una gif transparente de 1 pixel a la que le debes dar un nuevo alto (en imagenes claro que se puede)

Cita:

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin título</title>
<style type="text/css">

</style>
</head>

<body>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" bgcolor="#CCCCCC">TyRanusGoSu Promotor <br>
<img name="" src="" width="26" height="18" alt=""><br>
Posts: 134</td>
<td valign="top" bgcolor="#999999"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#FFFFFF"><div align="right">blabla,bla bla </div></td>
</tr>
<tr>
<td width="7%" valign="bottom" bgcolor="#FFFF00"><div align="center">
e<br>
s<br>
p<br>
a<br>
c<br>
i<br>
a<br>
d<br>
o<br>
r<br>
</div></td>
<td width="93%" valign="bottom"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFCC00"> </td>
</tr>
<tr>
<td bgcolor="#999900"><div align="right">
<blockquote class="Estilo1">asssssssssssssssssssssssssssssssss ssssssssssa asss asss ssssssssssssssss assssssssssssssssssssssa saas </blockquote>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#CCCCCC">TyRanusGoSu Promotor <img src="" alt="" name="" width="106" height="96" border="0" style="background-color: #000000"><br>
<img name="" src="" width="26" height="18" alt=""><br>
Posts: 134</td>
<td valign="top" bgcolor="#999999"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#FFFFFF"><div align="right">blabla,bla bla </div></td>
</tr>
<tr>
<td width="7%" valign="bottom"><div align="center">
e<br>
s<br>
p<br>
a<br>
c<br>
i<br>
a<br>
d<br>
o<br>
r<br>
</div></td>
<td width="93%" valign="bottom"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td><div align="right">
<blockquote class="Estilo1">asssssssssssssssssssssssssssssssss ssssssssssa asss asss ssssssssssssssss assssssssssssssssssssssa saas </blockquote>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

lo demas es solo estructurar la salidad con los ids correspondientes a cada tabla, 100% compatible con lo que quieras, claro, tambien con css se puede pero estaria largo de hacer y mejor maquetalo en td y luego pasa el valor de cada celda a un id o class css que no es muy dificil de hacer

SiR.CARAJ0DIDA · #3 (**permalink**) 03/10/2005, 11:31

la verdad q no entendi nada lo que dijiste.. acaso explorer no tiene bugs css ahora? yo lo que hago lo veo en firefox y en opera, si se ve ahi es porque esta bien hecho. que es lo que esta mal? poner una tabla? explicate mejor

matius · #4 (**permalink**) 04/10/2005, 01:45

Cita:

explicate mejor

lo mismo digo. pues solo pegas un pedazo de codigo sin decir si es php o xhtm/html, no pegas los css a los que referencia los id ademas de que muestras la parte de un codigo cliente cuando el problema es de servidor

para no ser muy extenso, se me paso que era php. mi error.
El problema que tienes es simple y llano: no respetas la jerarquia css

el error que te pasa es como si definieras un atributo css en body { font-size: 8px ), es ovbio que si tu solo vas a usar ese tipo de ancho de fuente esta bien y funciona pero si ademas tienes estilos distintos a este, los valores de body interferiran con todas las demas lecturas de fuentes que le sigan y los navegador lo interpretarán diferente.

El error es que has aplicado primero: css externas y ademas embebidas dentro del documento, segunda y mas grave, insertadas dentro de las filas-columnas, esto no es malo si lo usas por separado pero al usarlo al mismo tiempo confundes al navegador aqui un fragmento de lo que pegaste arriba:

Cita:

<td style="height:20px; font-weight:normal;">texto loco</td>

solucion: usa 1 css del diseño general externo para un template en especifico, aplica todo por class o por Id y evita hacerlo directamente por medio de style="css embebido" o evita en su defecto, si lo haces de esta manera, definirlo en el css externo para que no interfiera con los que insertas directamente. ademas de que si declaras atributos de estilo grupal (class) cheques que no interfieran con los del tipo individual (Id) o con otros grupales aplicados a las misma etiqueta o grupo de etiquetas, ademas de que limites el atributo body de css para unicamente background tags o las margin tags. pues entre mas amplio el grupo de accion de una tag mayor incompatibilidad entre tags abra para un mismo documento

y lo siento por no revisar tus codigos css, pues son demasiados al igual que el lenguaje de tu página

SiR.CARAJ0DIDA · #5 (**permalink**) 04/10/2005, 08:39

pero sigo sin saber cual es el problema, si en firefox y opera anda, hay solucion en explorer? yo tengo 95% de los estilos definidos en la hoja de estilos, pero hay casos donde no alcanza con los estilos que tengo y tengo que agregar miles de clases solo para poner un simple atributo como width o height, por lo general es lo unico que suelo definir en el atributo style. entonces dices que poniendo todos los estilos en ona hoja externa va a funcionar?? mmm ahora pruebo

bueno no hay caso, probe el height en todos lados y no entiende..

RoQ · #6 (**permalink**) 04/10/2005, 09:22

no he probado pero que tal si le pones a ese td con 20px de altura que se muestre en bloque.

SiR.CARAJ0DIDA · #7 (**permalink**) 04/10/2005, 10:10

una celda en bloque? eso existe?

probe y nada...

hasta probe lo mas groncho poniento <td height="20"

RoQ · #8 (**permalink**) 04/10/2005, 10:32

como te dije no tenia idea, pense que con el display:block haria que IE tome el height de la celda pero no fue asi.

matius · #9 (**permalink**) 04/10/2005, 14:06

mi unica solucion es esta mara emular max-height/width

primero copia este js en un archivo de texto y renombralo minmax.js

y pega el contenido siguiente:

Cita:

// hace que trabaje IE5+/Win con soporte CSS min/max-width/height

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var minmax_elements;

minmax_props= new Array(
new Array('min-width', 'minWidth'),
new Array('max-width', 'maxWidth'),
new Array('min-height','minHeight'),
new Array('max-height','maxHeight')
);

// Encuedernar. Llamado a todos los nuevos elementos. Sí <body>, se carga; cumprueba
// los elementos con propiedades minmax

function minmax_bind(el) {
var i, em, ms;
var st= el.style, cs= el.currentStyle;

if (minmax_elements==window.undefined) {
// initialise when body element has turned up, but only on IE
if (!document.body || !document.body.currentStyle) return;
minmax_elements= new Array();
window.attachEvent('onresize', minmax_delayout);
// make font size listener
em= document.createElement('div');
em.setAttribute('id', 'minmax_em');
em.style.position= 'absolute'; em.style.visibility= 'hidden';
em.style.fontSize= 'xx-large'; em.style.height= '5em';
em.style.top='-5em'; em.style.left= '0';
if (em.style.setExpression) {
em.style.setExpression('width', 'minmax_checkFont()');
document.body.insertBefore(em, document.body.firstChild);
}
}

// transforma las propiedads escritas con guiones, que no a han sido entendidas
//por el navegador

for (i= minmax_props.length; i-->0;)
if (cs[minmax_props[i][0]])
st[minmax_props[i][1]]= cs[minmax_props[i][0]];

// Agrega elementos con propiedades a la lista, almacena valores de tamaño optimos

for (i= minmax_props.length; i-->0;) {
ms= cs[minmax_props[i][1]];
if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') {
st.minmaxWidth= cs.width; st.minmaxHeight= cs.height;
minmax_elements[minmax_elements.length]= el;
// will need a layout later
minmax_delayout();
break;
} }
}

// comprobará cambios en tamaño de fuente

var minmax_fontsize= 0;
function minmax_checkFont() {
var fs= document.getElementById('minmax_em').offsetHeight;
if (minmax_fontsize!=fs && minmax_fontsize!=0)
minmax_delayout();
minmax_fontsize= fs;
return '5em';
}

// Disposición. Llamado después de la ventana y el cambio de tamaño de fuente.
// Pasa por nuestros elementos elegidos antes y ajusta su tamaño a el mínimo,
// máximo y óptimo
// cualquier eleccion que se haga es apropiada.

// Solicita una nueva re-disposición en el momento en que este disponible
var minmax_delaying= false;
function minmax_delayout() {
if (minmax_delaying) return;
minmax_delaying= true;
window.setTimeout(minmax_layout, 0);
}

function minmax_stopdelaying() {
minmax_delaying= false;
}

function minmax_layout() {
window.setTimeout(minmax_stopdelaying, 100);
var i, el, st, cs, optimal, inrange;
for (i= minmax_elements.length; i-->0;) {
el= minmax_elements[i]; st= el.style; cs= el.currentStyle;

// Limite de tamaño hrizontal

st.width= st.minmaxWidth; optimal= el.offsetWidth;
inrange= true;
if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') {
st.width= cs.minWidth;
inrange= (el.offsetWidth<optimal);
}
if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') {
st.width= cs.maxWidth;
inrange= (el.offsetWidth>optimal);
}
if (inrange) st.width= st.minmaxWidth;

// Limite de tamaño vertical

st.height= st.minmaxHeight; optimal= el.offsetHeight;
inrange= true;
if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') {
st.height= cs.minHeight;
inrange= (el.offsetHeight<optimal);
}
if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') {
st.height= cs.maxHeight;
inrange= (el.offsetHeight>optimal);
}
if (inrange) st.height= st.minmaxHeight;
}
}

// Escaneo. Coprueba el documento a menudo hasta que acabede cargar.
// No hace nada hasta que <body> se carga, entonces llama a un inicio principal.
// Pasa cualquier nuevo elemento encontrado en cada escaneo que este relacionado

var minmax_SCANDELAY= 500;

function minmax_scan() {
var el;
for (var i= 0; i<document.all.length; i++) {
el= document.all[i];
if (!el.minmax_bound) {
el.minmax_bound= true;
minmax_bind(el);
} }
}

var minmax_scanner;
function minmax_stop() {
window.clearInterval(minmax_scanner);
minmax_scan();
}

minmax_scan();
minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);
window.attachEvent('onload', minmax_stop);

@end @*/

ahora vinculalo a tus paginas como:

Cita:

esto funciona en ie 5 en adelante pero no trabaja en mac

caricatos · #10 (**permalink**) 04/10/2005, 15:43

Hola:

Has probado con overflow: hidden;

Al menos en los elementos de bloque es lo único que hace que no se expandan con el contenido.

Saludos

SiR.CARAJ0DIDA · #11 (**permalink**) 04/10/2005, 19:04

no pasa nada... ademas la celda no es elemento de bloque me parece.

matius · #12 (**permalink**) 05/10/2005, 00:51

entonces mi sugerencia es la misma, reestructura nuevamente los valores a todo el documento y el css. es necesario que depures la programacion hasta que encuentres el problema

que es un error en la css o en el documento individual o al mismo tiempo
pues como dije, al guardarla con mozilla y ejecutarla con ie sí se muestra correctamente.

aunque no se que tal te vaya si usas mejor includes que css y disculpa que no pueda ayudar en este caso yo de php se lo más básico asi que me rindo.

SiR.CARAJ0DIDA · #13 (**permalink**) 05/10/2005, 08:56

lol me estas diciendo que programe todo mal solo porque no se ve en ie? ya revise todo y no veo que algo este mal...

Cita:

al guardarla con mozilla y ejecutarla con ie sí se muestra correctamente.

no entiendo eso...

damianx · #14 (**permalink**) 05/10/2005, 23:22

Hola, la solución que te encontré es esta:

Código:

<th class="CC mini_info" style="* position:absolute;* left:70%;* border:0px">#1  24-09-05 15:11 hs.</th>

y en el comentario agregar un par de saltos de linea al principio para que deje el espacio que no genera la posicion absoluta:

<td class="B v_top" id="comentario_246"><br /><br />muy bueno, suerte chicos

De esta forma se cambia apenas el diseño en Explorer (saca el borde negro separador) y se ve perfecto en 1024 y aceptable en 800.
En Firefox al estar los *, se ve igual que siempre.
Lógicamente esta no es la solución más feliz, mi consejo es que diagrames la tabla de otra forma (tal vez hacerla desde 0); pero para salir del paso espero que te sea útil.

NOTA: Con los estilos en línea (como está en el ejemplo) se ve bien, pero por alguna razón al intentar agregárselos a mini_info en forms.css me muestra los caracteres mal, como superpuestos. (efectos colaterales de la posición absoluta

)

un abrazo.

furoya · #15 (**permalink**) 07/10/2005, 15:37

Hola todos :

Me parece que este tema ya fue discutido antes. Yo mismo participé en uno parecido. Pero no lo resolví bien

problema con tablas(urgente porfavor)

Estoy casi seguro de que alguien lo hizo mejor.

A mí sí me mantiene el tamaño en un IE5/6. La diferencia podría estar en la altura de la primera celda, ya que la segunda columna se reparte su altura. Pero una vez superada, la celda superior derecha queda en la misma altura aunque cambie la de abajo.

Código:

<html><head></head>
<body>
<table border="1">
<tbody id="body_comentario_291">
<tr>
<td rowspan="2" style="width: 130px; vertical-align: top;" onclick="document.getElementById('comentario_291').style.height= qwe =prompt('Ingrese una altura en px','150'); document.getElementById('comentario_291').innerHTML = qwe+'px'">
Click para redimensionar la celda inferior-derecha
</td>
<td style="height: 20px; font-weight: normal;" onclick="this.innerHTML= 'Alto= '+ this.offsetHeight +'px'" title="Click para actualizar valor de altura">Alto= 41px</td>
</tr>
<tr>
<td id="comentario_291" style="vertical-align: top; height: 1px;">1px</td>
</tr>
</tbody> 
</table>
</body></html>

Y en Firefox me hace lo mismo.

saludos

furoya