Legend dei form - contenerne la larghezza

[ubiquo]

Ciao,

qualcuno sa come bloccare la dimensione di un tag Legend? C'è qualche CSS che mi permetta di non farlo sbordare dalla pagina?
Questo un esempio:
http://www.ubiquo.it/test/legend.htm

A parte dire "ok, scrivi un legend più breve", cosa posso fare da codice? Ho notato che solo Opera lo manda a capo. Tutti gli altri browser no.

Chi mi dà una mano?
ciao e grazie.

[Mich_]

Il link non funziona (dominio inesistente, pare).

Comunque al legend si puo` dare un width, oppure max-width.
Che chiaramente non funziona in IE6, ma dovrebbe funzionare negli altri browser (se la stringa inserita non e` troppo lunga senza spazi). Eventualmente anche un overflow puo` aiutare a che` il contenuto non faccia sforare il contenitore.

[ubiquo]

Grazie della risposta.

Sul link strano che non ti funzioni. L'ho provato e a me va, è corretto e il server è su.
http://www.ubiquo.it/test/legend.htm

Su max-width non dà risultati, sia su IE 7 sia su Firefox, però forse il codice in generale della pagina non gli permette di lavorare.

Su overflow sinceramente la scroll bar non la posso usare perché devo realizzare un'interfaccia il più possible accessibile e credo i clienti me la casserebbero.

Intanto ti ringrazio.

Altri suggerimenti?

[Mich_]

Adesso il link funziona. Prima no. Mah misteri della rete.

Anzitutto stai facendo un uso non corretto del tag <legend>, tra l'altro senza l'attributo for.
Il legend serve per dare il nome ad ogni campo, come hai usato in nome e cognome.
Invece lo usi anche per dare dei titoli alle sezioni, cosa che dovresti fare con un tag <hX>.

E comunque se hai dei titoli lunghi, puoi dare width: 100% (o anche meno, se preferisci).


Nella pagina ci sono anche altri tag e attributi usati in modo improprio:
. <table> usato per formattare la pagina
. <table> innestati (non ha senso tranne in casi molto particolari)
. attributi HTML di formattazione (es: cellspacing="0" cellpadding="0"): possono andare in conflitto con i CSS, e a quel punto i browser si possono comportare come vogliono

[ubiquo]

1) Ma scusa, il <legend> non è, citando da questa pagina
http://css.html.it/articoli/leggi/1929/form-con-i-css/
"il tag legend che fornisce una breve descrizione del fieldset" ?
Quindi dovrei averlo usato correttamente. Tu non stai parlando del tag <Label> per caso?

2)Width 100% l'ho messo nei css ma non funziona.


3) Perché i <table> usati per formattare non vanno bene? So benissimo che sono sconsigliati in generale, ma non vengono mai vietati (W3C o Legge Stanca).

4) Non so cosa intendi per <table> innestati. Ad ogni modo può darsi che la struttura della pagina risulti imperfetta. E' che ho pubblicato sul forum solo il corpo della pagina, il resto l'ho dovuto cancellare in quanto è un progetto in lavorazione. Me ne scuso se c'è qualche imperfezione.

5) Sul cellspacing e cellpadding mi apri una porta. Non ho mai trovato il modo di sostituirli via css e sono costretto a metterli, ma ovviamente vorrei evitarli.

Grazie.

[Mich_]

Per il punto 1, mi sa che ho fatto un po' di confusione ... scusa.

Punto 3.
Intanto non e` vero che non sono vietati, eventualmente sono tollerati se non si puo` fare altrimenti (cioe` su pagine vecchie), sia dalle WCAG1 che dai 22 requisiti della 4/04.

Comunque sono un uso errato di una struttura esistente: le tabelle servono per intabellare i dati, quando c'e` una relazione sia verticale che orizzontale. Se non puoi definire un titolo sia per le righe che per le colonne non sono da usare.
E non solo per l'accessibilita`: anche i motori di ricerca iniziano ad usare la marcatura e gli altri elementi semantici per la catalogazione delle pagine, ed in futuro sara` sempre piu` spinto (vedi ad esempio le considerazioni sul Web semantico).

Punto 4.
A questo punto usare <table> dentro un altro <table> e` quanto di piu` assurdo ci sia: per l'accessibilta` (un lettore di schermo inizia a descrivere le varie celle della tabella esterna, poi si addentra nelle celle della tabella interna: l'ascoltatore a questo punto si e` perso, se non e` un computer pure lui), per la catalogazione da parte dei motori e anche per la resa nei brwoser "leggeri".

Punto 5.
padding, margin e border applicato alle celle. E` una cosa di cui si e` parlato molto qualche tempo fa.

Punto 2.
Occorre verificare a cosa si riferisce il 100%: deve essere definita la larghezza del blocco che lo contiene, e se la larghezza e` essa stessa una %, la cosa e` ricorsiva, fino al <body> e all'<html>.

PS: il tag <submit> non esiste, per cui nemmeno il selettore che c'e` in fondo al tuo CSS

[ubiquo]

OK grazie,

prendo atto dei vari problemi della pagina e ti ringrazio degli approfondimenti.

Per il width in % c'è in tutta la gerarchia ma non cambia nulla.

Per i motori di ricerca, nel caso specifico poco importa perché è una intranet, però ho capito il senso dell'appunto.

Per il discorso padding, margin, e border ho fatto dei test dando al selettore table valori 0; non mi funziona, ma non voglio andare offtopic.

Per il discorso delle tabelle annidate, anche qui non vorrei andare fuori forum, però mi chiedo: ma quando uno screen reader accede ad una cella non legge il suo contenuto e quindi le celle dentro di essa? Oppure salta alla cella successiva?

Comunque alla fine purtroppo sto <legend> mi si allunga eheh
Mi toccherà sostituirlo con un header, anche se però così non lo posso legare concettualmente al fiedset in questione.

[Mich_]

Lasciando stare tutto il resto e tornando al <legend>.

Per una prova da' un width di facciamo 500px: se la cosa funziona e` un problema di unita` di misura o di misure dei blocchi superiori, altrimenti vuol dire che il legend non accetta l'attributo width.


PS: ho riguardato la pagina e il CSS:
il legend ha width:100%, ma il fieldset non ha width. Quindi non e` vero che hai messo il width a tutta la gerarchia superiore: almeno uno lo hai saltato.