Forzare il border box model

[frinkia]

Ciao a tutti,

ultimamente ho iniziato a utilizzare pesantemente i div con position absolute per una web application che sto sviluppando.

Mi sono scontrato con le specifiche (a mio avviso assolutamente demenziali) del box model del W3C, che nel caso di dimensione data in percentuale e utilizzo di padding e di bordering, fanno si' che determinati layout siano impossibili da realizzare a meno di demenziali innestamenti di div (e a quel punto mi tenevo anche le table, sinceramente).

Ho cercato abbastanza approfonditamente in rete ma vorrei essere sicuro di non sbagliare: vorrei sapere se esiste un modo per forzare il border box model, cioe' un box model dove se dico:

width: 100%;
border: solid 1px black;
padding: 10px;

venga fuori quello che tutti pensano che sia logico, ovvero un box largo il 100% con il bordo DENTRO e il padding DENTRO.

Se questo si puo' forzare via doctype o via direttive (anche non standard), io sono dispostissimo a scendere a compromessi. Qualunque aiuto e' benvenuto (e per cortesia non venitemi a dire di innestare i div - non voglio e non posso perche' l'xhtml e' generato da delle servlet java che non ho intenzione di andare a modificare).

Grazie a tutti per l'aiuto e scusate un po' il tono arrabbioso ma trovo l'approccio w3c illogico e stupido, e penso di avere perso fin troppo tempo a risolvere un problema legato a uno standard pensato male.

[seed_squall_it]

Su questo mi trovi perfettamente d'accordo. Il box model di IE 5 (quello che considera padding e border come facenti parte della larghezza) è sbagliato secondo le specifiche, ma è anche il migliore per logicità e utilità. Trovo stupidissimo anche io che impostando una width e un border e/o un padding, questi si aggiungano alla larghezza. Secondo me era molto più logico seguire il box model di IE 5, invece di diventare scemi a calcolare i pixel in più o in meno!
Purtroppo, quello che vorresti tu (e pure io) non è contemplato nei CSS2, ma probabilmente lo sarà nei CSS3. Dovrebbero venire introdotte le proprietà box-width e box-height (e anche box-size) che simulano il comportamento del box model di IE 5. Spero che al W3C si siano resi conto dell'assurdità di determinare la larghezza di un box senza considerare padding e border.

Una soluzione, ma non so se può andarti bene, è usare un sistema del genere.
Imposti il tuo <div> senza padding e solo con i border superiore e inferiore:

div {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

Siccome non determini l'altezza, i bordi superiore e inferiore vengono aggiunti "all'esterno" del box allo stesso modo sia in Mozilla che in IE 5/6, ma questo non dovrebbe essere un problema, visto che è la larghezza che ti interessa non sia modificata da padding e border.
Poi, alla regola precedente, aggiungi anche queste dichiarazioni:

background-image: url(IMMAGINE_SFONDO);
background-repeat: repeat-y;

dove IMMAGINE_SFONDO è un'immagine alta anche 1px e larga quanto il box. L'immagine è dello stesso colore dello sfondo del box e su entrambi i lati destro e sinistro ha 1px nero.
Facendola ripetere verticalmente, ottieni l'effetto di applicare 2 "bordi" neri ai lati verticali del tuo box.
Questo però presuppone che la tua width: 100% sia riferita alla larghezza fissa del box contenitore, altrimenti dovresti per forza annidare un <div> all'interno (in modo da poter applicare due sfondi: uno col bordo destro e uno col bordo sinistro).
Infine, e questo purtroppo lo devi fare, aggiungi un box (<div> o

) dentro il tuo box (magari puoi aggiungerlo "a mano" ai contenuti, senza toccare la servlet). Per questo elemento non imposti nessuna larghezza, ma solo un padding verticale di 10px e uno orizzontale di 11px (per compensare il pixel di "bordo" creato dall'immagine di sfondo).

div p {
padding: 10px 11px;
}

Dovrebbe funzionare tutto così...

[frinkia]

Ti ringrazio per la riposta, intanto.

Dalla descrizione, sono sicuro che funzioni, ma non penso di essere disposto a fare una cosa del genere. Pensaci: sembra di essere tornati alle table con le gif trasparenti per fare le spaziature.. ma non si era concepito il box model apposta? Incredibile..

In rete ho trovato due proprieta' CSS3 che sono supportate da Mozilla e figli, che devo ancora testare sotto Internet Explorer. Si chiamano proprio:

box-model

e la equivalente per ora proprietaria di mozilla e':

-moz-box-model

Ora provero' con Explorer.. comunque non ho parole.

[seed_squall_it]

In effetti non hai tutti i torti. Io, pur essendo entusiasta dei risultati che si possono ottenere con i CSS, trovo stupidissime molte cose che il W3C ha approvato. Oltre al box model che a mio avviso è errato interpretato così (se ci pensi, il background si estende anche all'area del padding, che però viene considerata "extra" rispetto alla larghezza dei contenuti), ho trovato ridicolo che abbiano eliminato l'attributo target (e non mi vengano a dire che è un attributo di presentazione...semmai è di azione, infatti viene "simulato" con JavaScript) prima che fossero disponibili le apposite proprietà CSS3.
Anche il fatto stesso dell'accessibilità...inutile che dicano che le popup o le finestre che si aprono all'esterno della pagina sono poco accessibili. La verità è che spesso risultano comode, specie per mostrare anteprime...non sono considerate accessibili solo perché i browser testuali e gli screen reader si trovano "disorientati" al cambiamento del focus. Alla fine, standard o non standard, siamo sempre noi che ci dobbiamo spaccare la testa per risolvere i problemi che i browser stessi dovrebbero risolvere con supporti adeguati!
Poi non mi vengano a dire che gli standard semplificano le cose...lo fanno solo in teoria, perché in pratica, se i produttori di browser non la piantano di fare i comodi loro, gli standard servono a poco. Oggi la gente è "costretta" a usare Windows XP e quindi IE 6, che come tutti sanno, è il peggior browser per il supporto ai CSS, dopo la sua versione 4. IE 5 è nettamente migliore, tanto che spesso si comporta come Firefox. Bisognerebbe che la gente la smettesse di usare IE 6 e scaricasse Firefox, ma la maggior parte non ha una linea abbastanza veloce e non capisce quanto sia pessimo IE 6. Detto tra noi (andando un pochino OT), mi è partito il disco del PC fisso...quindi devo comprare un nuovo PC, visto che il mio è un Pentium 3 di 6 anni fa. Beh, comprerò nuovo l'hardware, ma XP non lo installerò mai e poi mai! Mi dà la nausea solo a vederlo con tutti i buchi che ha, il SP2 che non risolve niente (e blocca tutto) e IE 6 che vale meno di zero. Installerò il mio caro vecchio Windows 2000 Professional SP4...quello è un sistema come si deve e ha IE 5 bello e pronto. Per testare le mie pagine su IE 6, vado da un amico oppure uso XP che ho su un portatile (finché è sul portatile mi sta anche bene...se capita qualcosa formatto tutto, visto che non ho dati importanti).

Cmq non penso che quello che hai trovato funzioni su IE...sia per il fatto che sono proprietà CSS3, che per il fatto che IE difficilmente supporta molte di quelle CSS2 (o le supporta a modo suo)...figurarsi queste!

[webus]

Originariamente inviato da frinkia
ultimamente ho iniziato a utilizzare pesantemente i div con position absolute per una web application che sto sviluppando.

solitamente con elementi posizionati non hai molta necessità di elementi liquidi (come impostando larghezze in percentuale). Ovviamente però non conosco le tue esigenze.

Mi sono scontrato con le specifiche (a mio avviso assolutamente demenziali) del box model del W3C, che nel caso di dimensione data in percentuale e utilizzo di padding e di bordering, fanno si' che determinati layout siano impossibili da realizzare a meno di demenziali innestamenti di div (e a quel punto mi tenevo anche le table, sinceramente).

secondo le spec CSS i parametri padding, margin, border e width si sommano SEMPRE.

Microsoft aveva inizialmente elaborato un suo diverso DOM, quello che appunto hai citato. Il fatto che abbia poi lo abbia abbandonato dovrebbe voler dire qualcosa, no?

vorrei sapere se esiste un modo per forzare il border box model, cioe' un box model dove se dico:

width: 100%;
border: solid 1px black;
padding: 10px;

venga fuori quello che tutti pensano che sia logico, ovvero un box largo il 100% con il bordo DENTRO e il padding DENTRO.

puoi sempre eliminare il DTD dalla declaration e forzare il browser ad usare un layout engine in quircks mode (il vecchio modello IE5).

In laternativa ti ricordo che margin, padding e border accettano valori negativi.
CSS2 prevede anche min-width e max-width, che purtroppo Explorer non supporta. Tante volte sarebbero stati sufficienti a risolvere il tuo problema.

Buona fortuna.

[frinkia]

In laternativa ti ricordo che margin, padding e border accettano valori negativi.

Se questo e' vero, riabbraccio il model w3c.

PS: il fatto che microsoft abbia abbracciato il box model w3c significhera' qualcosa, ma significa anche qualcosa che nei CSS 3 esiste una proprieta' che si chiama box-model

[seed_squall_it]

Mi sbaglierò, ma non mi pare sia così...margin accetta effettivamente anche valori negativi, ma che io sappia, padding e border no.

[webus]

Originariamente inviato da seed_squall_it
Mi sbaglierò, ma non mi pare sia così...margin accetta effettivamente anche valori negativi, ma che io sappia, padding e border no.

my bad!
Hai ragione, padding e border non accettano valori negativi.

[frinkia]

Perche' mi hai illuso.. disgraziata

[webus]

Originariamente inviato da frinkia
Perche' mi hai illuso.. disgraziata

perché disgraziato(*o, please )?

margin consente valori negativi, e restano validi gli altri spunti.

Non basta? in caso, dacci un link da vedere.