Questa è la seconda parte non voluta del post sul box model del blog.

La seconda parte è stata aggiunta in seguito ad un lievissimo problema con l’ultima versione del box model che avevo pensato. Per la storia completa vedete il vecchio post.

La versione  su cui stavo lavorando è questa qui:

Piccolo riassunto, la SIDEBAR sta da parte perché è float:left mentre il FOOTER sta sotto perché ho messo il clear:both che impedisce al box di mettersi a fianco della SIDEBAR.

Ora, dovete sapere che il clear è un brutta bestia, infatti  ha una potenza pari ad un calcio rotante di Chuck Norris: spazza via tutto quello che incontra lungo la sua strada.
Immaginate cosa succede se nel CONTENT c’è un elemento con il clear:both settato… il clear tiene conto anche della SIDEBAR e insiste a mettersi sotto anche se è all’interno del div CONTENT.

Ricorrerò al solito  disegnino esplicativo:

Vedete che a un certo punto nel contenuto c’è un elemento con il clear settato Per esempio <br style=”clear:both” />, ma sarebbe stato lo stesso per qualsiasi altro elemento con il clear settato, il quale finisce sotto il menù a causa del clear.
IMHO, questo comportamento è piuttosto stupido e mi stupisco di come in fase di standardizzazione dei CSS non si sia pensato ad un modo per limitare l’efficacia del clear al solo box in cui sta l’elemento.

Togliere i clear dalle gallerie

Forse qualcuno si dirà beh, basta stare attenti a non mettere i clear nel contenuto. E’ quello che ho pensato anche io, quindi la legge di Murphy mi ha colpito immediatamente com’è giusto che sia. Infatti il simpatico gestore delle gallerie di WordPress mette un bel <br style=”clear:both” /> proprio per mandare a capo le righe… producendo questo bel risultato.

Ci sono due modi per sistemare questo casino, il primo è togliere i br smanettando a livello di codice. Questo ha richiesto numerose ore di bestemmie sopra la mai abbastanza denigrata documentazione di wordpress scarna, disorganizzata, incompleta… per non parlare del codice cervellotico che sta dietro a WP.  In pratica si aggiunge un filtro che pre-processa il contenuto del post prima che venga mostrato e con un espressione regolare si tolgono i br.

In realtà c’è un modo più semplice e veloce (che naturalmente mi è venuto in mente solo dopo aver bestemmiato per ore), basta neutralizzare il clear del br via CSS. Normalmente un comando CSS affogato nel codice ha la precedenza su tutto, ma mettendo una direttiva !important nel file CSS si può modificare il comportamento.
Quindi questa regola: DIV.gallery BR{ clear: none !important; } dentro il css sistema il br maligno in maniera definitiva.

Ci sarebbe l’ultima questione in sospeso, come sostituire la funzionalità del br nelle gallerie (ce l’hanno messo per far andare a capo le immagini, non è che non servisse a nulla).
E’ un argomento interessante, ma ora la mia pazienza si è esaurita, per cui chi è interessato va a leggersi l‘articolo su quirksmode che spiega come si fa.

Ok, e con questo dovrebbe  davvero tutto a posto. Immaginate quanto tempo buttato via. Ma ci sono aspetto positivi:

1. Ora ho le idee molto più chiare su box model e alcuni aspetti dei CSS (come il clear)
2. Ho imparato ad apprezzare molto SVN come strumento per andare avanti e indietro nelle versioni del codice prodotto