Background CSS: perché repeat-y non va su IE?

[hermes_surfer]

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 Angry .

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"></td>
	</tr>
	<tr class="bd_mid2">
		<td class="sx"></td>
		<td class="dx"></td>		
	</tr>	
</table>

praticamente ho usato una tabella considerado che il mosMainBody:
[list=1][*] 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 )[/list=1]

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 )

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

[The Captain]

una classe ad una riga (<tr> per intenderci)? Hm.. :master:

prova con:

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

anche se non ho ben capito il problema

[hermes_surfer]

grazie Captain...

ma così come mi hai suggerito nn va...

attribuire 2 classi css ad un elemento equivale a sommarne gli stili,

mentre nel mio caso si ha che:

classe1 -> stile1
classe2 -> stile2
classe1 classe 2 -> stile3

e stile3 nn è la somma di stile1 e stile2

provo a spiegare meglio il problema cn un disegnino (allegato)...

beh, il problema che ho è che su Internet Explorer, i bordi della seconda riga vengono dimensionati male in altezza ( maybe another IE bug? )
come se fosse disturbato dal fatto che l'altezza della riga2 dipende da un elemento posto in riga1 ( il mosBody, per l'appunto )...
, x il resto è tutto ok...

[The Captain]

guarda, adesso non ho tempo per provare la cosa ma ad occhio:

1)max/min-height/width non funzionano su IE per questo l'altezza non va
2)devi settare in percentuale solo il contenuto principale, i bordi arrotondati che sono immagini devono essere in pixel
3)riguardo il sommare gli stili hai ragione, ma di norma non si da uno stile a un <tr>.
Fai così, ad ogni modo:

.body, .body td, .body tr {padding:0;margin:0}
.bd_mid .sx, .bd_mid .dx, .bd_mid .ctr{height:239px}

e elimina tutto il resto (bd_mid e bd_mid2)

sistema questi e fammi sapere.

[hermes_surfer]

ho provato... nn funziona... gli serve l'attributo height in px per la riga2, altrimenti non va...



in che altro modo si potrebbe fare una cosa del genere?

(magari stravolgendo il meno possibile il tutto, visto che c'è anche un megamenu in prima riga ,
che mi ha fatto piangere già tanto )

grazie cmq Captatain...

/D

[hermes_surfer]

risolto

praticamente ho usato 5 colonne

2 per laterale + centrale

così gli angolini (in 2 colonne) hanno lo spazio in width, e i bordi laterali non hanno il problema di gestire la sfumatura interna...

rimane il fatto che IE fa cagare.