display:inline IE diverso da FF

[inside1]

Ciao a tutti,
ho creato un elenco disposto su tre colonne utilizzando il display:inline, ma mi sono accorto che con FF sono riuscito a centrare le trecolonne alla pagina, ma con IE queste rimangono spostate verso sinistra.

Ecco il codice html

<div id="box-topricerche" > 


<font size="2">I PIU' RICERCATI</font></p>
<div class="topricerche-tit">titolo1</div>
<div class="topricerche-tit">titolo1</div>
<div class="topricerche-tit">titolo1</div>
    </div>

Questo il codice del css.

#box-topricerche{ 
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
MARGIN: 0 0 0 0; 
PADDING-TOP: 0; 	
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #393194;
line-height: 14px;
font-style:bold;
}
.topricerche-tit{
  display:inline;
  float: left;
  width: 31%;
  margin: 0;
  border: solid white 1px;
  font: 12px normal bold Arial, Helvetica, sans-serif;
  background-image: url(img-home/bg-richieste.gif);
  padding: 0.5em;
  text-align: center;
}

nella classe topricerche-tit aumentando la larghezza in IE si va a centrare, però con FF mi va a capo....
C'è un sistema per fare in modo di vederli entrambi centrati ?
Grazie mille
Notte

[Sky]

Impostando i margini destro e sinistro del div #box-topricerche su "auto" ottieni la centratura di un elemento su molti browser, ma non su tutti.

Per la piena compatibilità uso un trucco (tratto a sua volta da Constile.org) basato sul posizionamento relativo e agendo sul margine sinistro. Eccolo:

.box-topricerche {
  position: relative;

  /* spostiamo il margine sinistro
    del "contenitore" al centro */
  left: 50%;

  /* diamogli una larghezza */
  width: 230px;

  /*       impostiamo il margine sinistro
     negativo a metà larghezza del contenitore */
  margin-left: -115px;
}

Se poi il contenitore ha una larghezza impostata in percentuale, allora meglio ancora. Nel tuo caso, 3 colonne al 30% danno un div #box-topricerche pari a 30 x 3 = 90%. Per centrare il tutto è sufficiente impostare solo la proprietà "left" a metà larghezza rimanente (100% - 90% = 10% -> 5%), e il gioco è fatto. Senza impostare quindi anche la proprietà "margin-left".
Nota: non ho impostato la larghezza al 31%, altrimenti restava il 7% di larghezza, e al margine possiamo impostare solo numeri interi! :P

Credimi, è più a dirsi che a farsi, non spaventarti per questa spiegazione lunga. Spero di aver centrato il problema! :P

PS: se vogliamo essere pignoli, dovresti usare le liste di definizione anziché i tag div e p; è semanticamente più corretto. Qui trovi un articolo che ne parla: http://pro.html.it/articoli/id_635/idcat_8/pro.html

Ciao ciao :)

[inside1]

Ciao
mille grazie tutto chiaro...
per le liste di definizione ci penserò più avanti quando sarò diventato un pochetto più bravo, anche se ho dato un occhiata alla pagina che mi hai detto e non mi sembra molto complicato come discorso, almeno per gli esempi riportati in quel tutorial.

Abuso ancora un secondo della tua pazienza...
Fino ad ora stavo testando la pagina con IE e FF, 10 minuti fà mi è venuta la bella idea di visualizzare la mia pagina con NETSCAPE 6... ahimè macello...
Con dispiacere ho notato che la visualizzazione con NET viene un pò sballata per esempio

<DIV id=search-home>
    

</p>
    <div id=testo-search>Ricerca Prodotti </div>
	<div id=btn-search>[img]btn-search.jpg[/img]</div>
    <div align="center"></div>
    <div id=box-search>
      <input type="text" size="40">
    </div>
	<br style="clear:both;" /> 
  </DIV>

questo il css

#search-home{
	top: 108px;
	width: 747px;
	position: absolute;
	background-color: white;
	border-bottom : #616161 1px solid;
}
#box-search{
top:15px;
position:absolute;
left:245px;
float: left;
}
#testo-search{
top:18px;
position:absolute;
left:120px;
}
#btn-search{
top:18px;
position:absolute;
left:590px;
}

il pulsante (l'immagine), guardando la pagina con NET ,assume una posizione diversa guardando la medesima pagina con IE e FF.
Questo perchè ?

E ovviamente non solo questo inconveniente
Tnks

[Sky]

Purtroppo non so risponderti, perché non uso netscape :/
Personalmente credo sia superfluo testare i siti su quel browser, ormai chi usa più Netscape...
Ha troppe limitazioni, è obsoleto, chi lo usa lo fa "a proprio rischio e pericolo" :P

[inside1]

Quindi tu pensi che posso anche fare a meno di testarli con Netscape... te lo chiedo in quanto volevo fare un sito di una certa importanza e non vorrei fare principalmente delle brutte figure...
Cmq per i prossimi giorni preparo qualcosina almeno posso far vedere il layout come dovrebbe essere strutturato e poi lo si vede insieme, sempre che ti và.

Ciao e mille grazie

[inside1]

Ciao
Come promesso ho preparato una bozza della struttura del layout.
Nella pagina che segnalerò ci sono due link, vista layout e vista codice.
Vista Layout è la rappresentazione di come si dovrebbe vedere visualizzato il layout (per altro con IE,FF e NET si vedono pressapoco uguali) e vista codice, cioè la rappresentazione di come si dovrebbe vedere la pagina guardando il codice html.

La bozza è QUI

Per essere più chiaro, l' header ( cioè dove c'è l' immagine che ha la scritta LOGO.IT) vedendo il sito si trova in cima, ma se si visualizza il codice html lo si trova in fondo al codice...

E' possibile realizzare una cosa del genere facendo in modo che sia visualizzabile bene anche su altri browser? Se si come dovrei procedere ?

Mille grazie

[inside1]

Allora ho trovato una valida soluzione, almeno per il mio progetto va più che bene...

Ho diviso il layout in due livelli principali posizionati in modo assoluto. La parte dell'header e del menu li ho messi in uno dei div assoluti, il restante nell' altro livello assoluto. Per ora può andare bene così... ho provato con tre browser diversi ed tutto ok, non ho provato con altre risoluzioni ma appena posso ci provo...

Parlo di risoluzioni in quanto con andrea.paiola e Mich_ si è parlato del problema di visualizzazione su diverse risoluzioni utilizzando i livelli assoluti.

Ecco una parte del loro prezioso intervento

Originariamente inviato da Mich_
Cioe` sarebbe facile se usassi i posizionamenti assoluti, ma sono sconsigliati, per problemi di compatibilita` con le varie risoluzioni.


Inviato da andrea.paiola:

questo non è del tutto vero: anche se ad un elemento dai display:block e position:absolute poi lo puoi "posizionare" per esempio con dei margin in percentuale rendendo quindi la struttura "fluida" e funzionante a diverse risoluzioni... sto giusto usando questo sistema in un sito che sto facendo...


Interessante l' intervento di andrea... e avrei da chiedere in merito all' utilizzo dei margin.. Ai livelli assoluti devo applicare la percentuale al margine destro e sinistro ?

Mille grazie

P.S.Mi scuso con i moderatori ma questo era un thread più aggiornato rispetto a quello dove avevano partecipato andrea.paiola e Mich_

[andrea.paiola]

Originariamente inviato da inside1

Interessante l' intervento di andrea... e avrei da chiedere in merito all' utilizzo dei margin.. Ai livelli assoluti devo applicare la percentuale al margine destro e sinistro ?

io parlavo di posizionamento percui darai per esempio margin-left e margin-top per posizionare rispetto il lato sinistro e superiore della pagina in % per posizionare "liquidamente"

tieni conto che se usi position:absolute togli l'elemento dalla cascata del documento e lo piazzi su un altro livello (non inteso come div, ma concettuale) percui le misure dovranno essere date rispetto ai limiti del documento

[inside1]

Cioè intendi che utilizzando i posizionamenti assoluti dovrei impostare le altezza fisse dei livelli ?
Se si, ecco perchè prima spiegavo di aver utilizzato due livelli assoluti dove al loro interno ho messo gli altri rivelli ma con posizionamenti relativi in modo da avere il documento a cascata...

Mille grazie...