agrandar caja a la vez que texto en FF no me va

[imnotinsane]

Hola, tengo este sencillo codigo CSS que no consigo hacer funcionar como me gustaría.

Lo que hago con esto es consultar una base de datos e ir haciendo una lista con el código que adjunto.
El problema es que cuando $datos[titular] es mas grande de una línea, en FF el tamaño del ul queda constante (aunque ponga height:100%), y en IE funciona bien, el ul se agranda a la vez que el texto coje más líneas.

Código:

<ul class='verdana10' style='height:30px; background-color:#ECEEF2;  padding-left:8px; list-style:none; clear:both;'>
				
	<li style='float:left; width:280px; padding-top:8px; padding-bottom:8px;'>$datos[titular]</li>
	<li style='padding-top:3px;'><input type='submit' name='borrar' value='Borrar' style='width:80px;' /><input type='submit' name='editar' value='Editar' style='width:80px; margin-left:4px;' /></li>				
</ul>

a ver si alguien me echa una mano, saludos

[1000i1]

Hola, he probado tu codigo en mi pc, y he hecho un par de pruebas, y asi sin saber muy bien que es lo que tienes que conseguir con este codigo( exactamente como quieres que se muestre), lo que veo es que el problema que tienes, es debido a 2 cosas.

1- No se porque, alguien que lo sepa que te lo explique, pero cuando usas float el div contenedor no se adapta al tamaño de lo que esta "flotando". Prueba de poner en vez de float "display:inline;"

2- Si pones al "ul" una altura determinada esta claro que a la que el contenido sea mas grande que esta altura, pues el contenido se saldra de la caja contenedora, no pongas height en el ul;

Asi conseguiras que todo lo que hay dentro del ul este dentro de tu div, otra cosa es si queda como tu quieres, que eso ya no lo se.

Recuerda que en la mayoria de casos si se ve en explorer como tu quieres y en Firefox no, por muy bonito que lo deje, el que lo hace mal es explorer.

Espero haberte ayudado. Un saludo.

[fer10]

yo tengo una pregunta

<input type='submit' name='borrar' value='Borrar' style='width:80px;' /><input type='submit' name='editar' value='Editar' style='width:80px; margin-left:4px;' />

com sabes cual boton presiono el usuario, si en ambos casos son submit ? y te llegan en el post ? y postean a la misma pagina

[imnotinsane]

He estado probando y es verdad que con los float dentro sale mal, pero con display no consigo hacer lo que quiero, lo pongo en imágnes para que se vea mas claro:

Lo que quiero conseguir,


Lo que me sale si uso float,


Lo que me sale si uso display:inline,


fer10, se cual presiona el usuario porque tienen distintos nombres los botones, de todas formas el código lo recorte un poco, era asi (con un boton oculto para sabe que noticia de la lista quiere borrar)

Código:

<ul class='verdana10' style='background-color:#ECEEF2;  padding-left:8px; list-style:none; clear:both;'>
				<form method='post' name='loggin' action='adminnoticias.php' enctype='multipart/form-data'>
				<li style=' display:inline; width:280px; padding-top:8px; padding-bottom:8px;'>$datos[titular]</li>
				<li style='padding-top:3px; '><input type='submit' name='borrar' value='Borrar' style='width:80px;' /><input type='submit' name='editar' value='Editar' style='width:80px; margin-left:4px;' /><input name='bid' type='hidden' value='$datos[id]' /></li>				
				</form>
			</ul>

[fer10]

lo que pasa es que te falta limpiarlo, con clear both;

[imnotinsane]

no entiendo, un clear both donde ??

[fer10]

no, mira ya te lo implemente de otra manera:

css:

*{
margin:0px;
padding:0px;
}
ul{
background-color:#ECEEF2;
padding:2px 0px 2px 8px;
list-style:none;
clear:both;
width:460px;
font:normal 10px verdana,arial;
}
ul li span{
display:block;
float:right;
width:140px;
}
ul li span input{
margin:5px;
}

html

<ul>
<li>
<form method='post' name='loggin' action='adminnoticias.php' enctype='multipart/form-data'>
<span><input type='submit' name='borrar' value='Borrar'/><input type='submit' name='editar' value='Editar'/><input name='bid' type='hidden' value='$datos[id]' /></span>
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
</form>
</li>
</ul>

es incorrecto poner el form entre <ul> y <li>

[imnotinsane]

muchisimas gracias fer10, quedó perfecto.
Solo una duda: ¿porqué con el span flotando en la derecha funcionó? ¿qué diferencia hay de poner span y li ol ó ul ?

gracias, un saludo

[fer10]

¿porqué con el span flotando en la derecha funcionó?

jejej pues creo que te estabas complicando la vida supongo que li es un list-item osea un cuadro.. no avia necesidad de dividir un cuadro en 2 list-item..

¿qué diferencia hay de poner span y li ol ó ul ?

cada elemento esta echo para algo tiene su fin, a veces ahy maneras para lograr mimas cosas con diferentes elementos, pero semanticamente no es correcto, por lo cual es necesario conocer un poco para que sirve cada elemento y de ahy jugar un poco

ol, ul son listas, tu queires hacer una lista no ? lista de noticias..
li = list item es un item de la lista.. osea una noticia..
entocnes no tenias que divir 2 listas ahy ..

a veces las cosas son mas simples de lo que parecen..

sobre el span la verdad aun desconsco su fin como tal, pero lo uso cuando quiero diferencias elementos dentro de contenidos en linea como <p> y <a>

pero tambien pusite aver usado <div> en vez de <span> y es mas correcto ya que es un bloque =)