[crossbrowser] posizionamento div differenti

[Immaginando]

Ciao a tutti!
ho un problemino con i posizionamenti dei div nei vari browser.
Allora, ho un div liquido che contiene altri 3 div affiancati... e fin qui tutto bene;
uno di quei 3 div, esattamente quello centrale che anch'esso liquido, e' diviso in 4 sezioni (che sono bottoni)
(forse e' meglio vedere l'img che allego)

Bene in IE si vede come l'Img allegata, con FF il box centrale divisoin 4 si sposta sulla sx ed e' piu' piccolo, mentre con Opera addirittura il box centrale si sovrappone parzialmente a quello di sx!
Come fare x evitarlo?!

ecco il codice in questione:

css:

#boxMacroaree {
	background-color: #FFFFFF;
	background-image: url('texture02.gif');
	width: 100%;
	border: 1px solid #FFFFFF;
	z-index: 27;
	height: 161px;
}

#boxMacroaree  .boxSx{
	width: 234px;
	float: left;
}
#boxMacroaree  .boxDx{
	width: 234px;
	float: right;
}
#boxMacroaree .centrale{
        background-image: url('texture02.gif');
	float: left;
	background-color: #ffffff;
	width: 46% !important; 
	width: auto;
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
}

#boxMacroaree ul{
	margin: 0px;
	display: inline;
}
#boxMacroaree li{
	list-style-type: none;
	display: inline;
	margin: 0px;
}

#boxMacroaree a{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	width: 50%;
	height: 50px !important;
	height: 80px;
	text-align: center;
	padding-top: 30px;
}

#boxMacroaree a:hover{
	text-decoration: underline;
	background-color: #666666;
	color: #ffffff;
}
#boxMacroaree a.btnA{
	background-color: #CCCC00;
	float: left;
	color: #333333;
	
}
#boxMacroaree a.btnB{
	background-color: #ffff00;
	float: right;
	color: #333333;
}
#boxMacroaree a.btnC{
	background-color: #99CC00;
	float: left;
	color: #333333;
}
#boxMacroaree a.btnD{
	background-color: #FFCC00;
	float: right;
	color: #333333;
}

mentre l'xhtml 1.0 con dtd strict:

<div id="boxMacroaree">
    <div class="boxSx">[img][/img]</div>
    <div class="boxDx">[img][/img]</div>
    <div class="centrale"> 
	<ul>
	[*]btn A [*]btn B[*]btn C[*]btn D[/list]
    </div>
 </div>

grazie a chi mi vorra' rispondere
ciaoooo!

[Immaginando]

nessuno sa aiutarmi?!

probabilmente mi sono spiegata male, chidetemi pure!

[Mich_]

In pratica ad IE dici che la larghezza del box centrale e` auto, mentre a FF ed altri dici che dev'essere 46%. Non so se questo e` voluto o se e` il risultato di qualche copia-incolla.

Non e` detto che 46% sia esattamente 100% - 468px.
Anzitutto perche` non conosci la larghezza della finestra del brwoser, ed anche perche` non puoi sapere come il browser effettua gli arrotondamenti (browser diversi possono arrotondare in modo diverso, ed anche computer diversi con lo stesso browser).

Potresti dare il il float:left anche al blocco destro (devi pero` cambiare l'ordine di inserimento): cosi` le differenze si notano molto meno (fino a non potersi notare se sei stata brava a studiare i colori ed i bordi).

[Immaginando]

ok grazie _mich,
tra le varie prove mi sembrava di averla fatta quella del float:left al blocco dx... ma sai ne ho provate tante che forse mi confondo

i 2 diversi valori non sono frutto di copia/incolla, ma voluti, prorpio xche' la parte centrale si dovrebbe poter adattare alle diverse misure delle finestre:
con Ie mi funziona perfettamente mettendo auto mentre con gli altri il miglior compromesso che ho trovato e' stato proprio 46%... ma che non mi fa il 100%, anzi, mi lascia dello spazio, ed e' proprio qs che cercavo di risolvere.

adesso provo cmq a mettere il float:left e a spostare il blocco...
grazie!

[Mich_]

con Ie mi funziona perfettamente mettendo auto mentre con gli altri il miglior compromesso che ho trovato e' stato proprio 46%.

Si`, ma prova anche a stringere la finestra del browser o a visualizzare a risuluzioni piu` alte:
Mescolare % e px e` un obbrobrio dal punto di vista matematico.

[Immaginando]

Si`, ma prova anche a stringere la finestra del browser o a visualizzare a risuluzioni piu` alte:
Mescolare % e px e` un obbrobrio dal punto di vista matematico.

Eh si lo so!
me sono accorta bene,
pero' il problema e' che ho 2 immagini con misure fisse che devono stare ai 2 lati della parte centrale ridimensionabile...
qualche consiglio?!

[Another-Life]

Puoi spiegare con parole semplici che tipo di layout vuoi ottenere?...Magari un disegno puo essere utile.

[Mich_]

pero' il problema e' che ho 2 immagini con misure fisse che devono stare ai 2 lati della parte centrale ridimensionabile...
qualche consiglio?!

Credo che non devi proprio mettercela la proprieta` width nel blocco centrale.
Invece dovresti eliminare esplicitamente padding, border e margin dai vari "bottoni":
padding: 30px 0 0 0;
margin: 0;
border: 0;

Se poi puoi sostituire il padding con il margin (ma non so se hai colori particolari), la cosa diventa uguale per tutti i browser (senza necessita` dell'hack).
Nota che il tuo hack potrebbe non funzionare in IE7: da qualche mese viene consigliato di gestire le differenze solo con i commenti condizionali.

[Immaginando]

Originariamente inviato da Mich_
Credo che non devi proprio mettercela la proprieta` width nel blocco centrale.

Ho provato a toglierlo ma in FF il blocco centrale "cade" e va a finire (in 100%) sotto il blocco anziche' stare tra i due div di sx e di dx.

Nota che il tuo hack potrebbe non funzionare in IE7: da qualche mese viene consigliato di gestire le differenze solo con i commenti condizionali.

Questo infatti me lo chiedevo: fino a quando durera' la storia del !important non capita da IE?!
Non conosco bene i commenti condizionali... sono quelli che si mettono nell'head e che a seconda del browser adottato richiamano il css associato?!
oppure si possono utilizzare anche all'interno dello stesso foglio di stile?!


@Another-Life: ho allegato un disegnino nel mio primo post proprio x cercare di farmi capire

[Mich_]

Questo infatti me lo chiedevo: fino a quando durera' la storia del !important non capita da IE?!

E` gia` superata da IE7.

Non conosco bene i commenti condizionali... sono quelli che si mettono nell'head e che a seconda del browser adottato richiamano il css associato?!

No. Quello e` il browser sniffing (assolutamente sconsigliabile da fare con JS: eventualmente e` da realizzare lato server).
I commenti condizionali sono introdotti e chiusi da "tag" del tipo: Atri esempi partendo dai link tra i "link utili".

oppure si possono utilizzare anche all'interno dello stesso foglio di stile?!

Sono commenti a livello di codice HTML, interpretati solo da IE. Quindi occorre inserirvi uno <style> o un <link>

Ho provato a toglierlo ma in FF il blocco centrale "cade" e va a finire (in 100%) sotto il blocco anziche' stare tra i due div di sx e di dx.

Allora e` perche` e` troppo largo: controlla la somma delle larghezze interne (compreso margin, padding e border) - eventualmente ripassa la teoria sui due box model (quello del W3C e quello di IE-quirks mode).