[CSS] div annidati in IE 6 e 7

Ciao a tutti,
è da due giorni che sto cercando di capire il perchè di un problema che mi succede con i div ma non ho trovato ancora una soluzione (anche se nel frattempo mi sono quasi fatto una cultura sui vari bug di ie6)

Venendo al problema faccio prima a racontarlo con un esempio:

<div style="border: 3px solid red; margin: 20px 60px; height: 15em; width: 30em; overflow:visible">
<div style="border: 2px solid red; margin: -30px 0pt 0pt -30px; padding: 3px; ">
left: 0;
<br/>
top: 0;
<br/>
margin-left: -30px;
<br/>
margin-top: -30px;
</div>
</div>

La pagina vista con firefox e con ie8 viene letta correttamente, mentre con ie6 e 7 la parte del div interno che fuoriesce viene nascosta.

Lo scopo per cui voglio usare i due contenitore è per ottenere l'effetto che potete vedere sul mio sito per le iniziali dei titoli.

Grazie mille per l'aiuto e la pazienza di leggere questo ennesimo messaggio di richiesta

[ilmiocaos]

Dato che sull'8 va molto probabilmente il problema è dovuto ad un bug...

Già, come del resto molti altri problemi di visualizzazione di ie6 e 7.
Hai in mente qualche soluzione per ovviare al problema nell'attesa che tutti gli utenti passino ad ie8 o meglio ancora a firefox?

se ho capito bene, vuoi fare questo: http://i45.tinypic.com/339pz0p.jpg correggimi se sbaglio xD

Se si, apporta queste modifiche al codice che hai postato:

- Al DIV contenitore, togli l'overflow e metti un position: relative;

- Al DIV interno, metti un position: absolute, un margine al top, non negativo altrimenti rimarrà sopra, nel mio caso ho dato 10px ed un colore al background altrimenti si vede il bordo rosso del contenitore. In più se possibile, imposta anche un'altezza e un line-height della stessa misura per centrare il testo. L'altezza non è obbligatoria, ma è consigliabile impostarla sempre, meglio ancora se si userà un'immagine come sfondo.

In Sintesi:

<div style="border: 3px solid red; margin: 20px 60px; height: 15em; width: 30em; position: relative">
<div style="height: 50px; border: 2px solid red; margin: 10px 0pt 0pt -30px; padding: 3px; position: absolute; background: #FFF; line-height: 50px">
ffffffffffffffffffffffffffffffffffffffffffffff
</div>
</div>

testato con IE 5.5, 6, 7, Opera, Firefox, Chrome e Safari... lo leggono tutti allo stesso modo

Così l'esempio funziona alla perfezione, solo che poi applicandolo alla mia pagina la parte con posizionamento assoluto si sovrappone a tutto il resto

Ma quindi ci devi creare proprio un'intera pagina, con diversi titoli? scusami allora pensavo ti servisse solo quel Box =)

Allora se ci devi fare un'intera pagina ti consiglio di adoperare l' h1 per fare quello. Cioè, nel Css al selettore h1, dichiari tutti i parametri del testo (grandezza, font, ecc...) e fai tutte le dichiarazioni per farlo sbordare a sinistra. Poi tramite uno span imposterai un'immagine di sfondo alla prima lettera =)

In sintesi:

Nel foglio Html scriverai questo:

<h1><span>B</span>envenuti</h1>

Nel foglio di stile questo:

h1 {......}

h1 span {...}

Dovrebbe fare ciò che cerchi, in quanto non devi creare altri box, ma ti avvalli di un tag "predefinito"... o almeno credo, non mi sono mai incappato in titoli sbordanti xD comunque se hai problemi, scrivi, ne veniamo fuori, prima o poi XDD

Speravo fosse una cosa più semplice, per quello avevo fatto un esempio semplificato...

Allora, adesso la mia pagina è fatta così

...
<div class="post">
<h3>
<span class="firstLetter">B</span>
envenuti
</h3>
<div class="contentarea">
<p id="linein">
<span class="firstLetter">B</span>
envenuti sul mio sito ...
</p>
<p>Luoghi come Creta, ...</p>
<p> </p>
</div>
</div>
...

Con lo stile:

h3 .firstLetter{
font-size: 2em;
font-style: italic;
background: #848900;
color: #FFF;
margin:1px 5px 8px -50px;
padding: 5px 8px 5px 50px;
line-height:1em;
overflow:visible;
z-index:100;
/*
position:absolute;
*/
}

Tu mi stai dicendo di mettere il margine negativo all'intero h3 quindi, non solo alla prima lettere come ho fatto io?

No, è giusto, in questa maniera la prima lettera sarà leggermente distaccata dal resto del testo.

Come hai fatto tu, dovrebbe andare bene =) anche perchè, stavo facendo delle prove ed ho applicato le dichiarazioni nello stesso modo xD tranne la grandezza del testo che io uso sempre i px e non gli em xD

Ora, c'è solo un problema, quella BIP di IE ._." non legge i z-index, quindi i div non si sovrappongono e taglia una parte di lettera -.-" momentaneamente devo scappare, poi ci lavoro su per trovare una soluzione ^^" se vuoi provarci, ti dico che dovrai lavorare con i position, e togliere z-index. Oppure lasciarlo, ma creare un foglio di stile con diverse dichiarazioni, solo per IE ^^"

Poi Torno e ci lavoro su xD

Tieni conto che lo z-index l'ho messo solo per abbondare, in ff l'impaginazaione è corretta anche senza; stesso discorso vale nche per l'overflow:visible.

Ok per position, ma come? Se imposto "absolute" devo rivedere tutti i posti in cui lo devo usare (e non sono pochi): io cercavo un modo con un posizionamento più dinamico

Ok, sono tornato xD allora, ti conviene fare inanzitutto 2 fogli di stile uno solo per IE6 e IE7 ^^"

Poi, tratti quello per i normali browser (IE non è normale -.-") normalmente, come indicavi sopra e tutto funzionerà come deve.

In IE dovrai trattare la 1' lettera e il resto del titolo come 2 elementi differenti, ed impostare un absolute ad entrambi.

A farla semplice, devi fare come un menu di navigazione, 2 elementi separati che rimangono sullo stesso piano (display: inline). Ora cosi facendo, sicuramente avrai problemi di sovrapposizioni visto che sei costretto ad usare il position: absolute. Quindi lavora coi margin fino ad allineare lo span al h3. Se il paragrafo, finisse sotto il titolo, lavora coi margini anche li finchè non esce e lo visualizzi normalmente ^^"

E' solo un'idea, non so se funziona... ora provo almeno vedo ^^"

PS: E' un metodo rozzo lo so, ma "date a Cesare ciò che è di Cesare" XD se funziona ti consiglio di lasciare tutto cosi, altrimenti un altro consiglio è quello di sacrificare IE o passare ad una diversa impaginazione ^^"

EDIT: Un pò di lavoro, ho risolto il tutto (almeno credo, se è quello che vuoi fare tu)xD
Per IE ho usato un absolute assegnato solo alla prima lettera... bhe, è un pò difficile da spiegarti a parole xD visto che te la cavi con i CSS ti ho caricato la pagina sul mio sito ^^" guardala con i browser che vuoi, non dovrebbe darti problemi ^^" ti allego anche i 2 file CSS, quello per i normali browser e quello per IE6 e 7 almeno vedi cosa ho fatto xD

http://shankydiary.altervista.org/prova/new_3.html <--- Pagina di prova
http://shankydiary.altervista.org/prova/style.css <--- CSS Normale
http://shankydiary.altervista.org/prova/styleIE.css <--- CSS per IE

Spero di aver capito bene cosa volevi fare xD

Nel frattempo avevo trovato anche io una soluzione usando il tuo consiglio del posizionamento assoluto: mettendo la lettera con posizionamento assoluto il problema era che il resto del corpo si comportava come se non ci fosse, quindi ho pensato di mettere una lettera delle stesse dimensione ma con posizionamento normale, in modo da tenere lo spazio per quella vera

<div class="post">
    <h3><span class="firstLetterFinta">B</span><span  class="firstLetter"> B </span> envenuti </h3>
    <div class="contentarea">
           <p id="linein"><span class="firstLetter">B</span>envenuti sul mio sito dedicat...</p>
            <p>Luoghi come ...</p>
            <p>&nbsp;</p>
     </div>
</div>

con gli stili:

h3 .firstLetter {
	font-size: 2em;
	font-style: italic;
	background: #848900;
	color: #FFF;
	margin:0px 5px 0px -95px;
	padding: 8px 8px 8px 55px;
	line-height:1em;
	overflow:visible;
	z-index:500;
	position:absolute;
}

h3 .firstLetterFinta { 
	font-size: 2em;
	font-style: italic;
	background: red;
	color: #FFF;
	margin: 1px 5px 8px -50px;
	padding: 5px 8px 5px 50px;
	line-height:1em;
	overflow:visible;
	z-index:100;
	visibility:hidden;
}

Ora provo a vedere quale riesco ad inserire più facilmente nelle mie pagine.

Nel frattempo mille grazie per il tempo che mi hai dedicato

No Problem xD io avevo trovato quella soluzione, poi se ti rimane più comodo altro usa tranquillamente l'altro metodo =)

PS: Quando hai sistemato tutto, mi puoi avvertire che elimino le pagine dal mio sito? xD

Ho appensa salvato in locale i yuoi 3 file così sei libero di cancellarli.
Grazie ancora