RSS del sito
Il ben noto a tutti bottone giallo del PayPal che permette ai proprietari e autori dei siti di raccogliere le donazioni (e finanziare in tal modo i propri progetti) è uno strumento bello, comodo e utile. Allo stesso tempo, però, molto spesso causa un problema fastidiosissimo agli sviluppatori front-end: sopra e sotto il bottone potrebbero comparire, senza essere voluti, degli enormi spazi vuoti unitili di origine sconosciuta.
Ebbene, eliminarli è molto più facile di quanto possa sembrare.
Il codice html del bottone «Donazione» fornitoci dal sito di PayPal è il seguente:
<form action="https://www.paypal.com/donate" method="post" target="_top"> <input type="hidden" name="hosted_button_id" value="SSG9AUUBGY5XJ" /> <input type="image" src="https://www.paypalobjects.com/it_IT/IT/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Fai una donazione con il pulsante PayPal" /> <img alt="" border="0" src="https://www.paypal.com/it_IT/i/scr/pixel.gif" width="1" height="1" /> </form>
In realtà esistono anche altre versioni grafiche dello stesso bottone con i codici di inserimento propri, ma la soluzione del problema è sempre la stessa.
La colpa degli spazi vuoti di cui sopra è della sequenza dei tag <input> e <img> nel codice riportato sopra: nel foglio di stili CSS del nostro sito – sulle pagine del quale viene inserito il bottone – potrebbe essere impostato il margin superiore e/o inferiore per quei tipi di tag (come per tutti gli elementi che si trovano nel div del contenuto della pagina). Nel caso specifico, i tag <input> e <img> del buttone PayPal sono invisibili all’utente, ma il CSS del nostro sito non lo sa e applica comunque i margin che abbiamo impostato. Di conseguenza, la soluzione più semplice del problema degli spazi vuoti inutili secondo me si realizza in due passaggi:
1. Mettiamo il codice del bottone tra i tag <div class="paypalbutton"> … </div>
2. Nel file CSS impostiamo il margin pari a zero per i tag contenuti nel div appena creato.
.paypalbutton { float: both; padding: 0; marin: 0; }
.paypalbutton input { padding: 0; }
.paypalbutton img { padding: 0; }
Nelle situazioni pratiche concrete capitate a me il metodo ha funzionato come previsto: gli spazi inutili sopra e sotto il bottone sono spariti!
Tempo fa nel codice del bottone fornito dal sito di PayPal erano presenti pure dei tag <br />: anche essi contribuivano ad aggravare il problema degli spazi vuoti. Nessuno può garantirci che un giorno non tornino nelle nuove versioni del codice, quindi per sicurezza vi avviso: se li vedete, toglieteli con serenità (sono inutili al fine del funzionamento del bottone).
Bene, a questo punto non mi resta altro che ricordarvi di usare l’opzione delle donazioni per sostenere i vostri siti preferiti: ovviamente nei limiti del possibile.
