[CSS]Margini inesistenti e immagini accorciate

kwb · 17-10-2009, 18:40

Sto progettando un sito web e, una volta inseriti tutti gli elementi ( con tanto di padding e quant'altro ) procedo col testare il lavoro completo con tutti i browser principali ( Firefox, IE, Opera, Safari e Chrome ).
Generalmente il tutto va liscio, IE escluso che da sempre qualche grattacapo, risolvibile comunque.
Ora invece, la cosa mi ha lasciato alquanto spiazzato perchè mi ritrovo con 2 bug grafici molto strani, il primo, che si presenta solo con Opera: un'immagine troppo corta rispetto all'elemento superiore, usata per fare il bordo arrotondato. Segue lo screen incriminato:

Come vedete, il contenuto superiore sembra essere più lungo di qualche pixel ( 10?

) rispetto al bordo inferiore. Il bello è che il contenuto sopra è largo 760 px ( 740 di lunghezza propria, 10 di padding destro e 10 di padding sinistro ) così come il bordo arrotondato...

Il secondo bug, si presenta solo con Chrome e Safari: si tratta di un margine o di uno spazio da me mai impostato che non so da dove sia spuntato fuori:

Come si nota dall'immagine, c'è uno spazio tra la fine del contenuto superiore e l'inizio del bordo arrotondato, non mi spiego come sia possibile questa cosa.

Con IE e Firefox questa è la visualizzazione che ottengo, quella da me desiderata:

Di seguito rispettivamente l'HTML e il CSS:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vampire</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<h1>Qui un bel titolo in H1</h1>
</div>
<div id="centrale">
<div id="menu">
<ul>
	<li><a href="#">Non ordinato 1</a></li>
    <li>Non ordinato 2</li>
    <li>Non ordinato 3</li>
</ul>
<ol>
	<li><a href="#">Ordinato 1</a></li>
    <li>Ordinato 2</li>
    <li>Ordinato 3</li>
</ol>
<p>Prova sul paragrafo
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</p>
</div>
<div id="menub"></div>
<div id="content">
<h1>Un h1</h1>
<h2>Qui un H2</h2>
<h3>Proviamo l'H3?</h3>
<ul>
	<li><a href="#">Non ordinato 1</a></li>
    <li>Non ordinato 2</li>
    <li>Non ordinato 3</li>
</ul>
<ol>
	<li>Ordinato 1</li>
    <li>Ordinato 2</li>
    <li>Ordinato 3</li>
</ol>
<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>

<p>Nulla sit amet felis vitae orci facilisis posuere eu porttitor ligula. Suspendisse sit amet sapien vel velit semper dictum. Vestibulum ultrices dignissim tortor, ac tristique mi sodales non. Mauris aliquet, neque ut elementum luctus, erat lacus congue lorem, et convallis turpis sapien id mi. Suspendisse volutpat accumsan elit, a condimentum quam posuere porta. Proin at ligula eu est rutrum ornare sed ut lorem. Duis eget urna in odio volutpat lacinia. Morbi a purus justo, sed sollicitudin nulla. Donec accumsan aliquet risus ac aliquam. Curabitur suscipit dui leo. Donec at augue nunc. Vivamus pretium pharetra nisi, non accumsan dolor faucibus sit amet.</p>
<!--<p>Nunc hendrerit elementum ante fringilla fringilla. Phasellus a accumsan neque. Duis condimentum dignissim nibh luctus laoreet. Integer auctor urna ipsum, at condimentum quam. Aliquam erat volutpat. Cras nec sapien dolor, eget hendrerit libero. Integer non orci quis massa condimentum pellentesque nec ac ante. Etiam vitae libero a mi aliquet convallis. Sed et nunc eu lorem congue rhoncus. Curabitur at elit dui, in tempus velit. Ut ullamcorper vehicula tincidunt. Sed sollicitudin euismod ipsum sed interdum. Proin aliquam, ipsum ac egestas mollis, ligula ante sollicitudin arcu, quis sagittis orci ligula lobortis lectus. In nisi libero, faucibus eu imperdiet nec, iaculis quis risus. Nunc at lectus massa. Nunc mollis dignissim massa in dapibus. Morbi semper posuere lectus aliquam varius.</p>

<p>Mauris suscipit sem a nunc aliquet molestie. Nunc odio dui, sagittis nec porta sed, tincidunt vitae justo. Sed vel metus id eros suscipit mollis. Suspendisse ut sem eros. Proin laoreet elementum blandit. Aliquam rutrum facilisis varius. Duis mollis pellentesque lorem id vulputate. Curabitur placerat mauris ac mi iaculis commodo. Mauris eget feugiat purus. Duis dignissim lectus vel sapien facilisis nec aliquam augue suscipit. Fusce sollicitudin, enim in ultricies laoreet, orci odio aliquet mi, a dapibus leo nisi id dolor. Maecenas risus augue, imperdiet vel aliquet bibendum, scelerisque id erat. Phasellus aliquam justo non lacus semper ullamcorper. Nam ornare ipsum vitae nibh rhoncus dapibus. Mauris massa mauris, consectetur in consectetur a, imperdiet nec dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Integer quis dui luctus nibh sodales varius sit amet et nisl. Fusce commodo accumsan tortor vel fermentum. Aenean faucibus accumsan augue, non ultrices erat rhoncus eu. Nunc erat arcu, egestas eu rhoncus faucibus, ullamcorper at risus. Praesent consectetur, nisi nec fermentum feugiat, tortor nunc iaculis ligula, id posuere urna odio vitae lacus. Donec sit amet urna sit amet lacus elementum luctus a ac orci. Duis augue sem, adipiscing eget pellentesque eget, ultrices nec ante. Mauris at ullamcorper neque. Etiam lobortis condimentum mauris, vel ultricies neque porttitor consequat. Fusce at neque eu ante mollis ullamcorper sit amet eu metus. Donec quis lectus sed nisi suscipit ultrices. Duis feugiat ante vitae urna pulvinar a faucibus sem convallis. In hac habitasse platea dictumst. Fusce tincidunt, sem ut lobortis pharetra, nulla eros venenatis metus, commodo mattis odio leo sed enim. </p>-->
</div>
<div id="contentb"></div></div>
<div id="footer">Qui mettiamo un bel testo di prova per il footer, vediamo come viene anche con <a href="#">un'ancora linkata</a></div>
</div>
</body>
</html>

Codice:

/* Inizo documento CSS
Definiamo alcune regole generali*/

@charset "utf-8";
* { margin: 0; padding: 0; } /* Azzeriamo tutti i padding e i margini dei browser */
body { text-align: center; overflow-x: hidden;/* IE Fix */ background: #111111 url(img/bg.png) no-repeat center; font: Georgia, "Times New Roman", Times, serif; color:#cccccc;}
#wrapper { width: 100%; height: 100%; margin: 0 auto;}
#wrapper a { text-decoration: underline; color: #CCCCCC;}
#wrapper a:hover { text-decoration:blink; color:#FF3366;}

/* Regole per l'header */
#header { background: url(img/header.png) top repeat-x; margin: 0 auto; width: 64em; height: 49px; padding: 25px 0; border-bottom: #333333 thin solid;}
#header h1 { text-align: center;}

/* Definiamo un corpo centrale che racchiuda il menu di sinistra e i contenuti di destra */
#centrale {	margin: 0 auto; width: 950px; height: auto;}

/* Tutte le regole per il menu */
#menu { background: url(img/1px.png) repeat left top; width: 150px; height: auto; text-align: left; float: left; clear: both;}
#menu ol, #menu ul { padding: 10px 0 5px;}
#menu ol li { list-style: inside decimal; border-bottom:#3b0000 thin solid; text-align: center;}
#menu ul li { list-style: inside none none; border-bottom:#3b0000 thin solid; text-align: center;}
#menu a { text-decoration: none; color: #CC3300;}
#menu p { padding: 10px 5px 0;}
#menub { background: url(img/menub.png) no-repeat left bottom; width: 150px; height: 11px; float: left; clear: both; margin-bottom:10px;}

/* 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;}
#content h1 { padding-bottom: 5px; text-align: center;}
#content h2 { padding: 10px 0; font-style: italic;}
#content h3 { padding: 5px 0; }
#content ol, #content ul { padding: 5px 0; }
#content ol li { list-style: inside decimal;}
#content ul li { list-style: inside square;}
#contentb { background: url(img/contentb.png) no-repeat bottom right; width: 760px; height: 11px; margin-left: 180px; margin-bottom: 10px;}

/* Regolamentiamo il footer */
#footer { background: url(img/footer.png) repeat-x bottom left; width: 100%; height: 16px; margin: 0 auto; border-top: #333333 thin solid; text-align: center; padding: 7px 0.31em; clear: both;}

Grazie per l'aiuto

Kwb

kwb · 18-10-2009, 19:23

Non so come, non so perchè, ma il problema che si presentava con Opera sembra essersi risolto. Sembrava essere un problema di cache, eppure l'avevo cancellata, al riavvio di XP, stamattina è funzionato tutto correttamente!
Ora c'è da risolvere il problema con Safari e Chrome

kwb · 18-10-2009, 21:17

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?

18-10-2009, 19:23	#2
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	Non so come, non so perchè, ma il problema che si presentava con Opera sembra essersi risolto. Sembrava essere un problema di cache, eppure l'avevo cancellata, al riavvio di XP, stamattina è funzionato tutto correttamente! Ora c'è da risolvere il problema con Safari e Chrome __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

Strumenti
Mostra una versione stampabile Invia questa pagina per email