| Precedente :: Successivo |
| Autore |
Messaggio |
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
 Inviato: 02 Ott 2005 19:56 Oggetto: Problema...IE vs FF |
 |
|
Come mai visualizzo in modo diverso (IE e FF) questa pagina?
http://www.atigra.it/test/index.html
Questo il suo css:
http://www.atigra.it/test/stile.css
Il problema grosso lo fa FF, e un po' mi scoccia... le immagini poi non riesco proprio a capire come mai sono tutte disallineate...boh!
Inoltre... volevo metterle il div principale, quello che contiene tutto, attaccato al lato superiore del browser. |
|
| Top |
|
 |
juzo kun
Dio maturo
Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia
|
| Inviato: 02 Ott 2005 20:24 Oggetto: Re: Problema...IE vs FF |
|
|
| atigra ha scritto: | | Inoltre... volevo metterle il div principale, quello che contiene tutto, attaccato al lato superiore del browser. |
Al volo: per attaccarlo al bordo metti | Codice: | | margin:0; padding:0; |
nel body (con questi due comandi togli i bordi che ogni browser mette di default in una pagina, il padding serve per Opera).
Io le immagini le vedo allineate. Appena riesco ad avere IE sottomano per un confronto do un'occhiata al resto (se non mi precede qualcuno  )
Cià
JK |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 09:22 Oggetto: no |
|
|
Nada... non sono stato spiegato... volevo:
1. che il div che contiene tutto fosse appiccicato alla parte alta del browser. Ho fatto la modifica che mi hai detto (Juzo), ma pare non funzionare.
2. che la visualizzazione con FF fosse la stessa che con IE. Spiego le differenze che ho riscontrato:
a) per adesso IE mi posiziona il div che contiene tutto al centro, lasciando quindi un margine uguale sia a dx che a sx; FF me lo allinea a sx (lasciando comunque un "bordicello".
b) IE mi allinea quelle gif che fungono da titolo ai div interni (News, Novità dal Forum, Utente, Webcam, Contatti), FF me li allinea alla sx di ogni singolo div.
3. dopo aver seguito le istruzioni di Rebelia, il mio css non ha più Warnings... adesso che ho fatto qualche aggiuntina me ne mette ancora, indi per cui dopo aver risolto sti problemi ai punti 1 e 2, sistemo anche gli avvisi del validatore.
Riposto gli url delle pagine:
http://www.atigra.it/test/index.html
http://www.atigra.it/test/stili.css
Thanks! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 03 Ott 2005 09:38 Oggetto: |
|
|
devi mettere margin: 0px e padding: 0px a body per appiccicarlo in cima e devi mettere text-align: center nel body e margin: 0px auto 0px auto (cioe' 0px in alto e in basso e misura automatica ai lati) al contenitore principale della tua pagina e il layout sara' centrato anche con i browser non-ie
per il secondo problema, puoi ad esempio inserire il div che contiene i titoli all'interno dell'altro con margin, padding e border 0px, creare una gif che simuli le due righine laterali ed usarla come sfondo per il div contenitore (contenitore del div dei titoli e dei link sottostanti, intendo)
una cosa tipo:
| Codice: |
<div class="sezione">
<div id="sezionelink"></div>
<ul>
<li>blablabla</li>
<li>blablabla</li>
<li>blablabla</li>
</ul>
</div>
|
e nel css:
| Codice: |
.sezione {
background: url(simularighine.gif) repeat-y center top;
}
#sezionelink {
background: url(intestazionelink.gif) no-repeat center top;
height: 30px;
}
|
L'ultima modifica di rebelia il 03 Ott 2005 10:14, modificato 1 volta |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 10:08 Oggetto: senza offesa |
|
|
Cito il problema:
| Citazione: |
2.
b) IE mi allinea quelle gif che fungono da titolo ai div interni (News, Novità dal Forum, Utente, Webcam, Contatti), FF me li allinea alla sx di ogni singolo div.
|
Senza offesa, ma la tua soluzione proprio non l'ho capita... e mi pare un tantino...complicata.. ma come dico sempre io... sono un po' duretto. Il problema ho notato che ce l'ho solo dove ho scritto del testo all'interno del tag
Ho provato a sostituire il tag p con una tabella... e il problema dello spazio/allineamento verticale sembra risolto... ora devo capire come mai IE mi allinea bene anche in orizzontale mentre FF no.
Idee?
Grazie comunque delle celeri risposte!
PS: spero di "essere stato + spiegato" |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 10:10 Oggetto: mi rispondo io |
|
|
Mi rispondo io: ho trovato il problema... 
ho ancora una rognetta... al limite più tardi la posto qua...
grasssssie |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 03 Ott 2005 10:22 Oggetto: Re: senza offesa |
|
|
| atigra ha scritto: | Cito il problema:
| Citazione: |
2.
b) IE mi allinea quelle gif che fungono da titolo ai div interni (News, Novità dal Forum, Utente, Webcam, Contatti), FF me li allinea alla sx di ogni singolo div.
|
Senza offesa, ma la tua soluzione proprio non l'ho capita... e mi pare un tantino...complicata.. ma come dico sempre io... sono un po' duretto. Il problema ho notato che ce l'ho solo dove ho scritto del testo all'interno del tag
Ho provato a sostituire il tag p con una tabella... e il problema dello spazio/allineamento verticale sembra risolto... ora devo capire come mai IE mi allinea bene anche in orizzontale mentre FF no.
Idee?
Grazie comunque delle celeri risposte!
PS: spero di "essere stato + spiegato" |
ti sei stato spiegatissimo gia' al primo giro e mi e' bastato vedere il sito con ff per rendermi conto che tu avessi quel problema ancor prima che chiedessi 
ora: NON sostituire p con tabelle, perche' sono due elementi diversi; qual'e' il tuo problema? che devi in qualche modo obbligare i div a stare allineati
bon: un buon sistema e' annidare il div titolo all'interno del div con cio' che quel titolo descrive:
| Codice: |
<div id="sezione">
<div id="titolo"></div>
blablablabla contenuto blablabla
</div>
|
(nota: nel post precedente ho chiuso male il div titolo, ora ho corretto)
il div sezione fa da contenitore e contiene:
- il div titolo
- il contenuto (link o altro)
in questo modo il titolo (contenuto nel div titolo) e' COSTRETTO a starsene al posto giusto, perche' e' obbligato dai margini del div che lo contiene: ci siamo?
graficamente pero' hai scelto di fare un bordino laterale e questo bordino non deve arrivare in cima al div contenitore (il div che qua sopra ho nominato "sezione"), perche' hai previsto degli angoli arrotondati
per ottenere questo effetto, NON puoi ricorrere a border: 1px solid black, ma devi usare un escamotage
questo escamotage e' SIMULARE il bordino attraverso una gif fatta in questo modo:
bordino - biancobiancobianco - bordino
mettendola come sfondo del div contenitore (="sezione"), la parte alta sara' coperta dall'immagine che fa da background al div titolo, risolvendo il problema degli angoli
spero di essermi spiegata meglio |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 03 Ott 2005 10:24 Oggetto: Re: mi rispondo io |
|
|
| atigra ha scritto: | Mi rispondo io: ho trovato il problema...
ho ancora una rognetta... al limite più tardi la posto qua...
grasssssie |
non ti avevo letto... vabbe', tanto meglio, lo spiegone restera' agli atti |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 10:53 Oggetto: capito |
|
|
Adesso ho capito... ma resto dell'idea che dopo se metto ancora qualcosa tra il tag p, FF mi lascia ancora uno spazio verticale sopra e sotto.
Inoltre, col tuo sistema della gif che simula il bordino... risolvo il problema per le parti laterali (sx e dx), ma non riesco ad avere un bordino sotto (sopra non m'interessa giustamente come dici tu visto che viene coperto dalla gif del titolo).
Sbaglio?!?!?!
Guarda come sono adesso: ho sostituito ai tag p una tabella e in FF non ho più lo spazio sopra e sotto. Solo News (in alto a sx) ha il tag p... la differenza comunque la vedi di sicuro.
PS: so che ci altri problemi... tipo il div viola che non va fino in fondo (in IE risulta invece ok) e il div verde, che dovrebbe stare del tutto sotto... in IE ci va e in FF no! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 03 Ott 2005 11:26 Oggetto: Re: capito |
|
|
| atigra ha scritto: | | Adesso ho capito... ma resto dell'idea che dopo se metto ancora qualcosa tra il tag p, FF mi lascia ancora uno spazio verticale sopra e sotto. |
certo, perche' il tag p prevede spazio sopra e sotto: se non lo vuoi, basta dare margin: 0px
| Citazione: |
Inoltre, col tuo sistema della gif che simula il bordino... risolvo il problema per le parti laterali (sx e dx), ma non riesco ad avere un bordino sotto (sopra non m'interessa giustamente come dici tu visto che viene coperto dalla gif del titolo).
|
dai al div contenitore (=sezione) border-bottom: 1px solid black
| Citazione: |
Guarda come sono adesso: ho sostituito ai tag p una tabella e in FF non ho più lo spazio sopra e sotto. Solo News (in alto a sx) ha il tag p... la differenza comunque la vedi di sicuro.
|
in realta' e' una falsa soluzione, perche' il testo dovresti metterlo comunque all'interno del tag p anziche' li' senza null'altro come hai ora:
| Codice: |
<table border="0">
<tr> <td>testo dati utente</td>
</tr>
</table> |
e tra l'altro border: 0px dovrebbe stare nel css e non nel tag
| Citazione: |
PS: so che ci altri problemi... tipo il div viola che non va fino in fondo (in IE risulta invece ok) e il div verde, che dovrebbe stare del tutto sotto... in IE ci va e in FF no! |
in questo momento non ho ff sottomano per un confronto, ma posso assicurarti che si tratta di bachi di ie e non di ff, per strano e "scomodo" che possa sembrare  |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 11:34 Oggetto: posto meglio |
|
|
Posto meglio l'ultimo problema:
http://www.atigra.it/test/index.html
http://www.atigra.it/test/stili.css
In IE tutto ok.
In FF: il div verde che si chiama #corpo (a cui ho aumetato le dimensioni del bordo per maggiore visibilità) dovrebbe "contenere il tutto". Come mai non lo fa visivamente? Non riesco a trovare una soluzione... qualche idee dee/i del css/div??? |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 12:00 Oggetto: bachi di IE!?!?!? |
|
|
Bachi di IE e non di FF?!?!?! Strano, direi il contrario, ho controllato vari volte il css e il file html che lo richiama, e mi pare tutto ok. I div si aprono e si chiudono tutti correttamente... boh! è un bel mistero, e mi scoccia molto visto che uso principalmente FF. Spero qualcuno riesca a trovare una soluzione...
Intanto grazie. |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 03 Ott 2005 12:01 Oggetto: Re: posto meglio |
|
|
| atigra ha scritto: | Posto meglio l'ultimo problema:
http://www.atigra.it/test/index.html
http://www.atigra.it/test/stili.css
In IE tutto ok.
In FF: il div verde che si chiama #corpo (a cui ho aumetato le dimensioni del bordo per maggiore visibilità) dovrebbe "contenere il tutto". Come mai non lo fa visivamente? Non riesco a trovare una soluzione... qualche idee dee/i del css/div??? |
premesso che il css lo guardero' da casa (qua ho qualche difficolta' a scaricarlo), cosa intendi per "contenere visivamente"? |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 03 Ott 2005 12:16 Oggetto: guarda qui |
|
|
Nel codice html il div #corpo (con bordo verde) contiene tutto quello che deve contenere mentre se lo guardi (quel "visivamente" che ho usato prima) con FF risulta come la seguente immagine:
http://www.atigra.it/test/home_ff.gif
In pratica sembra che il div abbia alzezza zero. Mettendo height: 100% o auto o proprio non dichiarando l'altezza, non cambia niente.
Ti posto anche il css:
| Codice: |
body {
background: #FFFFFF;
color: #000000;
text-align: center;
font-family: arial, "century gothic", verdana, sans-serif;
font-size: 80%;
margin: 0px;
padding: 0px;
}
#esterno {
position: relative; top: 0px;
height: 100%;
width: 900px;
border: none;
margin: 0px auto 0px auto;
}
#testata {
background-image: url(logo/logo_atigra.jpg);
background-position: left;
background-repeat: no-repeat;
height: 100px;
width: 900px;
margin: 0px 0px 3px 0px;
border: none;
}
#language {
position: absolute; top: 7px; right: 0px;
width: 160px;
border: none;
font-size: 10px;
}
#menu {
width: 900px;
margin: 3px auto 3px auto;
border: 1px solid #2A73F8;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline; /*trasformazione di un elemento blocco in un elemento in linea */
margin: 0px;
padding: 12px;
}
#menu a {
color: #0292D9;
font-weight: bold;
text-decoration: none;
}
#menu a:visited {
color: #056788;
}
#menu a:hover {
color: #FFFFFF;
background: #7EDAF8;
}
#corpo {
height: auto;
width: 900px;
position: relative; /*margin: 10px auto 3px auto;*/
border: 4px solid #06D388;
}
#corpo a {
color: #0292D9;
text-decoration: none;
}
#corpo a:visited {
color: #056788;
}
#corpo a:hover {
color: blue;
text-decoration: underline;
}
#right img {
border: 0px;
}
#left {
width: 150px;
margin: 3px auto 3px 3px;
border: 1px solid #F3ACF7;
float: left;
}
#left_ultime_news_titolo {
height: 18px;
width: 144px;
margin: 0px 3px 0px 3px;
border: none;
background-image: url(img/news.gif);
background-position: center;
background-repeat: no-repeat;
}
#left_ultime_news {
width: 142px;
margin: 0px 3px 3px 3px;
border: 1px solid #8B9196;
border-top: none;
}
#left_ultimi_forum_titolo {
height: 18px;
width: 144px;
margin: 0px 3px 0px 3px;
border: none;
background-image: url(img/newsforum.gif);
background-position: center;
background-repeat: no-repeat;
}
#left_ultimi_forum {
width: 142px;
margin: 0px 3px 3px 3px;
border: 1px solid #8B9196;
border-top: none;
text-align: left;
font-size: 11px;
}
#left_dati_utente_titolo {
height: 18px;
width: 144px;
margin: 0px 3px 0px 3px;
border: none;
background-image: url(img/utente.gif);
background-position: center;
background-repeat: no-repeat;
}
#left_dati_utente {
width: 142px;
margin: 0px 3px 3px 3px;
border: 1px solid #8B9196;
border-top: none;
}
#central {
width: 550px;
margin: 3px auto 3px 16px;
border: 1px solid #62D8FA;
float: left;
}
#right {
width: 150px;
margin: 3px 3px 3px auto;
border: 1px solid #F3ACF7;
float: right;
}
#right_webcam_titolo {
height: 18px;
width: 144px;
margin: 0px 3px 0px 3px;
border: none;
background-image: url(img/webcam.gif);
background-position: center;
background-repeat: no-repeat;
}
#right_webcam {
font-size: 11px;
width: 142px;
margin: 0px auto 3px auto;
border: 1px solid #8B9196;
border-top: none;
}
#right_contatti_titolo {
height: 18px;
width: 144px;
margin: 0px 3px 0px 3px;
border: none;
background-image: url(img/contatti.gif);
background-position: center;
background-repeat: no-repeat;
}
#right_contatti {
font-size: 11px;
width: 142px;
margin: 0px auto 3px auto;
border: 1px solid #8B9196;
border-top: none;
}
#piede {
font-size: 10px;
width: 900px;
margin: 3px auto 3px auto;
border: 1px solid #C144C9;
}
|
|
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 04 Ott 2005 13:54 Oggetto: |
|
|
| inserisci un div vuoto (chiamalo che ne so... id="chiusura") prima della chiusura di #corpo e dagli come caratteristica nel css #chiusura {clear: both;} dovrebbe tornare a posto |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 04 Ott 2005 14:53 Oggetto: perfetto |
|
|
| Ne sai sempre una più del diavolo!!! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 04 Ott 2005 15:08 Oggetto: Re: perfetto |
|
|
| atigra ha scritto: | | Ne sai sempre una più del diavolo!!! |
|
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 04 Ott 2005 16:30 Oggetto: e poi? |
|
|
Quel trucchetto del div vuoto che fa un clean... è possibile usarlo altre volte in uno stesso documento?!??!
Pensavo risolvesse anche il problema del testo contenuto nell'ultimo div dove c'è quella scritta sul copytight... in IE mi viene giustamente centrata, if FF invece è sempre allineata a sx... e anche se nel div che la contiene specifico che la voglio centrata, lei resta sempre lì. |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 04 Ott 2005 16:34 Oggetto: Re: e poi? |
|
|
| atigra ha scritto: | Quel trucchetto del div vuoto che fa un clean... è possibile usarlo altre volte in uno stesso documento?!??!
Pensavo risolvesse anche il problema del testo contenuto nell'ultimo div dove c'è quella scritta sul copytight... in IE mi viene giustamente centrata, if FF invece è sempre allineata a sx... e anche se nel div che la contiene specifico che la voglio centrata, lei resta sempre lì. |
il clear both serve per riordinare il codice dopo aver usato un posizionamento con float, mentre a te credo basti aggiungere text-align: center; al div che la contiene |
|
| Top |
|
|
atigra
Semidio
Registrato: 21/09/05 11:14
Messaggi: 249
|
| Inviato: 04 Ott 2005 16:40 Oggetto: già provato |
 |
|
| nada, già provato... persino forzato a destra, ma cambia solo in IE ma in FF resta sempre uguale (cioè a sx). |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
