forzare la larghezza a un elemento di lista

[Rekdal]

Ciao a tutti...
Sto creando un menu non ordinato, secondo questa struttura

<ul class="download">
[*]PrimaVocePrimaVocePrimaVocePrimaVocePrimaVocePrima Voce
<li class="voceCorrente">Seconda Voce
[*]Terza Voce
[*]Quarta Voce
[*]Quinta Voce
[/list]


Cosa succede ora? Nel primo elemento di lista ho inserito una voce molto lunga per vedere se andava a capo automaticamente, ma niente, sborda e continua sulla riga.
Sapreste indicarmi la soluzione?

[fcaldera]

definisci una larghezza per i[*]
e assegna loro word-wrap: break-word;

attenzione però: a questo punto il testo sarà troncato ovunque per andare sulla seconda riga, ovvero può capitarti che un testo lungo ma spaziato vada a capo così

testo molto lungo ch
e può andare a capo

Ciao

[Rekdal]

Non funziona. Con Firefox 3 per Mac perlomeno.

Questo è il css

.download{
width:124px;
margin:0px 5px 0px 20px;
padding:0;
list-style-type: circle;
text-align:left;
}
.download li {
margin-bottom:5px;

}
.download li a, a:visited {
display: block;
width:130px;
word-wrap: break-word;
text-decoration:none;
}

.download li a:hover {
text-decoration:underline;

}

[fcaldera]

cambia così

    .download li a,
    .download li a:visited {
        width       : 130px;
        word-wrap   : break-word;
        -moz-binding	: url(wordwrap.xml#wordwrap);  
        text-decoration:none;
    }

metti questo file nella cartella del file css o del file html che contiene queste regole

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">
    <binding id="wordwrap" applyauthorstyles="false">
	<implementation>
		<constructor>
			//<![CDATA[
			var elem = this;
			doWrap();
			elem.addEventListener('overflow', doWrap, false);
			
			function doWrap() {
				var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
			 	while (walker.nextNode()) {
					var node = walker.currentNode;
                    node.nodeValue = node.nodeValue.replace(/\s{2,}/g, ' ');
					node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
				}
			} //]]>
		</constructor>
	</implementation>
    </binding>
</bindings>

e chiamalo wordwrap.xml

dovrebbe funzionare

Ciao

[Rekdal]

Funzia!
Grande

[pictor]

Originariamente inviato da fcaldera
cambia così

...

e chiamalo wordwrap.xml

dovrebbe funzionare

Ciao

Scusate se mi intrometto.
Ma cos'è tutto quel pappardello di javascript e xml? Perchè viene usato?
Firefox non supporta già le proprietà CSS correttamente?

E poi questo rende non più accessibile il sito, no? (l'utilizzo di behavior o 'altro' in Javascript)

[fcaldera]

Originariamente inviato da pictor
Ma cos'è tutto quel pappardello di javascript e xml? Perchè viene usato?

E' l'equivalente degli hypertext component .(HTC) che usa IE, ma per mozilla

Originariamente inviato da pictor
Firefox non supporta già le proprietà CSS correttamente?

Non supporta correttamente la proprietà word-wrap: break-word;

Originariamente inviato da pictor
E poi questo rende non più accessibile il sito, no? (l'utilizzo di behavior o 'altro' in Javascript)

No, la cosa peggiore che può capitare è quella di vedere il testo che deborda in mancanza di js, (brutto da vedere però lo vedi comunque) quindi è un progressive enhancement.

[pictor]

Originariamente inviato da fcaldera
E' l'equivalente degli hypertext component .(HTC) che usa IE, ma per mozilla

Non sapevo esistessero

Non supporta correttamente la proprietà word-wrap: break-word;

Buffo :master: ... o meglio 'strano'

No, la cosa peggiore che può capitare è quella di vedere il testo che deborda in mancanza di js, (brutto da vedere però lo vedi comunque) quindi è un progressive enhancement.

Giusto: JS non è il male assoluto

E' curioso che stessi leggendo dei progessive enhancement proprio mentre me li hai citati (e non ne avevo mai sentito parlare prima!)...

[Rekdal]

Integrazione: il problema, perlomeno con il menu da me sviluppato, sembra verificarsi solo con Firefox per Mac. Può essere che IE7 e FF per PC (nonchè Safari, per PC e MAC) gestiscano in modo corretto l'impaginazione del testo all'interno di un elemento di lista, e che invece FF per Mac continui a presentare un bug inq uesto senso?

[pictor]

Ci sta.
Dovresti cercare documentazione sui bug di quella versione del browser
Prova a Googlare: <nome browser e versione> css bugs