Hola tengo un menu con las etiquetas <ul><li></li></ul>
Dentro de cada li, despliego un div (con ayuda de jquery) que contiene las opciones de cada item del menu. Este es el codigo del div que se despliega
Código CSS:
Ver original#m-contenedor{
position:fixed;
display:none;
z-index:5;
margin:5px 0 0 0;
padding:5px;
max-width:530px;
background-color:#fff;
border-left:1px solid #f9f9f9;
border-right:1px solid #f9f9f9;
border-bottom:3px solid #2e8b57;
}
#m-contenedor ul{
list-style:none;
list-style-image:none;
padding:0;
}
#m-contenedor li{
list-style:none;
list-style-image:none;
margin-bottom:5px;
padding:0;
}
#m-contenedor .m-cont-columna{
display:block;
float:left;
max-width:215px;
margin-left:4px;
padding:5px;
}
y este es un ejemplo del html:
Código HTML:
<li>Opcion 1
<div id="m-contenedor">
<ul class="m-cont-columna">
<li><a href="folder/script1.php">Opcion 1.1</a></li>
<li><a href="folder/script2.php">Opcion 1.2</a></li>
<li><a href="folder/script3.php">Opcion 1.3</a></li>
</ul>
<ul class="m-cont-columna">
<li><a href="folder/script4.php">Opcion 1.4</a></li>
<li><a href="folder/script5.php">Opcion 1.5</a></li>
<li><a href="folder/script6.php">Opcion 1.6</a></li>
</ul>
<ul class="m-cont-columna">
<li><a href="folder/script7.php">Opcion 1.7</a></li>
<li><a href="folder/script8.php">Opcion 1.8</a></li>
<li><a href="folder/script9.php">Opcion 1.9</a></li>
</ul>
<div class="clear"></div>
</div>
</li>
El caso es que en ie9, firefox, chrome cuando el div class m-contenedor se alarga tanto que "sale" de la pantalla el ultimo ul class m-cont-columna da un "enter" y se muestra abajo del primer ul class m-cont-columna, lo cual es correcto,
pero en ie8 las ul class m-cont-columna quedan en linea y la ultima no se aprecia porque se la "come" la pantalla
http://subir.cc/images/sinttugug.png
pff espero haberme explicado, bueno como podria hacer para que en ie8 obligue a dar "enter" a la ultima (sean 3 o mas ul class m-cont-columna) para que se aprecien todas las opciones del div class m-contenedor
gracias