70n1.com

Como sabéis muchos de los que os dedicais a realizar webs, el microsoft intenet explorer tiene un problemilla cuando se le asigna un ancho fijo a través de un CSS a un elemento <select>, ya que corta tanto el deplegable como después el texto del mismo cuando se despliega, no permitiendo su total lectura. En el Firefox, únicamente se corta el desplegable, pero cuando se pulsa en él, se muestran los textos completos (una solución mucho más clara y limpia).

Esto supone un problema de dificil solución, la única sencilla que había encontrado era la de modificar el ancho al hacer click y volverlo a modificar cuando se deja el elemento, pero esto puede descuadrar muchas páginas, por lo que puede ser una solución no valida en muchos casos.

Acabo de encontrar a través de este blog una buena solución al problema.

Se trata de utilizar este script: ie-select-width-fix.js que necesita para funcionar los archivos yahoo.js, dom.js y event.jsde las librerías javascript del Yahoo User Interface Library (YUI) (únicamente necesita esos tres archivos, no es necesaria toda la libreria).

Para que funcione únicamente tienes que realizar lo siguiente:

1. Evidéntemente, descargar estos archivos y cargarlos en nuestra página web:
   <script language="JavaScript" type="text/javascript" src="js/yahoo.js"></script>
<script language="JavaScript" type="text/javascript" src="js/event.js"></script>
<script language="JavaScript" type="text/javascript" src="js/dom.js"></script>
<script language="JavaScript" type="text/javascript" src="js/ie-select-width-fix.js"></script>
2. Añadirle un identificador (etiqueta id=) al /a los <select> que queramos utilizar:
   <select id="sel1" style="width:150px;"></select>
3. Poner el select dentro de un span con clase “select-box”.
   <span class="select-box"><select id="sel1" style="width:150px;"”></select></span>
4. Incluir a continuación la siguiente línea javascript:
   <script>
new YAHOO.Hack.FixIESelectWidth("sel1");
</script>