Centrare orizzontalmente DIV, problema IE

[marco61087]

Buongiorno ragazzi, sicuramente questo problema è stato abbondantemente discusso, purtroppo nessuna soluzione mi risolve questo inghippo scomodo.

Allora io uso il CSS di reset di Richard Clark e grazie a questo ho potuto avere dei fogli di stile che andassero bene con tutti i browser, almeno sicuramente quelli più moderni e principali. Ho solo due intoppi con Internet Explorer, uno riguarda le liste con list-style-type che era decisamente sballato e l'ho risolto mettendo l'attributo "none". L'altro ben più importante riguarda l'immagine di sfondo di un DIV, è una lavagna che ho creato, al di sopra della quale nelle varie pagine inserisco una citazione. Funziona tutto perfettamente in Chrome, Safari, Mozilla e Opera..guarda un po' IE da problemi.

Questa è una delle pagine in cui c'è la lavagna:

http://marcomangano.altervista.org/chi-sono.php

Questo è il codice html inserito in una pagina php:

<div id="lavagna">
<div id="testo_lavagna">
<p class="citazione">
<a href="http://www.pensieriparole.it/aforismi/vita/frase-96658" onclick="window.open(this.href);return false">
[...] E' protagonista chi plasma il suo avvenire, con qualsiasi mezzo sia a sua disposizione, sfidando, a volte, anche il destino avverso [...]
</a>
</p>
<p class="fonte">
<a href="http://www.pensieriparole.it/frasi/luciana-toscano/" onclick="window.open(this.href);return false">
Luciana Toscano
</a>
</p>
</div>
</div>

Questo è il codice CSS:

#lavagna { background-image:url(/immagini/varie/lavagna.jpg); height:247px; width:400px; margin-left:80px; display:table; text-align: center; }
#lavagna a { color:#fff; text-decoration:none; }
#lavagna a:hover { color:#fff; text-decoration:none; }
#lavagna a:visited { color:#fff; text-decoration:none; }
#lavagna a:visited:hover { color:#fff; text-decoration:none; }
#testo_lavagna { height:217px; display:table-cell; vertical-align:middle; }
#testo_lavagna p { text-align:left; color:#fff; padding-left:30px; padding-right:30px; }
#testo_lavagna p.citazione { font-size:20px; text-align:left; }
#testo_lavagna p.fonte { font-size:15px; text-align:right; padding-top:10px; }

Spero sia tutto chiaro.

[Prill]

Con ie9 non riscontro differenze. Quale versione di ie usi e in cosa consiste il problema?

edit: display:table non è supportato dalle vecchie versioni di Explorer, se proprio ti è necessario occorreranno dei workaround e dei css appositi solo per Explorer

[marco61087]

Giusto, ho dimenticato la cosa più importante: anch'io ho la versione 9, a questo punto è un mistero. Ho provato a cancellare cronologia ecc, ma non cambia nulla. Non capisco.

Il problema è che l'immagine non si vede al centro ma tutta a sinistra e in alto, il testo è al centro orizzontalmente ma in alto e non al centro verticalmente.

Comunque per il display, onestamente non so se sia necessario. E' stata una delle soluzioni che ho trovato on line e visto che funzionava per tutti (quasi) l'ho lasciata. Se hai altro da proporre, ti ascolto

[Prill]

Una possibile soluzione, con la quale non avrai problemi di centrare verticalmente, ma soprattutto ti lascia la possibilità di inserire citazioni di lunghezze diverse senza dover modificare ogni volta l'altezza del div e avere problemi con l'immagine di sfondo (ed è soluzione crossbrowser):

usare due sfondi, ti allego gli esempi, il primo sarà sul div (immagine più alta delle dimensioni al momento previste, ma non ci importa perché ne sarà visualizzata solo una parte e all'occorrenza si adatterà anche a contenuti più lunghi); il secondo sul paragrafo.

Il codice (ho messo dichiarazioni in linea da portare fuori):

<div style="width:400px; background:url(corniceSuperiore.jpg) no-repeat">
  <p style="background:url(corniceInferiore.jpg) no-repeat bottom; padding:50px 0; margin:0; text-align:center; color:#fff">mio testo</p>
</div>

da regolare a piacere il padding superiore e inferiore

[Prill]

la seconda immagine

[marco61087]

Ho capito perfettamente cosa intendi! In effetti è interessante..appena possibile sperimento e ti faccio sapere! Grazie

[Prill]

c'è una cosa che avevo trascurato nel mio codice, il padding inferiore dovrà essere quanto quello superiore + 12px (l'altezza della cornicetta). Quindi se vogliamo che il testo appaia distanziato 50 pixel dal bordo, il padding dell'elemento interno sarà: 50px 0 62px 0

[marco61087]

Ho provato con la soluzione che mi hai proposto. Nasce il problema però sui bordi in "legno" laterali, quelli restano più corti poi.

Sono riuscito a centrare l'immagine della lavagna sostituendo:

margin-left:80px; display:table;

con:

margin:auto;

Resta però il problema sull'accentramento del testo verticalmente. Mi sono accontentato aggiungendo a questo:

#testo_lavagna p { text-align:left; color:#fff; padding-left:30px; padding-right:30px; }

questo:

padding-top:12px;

Almeno il testo rientra per intero nella lavagna.