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ú 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