Hola,

Me gustaría saber cómo puedo hacer que las opciones de una combo se vean por completo en IE y no se corte el texto hasta el ancho de dicha combo (fíjate en option 2). Por ejemplo con Firefox despliega la combo hasta el límite del texto. Y por supuesto me gustaría que fuera accesible ;-)
Mi código es el siguiente:

<div id="menus">
        <div id="mSecundario">
                <div class="invisible"><h1>Men&uacute; secundario</h1></div>
                <div id="tituloMenu"><span id="accDirectos">Accesos 
Directos:</span></div>
                <div id="listaMenuDos">
                        <div class="listaMenuDosSelect">
                                <select id="select1">
                                    <option class="bg1">-- Acceso por</option>
<option class="bg2">Option 2 Option 2 Option 2 Option 2 Option 2</option>
                                    <option class="bg1">Option 3</option>
                                    <option class="bg2">Option 4</option>
                                </select>
                                <input class="btnSelect" type="button" value="" 
/><br />
                        </div>
                        <div class="listaMenuDosSelect">
                                <select id="select2">
                                    <option class="bg1">-- Áreas</option>
<option class="bg2">Option 2 Option 2 Option 2 Option 2 Option 2</option>
                                    <option class="bg1">Option 3</option>
                                    <option class="bg2">Option 4</option>
                                 </select>
                                 <input class="btnSelect" type="button" value="" 
/><br />
                        </div>
                        <div class="listaMenuDosSelect">
                                <select id="select3">
                                    <option class="bg1">-- Temas</option>
<option class="bg2">Option 2 Option 2 Option 2 Option 2 Option 2</option>
                                    <option class="bg1">Option 3</option>
                                    <option class="bg2">Option 4</option>
                                 </select>
                                 <input class="btnSelect" type="button" value="" 
/><br />
                        </div>
                        <div class="listaMenuDosSelect">
                                <select id="select4">
                                    <option class="bg1">-- 
Barrios/distritos</option>
<option class="bg2">Option 2 Option 2 Option 2 Option 2 Option 2</option>
                                    <option class="bg1">Option 3</option>
                                    <option class="bg2">Option 4</option>
                                 </select>
                                 <input class="btnSelect" type="button" value="" 
/><br />     
                        </div>
        
                </div><!-- listaMenuDos -->
        </div> <!-- fin de secundario -->

</div>    

.invisible{display:none;}

#menus {
        margin: 0.5em 0em 0em 0em;
        float: left;
        width: 11.33em;
        height: auto;
        background-color: green;
}

#mSecundario{
        margin-top: 1em;
        float: left;
        width: 11.28em;
        height: auto;
        border-style: solid;
        border-width: 0.05em;
        border-color: #CCCCCC;

}

#tituloMenu{

        float: left;
        width: 11.28em;
        height: 1.3em;
        padding: 0em;
        margin: 0em;
        background-color: #E00404;
        color: #FFFFFF; 
        padding-top: 0.2em;
}

#accDirectos{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
        padding: 0em 0em 0em 1em;
}

#tituloMenuDos{
        display: block;
        float: left;
        width: 11.33em;
        height: 2em;
        padding: 0em;
        margin: 0em;
        background-color: #E00404;
        color: #FFFFFF;
        
}

#listaMenuDos{
        float: left;
        width: 11.28em;
        height: auto;   
        padding: 0.5em 0em 1em 0em;
        background-color: #F8F8F8;
        color: #FFFFFF;
}

.listaMenuDosSelect{
        float: left;
        width: auto;
        height: auto;   
        padding: 0.5em 0em 0em 0.5em;
        background-color: #F8F8F8;
        color: #FFFFFF;
}

#select1, #select2, #select3, #select4{
        float: left;
        width: 15em;
        height: auto;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 0.55em;
        
        color: #5B5B5B;
        background-color: #FFFFFF;
}

.btnSelect{
        height: 2em;
        width: 1.5em;
        border: 0em;    
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size: 0.65em;
        font-weight: bold;
        text-align:center;
        color: #D70602;
        background-color: #F8F8F8;
        background-image:url("pub/imagComun/ok_fndgris_rojo.gif");
        background-repeat:no-repeat;
        background-position: top left;  
}

Muchas gracias.

_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a