Ciao a tutti,
sto scrivendo le regole css per il sito che sto facendo. Vi allego una immagine per chiarire le idee.


Ora, se aprite il file, noterete un leggero effeto "rilievo" su quella banda blu con lo slogan. Praticamente l'ho ottenuta con Gimp aggiungendo il bordo di 1px bianco, seguito da 1px sul grigio, sia sopra che sotto.

Al momento dello slice delle immagini ho ritagliato una porzione di barra larga 1px da poterla ripetere orizzontalmente. Il problema è che, mentre dentro Gimp i 2 pixel di bordo ( 2px sopra e 2 sotto, 1 bianco e 1 grigio ) risultavano nitidi, nella immagine risultante dallo slice, al momento della visualizzazione nel browser, i 2 pixel erano "slavati"e non riuscivo ad ottenere l'effetto voluto.
Non so se mi sono spiegato bene. Non so se questo dipenda da Gimp, o dal formato jpg o png che usavo.
Allora ho pensato bene di risolvere giocando un po' con i bordi, i colori di sfondo e i margini.

Vi allego la porzione di css interessata:

codice:
...

div#fubar {
	background: #D4D4D4;
	padding-top: 0.5px;
	padding-bottom: 0.5px;
}

div#fubar h4 {
	font-size: 16px;
	line-height: 38px;
	color: #fff;
	padding: 0 ;
	margin-top: 0.5px;
	margin-bottom: 0.5px;	
	margin-right: auto;
	margin-left: auto;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	background: #009de0 url(../img/fubar-gradient.png) repeat-x center;
}

...

e questo è il markup a cui fa riferimento:

codice:
<div id="fubar">
		<h4>il nuovo concetto di disinfestazione</h4>
	</div>
Che dire, funziona tutto...su Firefox
Internet Explorer non visualizza correttamente i bordi dell'immagine, li ignora. Probabilmente per il problema nell'interpretazione del block model ( che per inciso, non ho capito bene cosa comporta ).
Come posso avere la stessa resa anche su Internet "xxxxx" Explorer?

Ciao.
Marco.