Como tener una columna de 1px de ancho en una tabla

Normalmente no suelo trabajar con tablas, pero el otro día surgió la necesidad de crear una tabla que tuviera una columna de 1px de ancho. Concretamente una tabla de 500px con 3 columnas, la primera y la tercera de 1px y el resto de 498px

Este fué el primer html que escribí

Esto es lo que se veía en el navegador

Se aprecia claramente que la parte naranja representa más de 1px. Mi compañera de trabajo Noelia acertadamente completó la parte que faltaba, que era indicar a esas columnas (además de width:1px) la propiedad font-size:1px , ya que de otra manera el navegador establece como tamaño mínimo de la columna el tamaño general de fuente de la página

Realizando estos cambios nos queda el siguiente html:

Que produce la siguiente salida:

Ahora sí .

Combos con ancho fijo en IE (II parte)

Completando con el post anterior, que además acabo de actualizar con una mejora y un ejemplo, vamos a ver como se puede seguir resolviendo el problema de los select con anchos fijos en IE cuando recargamos combos por AJAX.

• La pregunta:¿Que más da que recarguemos el combo por AJAX?

Si que da si utilizamos la directiva innerHTML para inyectar el html escupido en una llamada AJAX. Debido a que la directiva innerHTML es propietaria y no pertenece a ningún estandard la W3C recomienda que ante una llamada AJAX se printe XML (y no HTML) y este sea parseado y añadido por DOM, es decir que al elemento select le vayamos insertando hijos con (appendChild). Esta práctica requiere más código de javascript (parseo de XML, inserción hijos al select, etc..) y debido a las incongruencias entre navegadores y a las prisas no se suele hacer, o al menos resulta más rápido recurrir a innerHTML.

• Vale, utiliza innerHTML e inyectale las option al select

Se puede hacer, pero NO funcionara en IE (esto me suena…). La ñapa propuesta por Microsoft es envolver al select con un div y borrar en cada llamada AJAX el select entero.

Por pasos, nosotros inicialmente tendríamos el siguiente combo:

<select id=”miselect”>
<option>Opcion1</option>
</select>

Para recargarlo haríamos:

document.getElementById(“miselect”).innerHTML = “<option>Opcion2</option>”;

Pero esto NO funciona en IE

La SOLUCIÓN (propuesta por Microsoft):

Envolvemos al select con un div al que ponemos un id

<div id=”miselectDiv”>

<select id=”miselect”>
<option>Opcion1</option>
</select>

</div>

A través de javascript además de inyectarle las option añadimos el propio select (con <select> </select>).

document.getElementById(“miselectDiv“).innerHTML = “<select><option>Opcion2</option></select>”;

Asi SI funcionaria en IE

NOTA:Un error frecuente es olvidar indicar en el select al realizar innerHTML el id si lo tiene o cualquier otro atributo, bien sea class,style, etc.

• Pero, aunque eliminemos el combo que le hemos indicado, ¿funciona la redimension si pongo el id,no?

Las librerias js de yahoo360 escuchan los eventos del control para que cuando el puntero del ratón esté encima se expanda y no recupere su estado inicial, por lo que si al recargar un combo lo eliminamos además se eliminará la “escucha” a ese componente a no ser que se lo volvamos a indicar con new YAHOO.Hack.FixIESelectWidth( ‘nombre_combo’ ); cuando ocurra la respuesta a la llamada AJAX

En el siguiente ejemplo lo podemos comprobar.

Solución a los combos (select) cortados con ancho fijo en internet explorer 6/7

Update 28/11/2007: Añadido un ejemplo. Además me dí cuenta que en lugar de utilizar 3 librerias js sueltas existe una que aglutina las 3, por lo que en lugar de hacer 3 peticiones http haremos 1

Posiblemente quien tenga en su poder una flamante Xbox 360 pensará que Microsoft va llenando de gozo al mundo. Esa falsa percepción terminará si comienza a programar en web y ve como en firefox,opera,etc. todo va ok mientras que en cualquier internet explorer(6 o 7) siempre surgen problemas.Uno más a sumar es el distinto comportamiento entre Firefox e IE cuando defines un combo con una anchura fija (por ejemplo 200px) y alguna opción del desplegable supera ese ancho:

Vista en Firefox o cualquier otro navegador compatible:

Vista en IE 6/7

(Fuente: www.opobusca.com)

Hasta ahora las soluciones que conocía eran 2:

1ª opción: Utilizar los eventos onclick y onblur. En el evento onclick(cuando se haga click) indicaremos que la anchura sea automática, es decir que ocupe el ancho de la option más larga. Por contra en el evento onblur(pérdida del foco) volveremos a indicar que el select ocupe de ancho 100px;

<select onclick=”this.style.width = ‘auto’;” onblur=”this.style.width = ‘100px’;” style=”width:100px;”>
<option>Opcion corta</option>
<option>Opcion mas larga</option>
<option>Opcion mucho mucho mucho mucho mucho mas larga</option>
</select>

El problema de esta solución es que puede acabar con nuestro layout, es decir, al expandirse el combo hasta un ancho no determinado puede provocar que la flotabilidad de los divs se vaya al garete y ocurran “movimientos” de divs.

2ª opción: Simplemente dejar que el select ocupe el ancho más grande no limitando su ancho.

Ninguna de estas soluciones me convencían, pero el otro día encontré este enlace de yahoo 360 (Ver con IE) en este blog.

La solución es perfecta, el select se expande pero no destroza el layout. Quizá lo unico a mejorar es la documentación porque simplemente te remiten a que veas el código fuente y hay algún detalle que puede pasar desapercibido.Vamos paso a paso.

Partimos de un select con tamaño fijo de 200px(podría ser también una clase). Omitimos los option por cuestión de espacio:

<select style=”width:200px”></select>

1. Lo primero de todo es descargarse las librerías javascript necesarias:

ie-select-width-fix.js

Para usar esta librería es necesario bajarse Yahoo User Interface Library (YUI)
No es más que una serie de librerías js que facilitan la creación de controles web, gestión llamadas AJAX crossbrowser, menús, etc. En general utilidades para insertar fácilmente controles en tu web.

No asustarse porque de todas las librerías que contiene el zip solo es necesaria una libreria llamada yahoo-dom-event.js

Importaremos por lo tanto las 2 librerías javascript

2. Indicaremos un id al select, por ejemplo s1.

<select id=”s1″ style=”width:200px;”></select>

3. Envolveremos al select con un span que tenga como clase textualmente select-box.

(no hay que definir este estilo en nuestra css)

<span class=”select-box”><select id=”s1″ style=”width:200px;”></select></span>

4. Es necesaria la siguiente línea javascript (entre marcas de script):

new YAHOO.Hack.FixIESelectWidth( ’s1′ ); // siendo s1 el nombre del combo

Y ya está!! Ejemplo online

Simplemente anotar que en Firefox, Opera, etc no tiene efecto y que puede hacerse en todos los combos que se desee.En caso de duda ver el código fuente del ejemplo online.

En el siguiente post comento que modificación es necesaria hacer para conseguir esta funcionalidad en combos que son cargados por AJAX.

Aislar un error de CSS para identificarlo.Recursos con soluciones para errores

Quizá no parezca una avanzada técnica, pero muchas veces se nos apodera un problema por no saber simplificar el escenario hasta el absurdo para encontrar qué va mal.Definir de manera concreta qué no funciona es a veces tan difícil o más que resolverlo.Comentar código hasta la máxima simplicidad e ir descomentando pequeños fragmentos puede ser la mejor manera.

Esto elude a la frase “esto le ha tenido que pasar a alguien más“, pero ¿el QUÉ?, ¿exactamente QUÉ problema?.

Una vez contestada esta pregunta podemos encontrar soluciones en la red, yo recomiendo sin duda PositionIsEverything en donde se han identificado y catalogado los bug encontrados en Internet Explorer, Opera y Navegadores Gecko (Firefox, Camino, etc.) con sus distintas soluciones.

La última vez que recurrí a ella fue porque, para variar, una página se renderizaba mal en Internet Explorer.Reduje la página al absurdo y me di cuenta que en un div me dejaba mucho más margen a la izquieda que en Firefox.Luego descubrí que exactamente me dejaba el doble al leer el “IE Doubled Float-Margin Bug” que relataba PositionIsEverything.

En el propio blog de Microsoft sobre Internet Explorer se han ido señalando, y en muchos casos resolviendo, los errores relatados (bugs, funcionalidades por implementar, etc.) en PositionIsEverything como si de un TODO list se tratase.

Espero que os sea de ayuda

Herramientas para CSS en Firefox e Internet Explorer

Durante tiempo, escribir una CSS era un proceso totalmente incierto debido a las diferentes renderizaciones que se producían y producen en navegadores basados en Gecko, Opera o Internet Explorer (principalmente el último).

En multitud de ocasiones me he preguntado, ¿por qué ese div aparece abajo? o ¿quién está dejando más espacio del querido, el div de arriba o el de abajo?.

Esta situación conllevaba a una serie de permutaciones de pruebas que no llevaban a ningún lado, y si llevaba a alguno no sabías bien por qué.

Afortunadamente han ido aparareciendo herramientas que nos permiten saber en cada momento los límites de cada elemento, sus márgenes(en el caso de un elemento de bloque), padding, border, estilos heredados, estilos sobreescritos , etc. y de manera gráfica, símplemente poniendo el ratón encima del elemento.

Estamos hablando de Firebug, plugin para Firefox y fundamental para entender que ese div se ha renderizado abajo porque no cabe en la línea anterior,que un div muestra un margin de 10 y no de 15 porque lo ha heredado de un estilo global o que un<p> está dejando un padding de 5px como estilo por defecto.

Además de eso nos permitirá cambiar al vuelo la CSS y ver los cambios al instante, evitando tener que cambiar el código CSS en el editor, salvar y F5.

Aquí os dejo un pantallazo:

Screenshot de Firebug

Bueno eso está muy bien, pero es un plugin de Firefox, ¿qué pasa con Internet Explorer?, pues que por fin han sacado una herramienta similiar compatible con explorer 6 y 7 , se llama IE Developer ToolBar

Para finalizar aquí os dejo un otro plugins más para Firefox:

Web Developer toolbar.

Normalmente estas dos son necesarias ya que entre Firefox e Internet explorer se copa el 98-99% de los navegadores usados a día de hoy, pero siempre queda el compromiso de hacer una web accesible por todos. Opera suele renderizar los contenidos de manera correcta, Camino esta basado en Gecko….

En cualquier caso, ¿conocéis alguna herramienta similar a Firebug en alguno de éstos navegadores más minoritarios?

Introducción a CSS. Lo imprescindible antes de empezar

Seguir un orden a la hora de crear las vistas en cualquier proyecto es fundamental. No diseñar unos layouts, unos estilos generales, etc. puede conllevar a un desbarajuste comparable al mejor spaguetti code en javascript.(Espero asustar con esto)

No creo que nadie se plantee un proyecto en la web sin uso de hojas de estilo en cascada (CSS), pero lo que realmente espero es que nadie se lo plantee sin saber bien que hace o sin saber explotar en un mínimo porcentaje su potencia. Es el claro ejemplo de algo que se supone que te iba a ayudar te acaba ahogando.

Aprender CSS pasa por entender sobre que nos basamos, es decir XHTML + CSS.

Yo recomendaria, o mejor dicho, el w3c recomienda:

• Saber exactamente que es XHTML , ya que seguro que tenemos HTML en mente que ya no están permitido en XHTML (deprecated)
• Familiarizarnos con la terminología de CSS, no hace falta entender todo ni aprenderse las quincemil opciones de estilo que existen para cada instrucción. De nuevo éste es un buen sitio.

Por ahora suficiente. Trata de hacer o probar los ejemplos que salgan, no te desesperes si no los entiendes mucho.Todo es incrementaL, y al final uno va “cerrando conocimientos” con la práctica y cometiendo errores.

Personalmente desaconsejo los típicos manuales tochos de HTML y CSS, y los manuales de “aprenda css en 24 horas” (luego que los informáticos son raros y no salen mucho…).

Toda nueva tecnología tiene una curva de aprendizaje y al principio es duro, pero es mejor entender la base y así poder aprovechar a un buen nivel las bondades que tenga, y que la tecnología realmente te sea útil, que al final es de lo que se trata. Si no es así, quizá no debas usarla.

Seguiremos con ello.