Joomla.it Forum

Joomla! 1.0.x (versione con supporto terminato) => Le voci di Joomla.it (solo per versione Joomla 1.0.x) => I Template di Joomla 1.0.x => : hermes 28 Jul 2008, 14:20:59

: Background CSS: perché repeat-y non va su IE?
: hermes 28 Jul 2008, 14:20:59

Ciao a tutti,

sto diventando matto su di un template per joomla.

in parole, dovrei definire un box per il mosMainBody() con sfumatura dello sfondo ( dall'alto in basso, fino ad arrivare a bianco - il colore neutro, sfondo del box).

Questo box deve avere bordi ai lati ben arrotondati, pertanto è necessario utilizzare delle immagini per visualizzare i bordi  >:( .

ovviamente il mosMainBody() puo' essere arbitrariamente lungo.
Partanto devo implementare un meccanismo che,
anche nel caso (assai frequente)in cui la lunghezza del body sia maggiore  della lunghezza della sfumatura verticale, vengano correttamente visualizzati i bordi ai lati.

per fare cio'ho utilizzato, un po' da profano, il seguente codice html:

:

<table class="body" width="100%" border="0" cellspacing="0">
<tr class="bd_mid">
<td class="sx"></td>
<td class="ctr" rowspan="2" align="left" valign="top">
<?php mosMainBody(); ?></td>
<td class="dx">&nbsp;</td>
</tr>
<tr class="bd_mid2">
<td class="sx"></td>
<td class="dx">&nbsp;</td>
</tr>
<tr class="bd_btm">
<td class="sx"></td>
<td class="ctr">&nbsp;</td>
<td class="dx">&nbsp;</td>
</tr>
</table>

praticamente ho usato una tabella considerado che il mosMainBody:

• si ritrova la sfumatura nella prima riga della tabella (tramite css, classe bd_mid ctr ) ed i bordi con sfumatura interna, (tramite css, classi bd_mid sx/dx )
• si ricava lo spazio senza sfumatura nella seconda riga, (tramite css, classi bd_mid2 sx/dx )

Applicato il seguente css:

:

/* *************** MAIN BODY  ******************* */

/* top body */

.bd_mid  {
margin-top: none;
padding-top: none;
height: 239px;
}
.bd_mid .sx {
background: url(../images_px/body_mid_sx.png) no-repeat;
}
.bd_mid .dx {
background: url(../images_px/body_mid_dx.png) no-repeat;
}
.bd_mid .ctr {
background: url(../images_px/body_mid_c.png) top center repeat-x;
width: 97%;
}

/* middle body */

.bd_mid2  {
min-height: 0px;
max-height: 100%;
}
.bd_mid2 .sx {
background: url(../images_px/body_mid2_sx.png) top left repeat-y;
min-height: 0px;
max-height: 100%;
}
.bd_mid2 .dx {
background: url(../images_px/body_mid2_dx.png) top right repeat-y;
min-height: 0px;
max-height: 100%;
}


ora, ho provato su firefox e funziona bene  ;D

ma su ie non va...

cio' che fa è visualizzare per la parte nn sfumata
(classi bd_mid2 sx/dx )
un bordino di altezza inferiore a quella richiesta, proporzionale a quanto 'sbarella' il mosMainBody nella seconda riga >:(

chi mi saprebbe gentilmente aiutare?

grazie :)

/D