Newsgroup: it.comp.www.html
Titolo: Problema inspiegabile con i CSS

Ciao a tutti...ho un problema che non riesco a risolvere.
Devo creare in una pagina un box tipo finestra windows all'interno del
quale inserirò poi i contenuti.
Per disegnare questo box uso dei DIV con un DIV contenitore al cui
interno creo 3 colonne (3 DIV) e in ognuna di queste colonne creo tre
righe (3 DIV) in modo da avere il DIV contenitore diviso in 9 box che
mi vanno a formare la mia bella finestra (angolo in alto a sx, barra
superiore, angolo in alto a dx, barra sx, contenuto della finestra,
barra a dx, angolo in basso a sx, bordo inferiore, angolo in basso a
dx).
Per gli angoli, la barra superiore, le due barre laterali e la barra
inferiore, uso delle immagini che metto come sfondo al div.
Il problema è che nonostante abbia definito le dimensioni dei div e le
dimensioni delle immagini siano esatte, mi succede che il div che
contiene la barra di sfondo mi viene 3 volte più alto di quello che
dovrebbe essere e quindi l'immagine della barra di sfondo (e dic
onseguenza anche quelle dei due angoli) mi si ripete orizzontalmente.
se imposto il background-repeat su repeat-x risolvo visivamente, ma mi
rimane cmq il problema che i 3 div in fondo sono più alti di quello
che dovrebbero.
Questo mi accade solo con IE (6) mentre con mozilla mi succede un'altra
cosa...praticamente è come se i 3 div di sfondo avessero un margin
negativo...perchè se aggiungo un'altra finestra sotto a quella, mi
accade che si va a collocare leggermente sotto a quella subito
sopra...ù
Un' altro modo con cui ho risolto è stato quello di impostare i 3 div
di fondo con la proprietà overflow impostata su hidden. Cosi risolvo
alla perfezione perchè i box risultano dell'altezza giusta ma rimane
cmq il problema sotto mozilla del margine negativo...
E poi vorrei capire perchè mi da questo problema...mi sembra di aver
scritto il codice alla perfezione.
Le immagini hanno le seguenti dimensioni:
form_top_left.gif 9x17
form_top_right.gif 11x17
form_top.gif 4x17
form_left.gif 9x4
form_right.gif 11x4
form_bottom.gif 4x7
form_bottom_left.gif 11x7
form_bottom.gif 4x7
Il codice html è il seguente:
<div class="sidebcontent">
			<div class="sidebleft">
				<div class="topsbl">&nbsp;</div>
				<div class="centersbl">&nbsp;</div>
				<div class="bottomsbl">&nbsp;</div>
			</div>
			<div class="sidebcenter">
				<div class="topsb">DC STocks</div>
				<div class="centersb">&nbsp;</div>
				<div class="bottomsb">&nbsp;</div>
			</div>
			<div class="sidebright">
				<div class="topsbr">&nbsp;</div>
				<div class="centersbr">&nbsp;</div>
				<div class="bottomsbr">&nbsp;</div>
			</div>
		</div>
Il codice del CSS è:
.sidebcontent{
	width: 195px;
	\width: 195px;
	w\idth: 195px;
	margin: 10px 0px 0px 0px;
	padding: 0px;
	border: 0px;
	background-color: #FFFFFF;
	}
.sidebleft{
	float: left;
	width: 9px;
	\width: 9px;
	w\idth: 9px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-color: #FF0000;
	}
.sidebcenter{
	float: left;
	width: 175px;
	\width: 175px;
	w\idth: 175px;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-color: #00FF00;
	}
.sidebright{
	float: right;
	width: 11px;
	\width: 11px;
	w\idth: 11px;
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-color: #0000FF;
	}
.topsbl{
	width: 9px;
	\width: 9px;
	w\idth: 9px;
	height: 17px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_top_left.gif');
	}
.centersbl{
	width: 9px;
	\width: 9px;
	w\idth: 9px;
	height: 80px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_left.gif');
	}
.bottomsbl{
	width: 9px;
	\width: 9px;
	w\idth: 9px;
	height: 7px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_bottom_left.gif');
	}
.topsb{
	width: 175px;
	\width: 175px;
	w\idth: 175px;
	height: 17px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_top.gif');
	}
.centersb{
	width: 175px;
	\width: 175px;
	w\idth: 175px;
	height: 80px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	}
.bottomsb{
	width: 175px;
	\width: 175px;
	w\idth: 175px;
	height: 7px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_bottom.gif');
	}
.topsbr{
	width: 11px;
	\width: 11px;
	w\idth: 11px;
	height: 17px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_top_right.gif');
	}
.centersbr{
	width: 11px;
	\width: 11px;
	w\idth: 11px;
	height: 80px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_right.gif');
	}
.bottomsbr{
	width: 11px;
	\width: 11px;
	w\idth: 11px;
	height: 7px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url('images/finestra/form_bottom_right.gif');
	}

Nessuno mi sa aiutare????

 Nessuno mi sa aiutare????
perchè vuoi usare a tutti i costi i div ?
vabbè che va di moda e forse è anche elegante ma nel caso specifico
con una tabella risolvi tutto in modo più semplice.
in alternativa...
Dato che le immagini sono cmq sullo sfondo potresti utilizzare
un solo div contenitore a cui applichi come sfondo l'immagini completa
della finestra, all'interno del contenitore piazzi un altro div con gli
opportuni margini e padding per contenere i tuoi contenuti.
ciao
Daniele
-- 
Posted via Mailgate.ORG Server - 
http://www.Mailgate.ORG