tabella in <DIV> che non si centra!!!

[giunap]

Salve a tutti.

Magari sarà il caldo e la mia mediocre conoscenza dei css, oppure ho fatto un po' di casini col codice pero' HO UN PROBLEMA:

questo e' l'html:


<div id="footerSI" style="background-color:red">
<table class="tabSI" >
<tr>
<td>
</td>
<td>



<asp:Image id="Image3" runat="server" ImageUrl=".." CssClass="img_reg_campania"></asp:Image></p>
</td>
<td>
</td>
<td>
</td></tr>
<tr>
<td>
<asp:Image id="Image2" runat="server" ImageUrl="../images/logoue.gif" AlternateText="..." CssClass="img_reg_campania"></asp:Image></td>
<td >
<span id="creditSI">Portale
cofinanziato dall'Unione Europea con il FESR


nell'ambito del P.O.R. Campania 2000 - 2006 - Misura 6.2 -


Sviluppo della Società dell'Informazione
</span>
</td>
<td><asp:image id="Image1" runat="server" ImageUrl="../images/logorc.gif" AlternateText="..." CssClass="img_reg_campania"></asp:image></td>
</tr>
</table>
<p style="text-align:center;">
<a href="http://validator.w3.org/check?uri=referer">
</a>
<a href="http://jigsaw.w3.org/css-validator/">
</a>

</p>

</div>


e questo il css:

#footerSI {
border: 1px black ;
color: #e6e6fa;
text-align: center;
width: 100%;
clear: both;
margin: 10px 0px 20px 0px ;
position: relative;
padding: 5px 0;
}

.tabSI
{
text-align: center;
}


non riesco a capire perche' in firefox (v.1.5) la tabella non si allinea al centro, mentre in internet explorer (v.7.0 beta) si allinea al centro

qualcuno che ancora non e' partito per le vacanze...???

grazie

[seed_squall_it]

Per centrare un elemento nel suo contenitore (body compreso) IE segue come sempre la strada sbagliata. Per IE devi infatti dichiarare text-align: center nella regola di stile del box che contiene l'elemento che vuoi centrare in esso. Firefox, diversamente da quella brutta copia di un browser che è IE, segue gli standard. E gli standard dicono che per centrare un elemento nel suo contenitore, devi impostare i margini orizzontali dell'elemento da centrare sul valore auto. Quindi in un caso come questo:

<div id="container">
<div id="page">...</div>
</div>

devi specificare le seguenti regole:

#container {
text-align: center; /* Centra orizzontalmente tutti i box contenuti in #container per IE */
}

#page {
text-align: left; /* Ripristina l'allinemento del testo a sinistra, altrimenti resterebbe centrato */
margin: 0 auto; /* Centra orizzontalmente il box #page all'interno di #container per i browser aderenti agli standard */
}

Altra cosa, per ottimizzare un po' il CSS: quando hai dei valori di lunghezza che sono 0, non serve che indichi l'unità di misura. Nel tuo caso hai:

margin: 10px 0px 20px 0px;

che può diventare tranquillamente:

margin: 10px 0 20px;

Se noti, non ho indicato nemmeno il margine sinistro. Infatti, essendo mancante, il browser assume che sia uguale a quello destro che è 0.

[giunap]

mmm sai che non funziona?
ora la situazione e' questa:

CSS:

#footerSI {
	border: 1px black ;
	color: #e6e6fa;
	text-align: left;
	width: 100%;
	clear: both;
	margin: 0 auto ;
	position: relative;
	padding: 5px 0;
}

uffa....

[seed_squall_it]

Il margin: 0 auto va specificato per l'elemento che vuoi centrare nel suo contenitore. Quindi, se vuoi che sia il box footerSI, sia il box tabSI siano centrati (uno dentro l'altro ed entrambi nel body), devi scrivere:

body {
text-align: center; /* Centra tutti i box presenti nel body per IE */
}

#footerSI { /* Eredita l'allineamento centrato del testo dal body */
margin: 0 auto; /* Centra #footerSI nel body per i browser aderenti agli standard */
}

.tabSI {
text-align: left; /* Ripristina l'allineamento del testo */
margin: 0 auto; /* Centra .tabSI nel box #footerSI per i browser aderenti agli standard */
}

Poi cmq il box #footerSI risulta sempre centrato nel body, visto che è largo il 100%. Quindi non serve nemmeno impostare i margini di questo box su 0 auto...

PS: Se la Beta di IE 7 segue ancora la strada dell'allineamento centrato del testo per centrare i box, andiamo bene...Mi sa che IE 7 diventerà peggio di IE 6 quando uscirà...

[giunap]

FALSO ALLARME: funziona!

ho messo

margin: 0 auto ;

anche nella regola per la tabella, e funziona.

grazie mille, davvero!
spero di essere capace di ricambiare, in futuro!

bye

[Lionheart86]

Avevo anche io lo stesso problema quindi ne approfitto