Problema con BoxModel su IE5

[Gluck]

Salve a tutti.
Ho creato un piccolo effetto grafico per il mio sito, testato su IE7, IE8 e FF3 e funziona benissimo.
Messo in Intranet dove deve funzionare.... ecco che non funziona perché gli uffici usano IE6!!!!!!!
Il problema penso che sia il fatto che il div Main prende la larghezza della pagina intera su IE6, mentre sugli altri browser si dimensiona al contenuto, essendo display:inline-block;
Qualcuno sa cosa devo fare?

Questo il codice HTML

<div class="MainBoxContainer">
<div class="BoxOrangeContainer">
<div class="BoxContentContainer">
<div class="BoxContent">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>


e questo il CSS

.MainBoxContainer
{
border: gray 0px solid;
display: inline-block;
}
.MainBoxContainer .BoxOrangeContainer
{
border: solid 10px Orange;
overflow: visible;
width: 73%;
}
.MainBoxContainer .BoxContentContainer
{
width: 100%;
border: gray 1px dotted;
background-color: White;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
padding: 5px 0px 5px 0px;
}
.MainBoxContainer .BoxContent
{
}

[blekm]

nel titolo hai scritto IE5

hai provato con i commenti condizionali?

[Gluck]

Il risultato deve essere questo (non considerate i puntini):

-------------------------------------------------
| . . . . . . . . . . . . . . . . . . . . . . . . . . . . . |
|
| testo del box testo del box testo del box testo del box ha ha ha
|
| . . . . . . . . . . . . . . . . . . . . . . . . . . . . . |
--------------------------------------------------

ESEMPIO: http://www.smallbusiness.intesasanpa...e/ita_home.jsp

Il testo appunto deve andare fuori dalla cornice a destra.

blekm: il fatto è che non saprei proprio come fare.

[Gluck]

Dopo aver sudato 7 camice, ho trovato una soluzione che funziona su IE6 e IE7

Non ho provato sugli altri browser e le altre versioni perché dovrà funzionare solo su IE6, se avere voglia provate voi e fatemi sapere.


Questo il MurkUp da inserire nella pagina:

    <div class="MainBoxContainer">
        <div class="BoxOrangeContainer">
            <div class="BoxContentContainer">
                <div class="BoxContent">
                      ...........
                      ...........
                </div>
                <div style="clear: both;">
                </div>
            </div>
        </div>
    </div>

Questi gli stili da applicare:

.MainBoxContainer
{
	background-color: #EA7B10;
	border: outset 1px #EA7B10;
	margin-right: 45px;
}
.MainBoxContainer .BoxOrangeContainer
{
	background-color: white; 
	border: inset 1px white;
	/* margin: 10px 10px 10px 10px; */
	margin: 8px 1px 8px 1px;
}
.MainBoxContainer .BoxContentContainer
{
	border: inset 0px blue;
	margin-left: 0px;
	margin-right: -25px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.MainBoxContainer .BoxContent
{
	border: solid 0px green;
	background-color:white;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 20px;
	margin-right: -10px;
	float: left;
	width: 100%;
}

[fcaldera]

display inline-block è solo parzialmente supportata da IE fino alla versione 7 (inclusa)
per attivarla anche su queste versioni (e solo su elementi non block, quindi non applicabile ai div) è necessario usare un workaround scrivendo queste due regole

.ib {
  display: -mox-inline-box;
  display: inline-block;
}

.ib {
  *display : inline;
}

coì facendo tutti gli elementi (non-block su IE <=7, tutti in ogni altro browser) con classe .ib avranno display inline-block

[Gluck]

Grazie fcaldera, ma questa soluzione purtroppo non ha nessun effetto