Ho scoperto dove sta il problema ma non dove sta la risoluzione.
In pratica, non so per quale ragione, Safari e Chrome i padding interni di un elemento li considerano come esterni a questo, esempio, se metto un paragrafo con paddin basso di 20 px, l'ultimo paragrafo dell'elemento, invece di far allungare lo sfondo dell'elemento, lascierā questo invariato e andrā a imporre il padding a tutti i contenuti sottostanti.
Nel mio caso il problema sta qua:
Codice:
/* Qua tutte le regole per i contenuti */
#content { background: url(img/1px.png) repeat right top; width: 740px; height: auto; margin-left: 180px; padding: 5px 10px 0px; text-align: justify;}
#content p { padding-bottom: 10px;}
#contentb { background: url(img/contentb.png) no-repeat bottom right; width: 760px; height: 11px; margin-left: 180px; margin-bottom: 10px;}
Nell'HTML:
Codice:
<div id="content">
<p><a href="#">Prova</a> ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis massa nec ipsum pretium fermentum. Etiam eleifend ornare enim, nec malesuada neque auctor non. Integer at urna dui. Mauris adipiscing, ligula ac dictum pulvinar, purus leo pellentesque ante, non elementum leo ante sit amet tellus. Donec in nisi erat. Maecenas in felis ac massa laoreet rhoncus et sed nulla. Vivamus dapibus laoreet elementum. Aliquam egestas, velit et congue luctus, diam ante congue felis, sit amet consequat ligula risus ac sapien. Fusce pulvinar, diam non gravida blandit, leo libero sollicitudin metus, at fringilla purus ligula ut arcu. Etiam molestie fermentum sem ac eleifend. Donec et turpis purus.</p></div>
<div id="contentb"></div>
Dovrei riuscire in qualche modo a far capire che il padding va applicato internamente all'elemento e non a tutto il sito...
Come fare?