Precedente :: Successivo |
Autore |
Messaggio |
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 23 Giu 2006 02:45 Oggetto: IE fa i capricci....con i CSS |
|
|
Salve a tutti, scrivo in merito ad un piccolo problema riguardo a un mini sito che sto sviluppando. Il sito è all'indirizzo http://xoomer.alice.it/arkos/ come grafica è molto semplice, ma quando vado a visualizzarlo con IE i div si spostano!! Allego il file CSS:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
body h1 {
margin-top: 25px;
margin-left: 225px;
}
body h2 {
color:#CC0000;
text-decoration:underline;
text-align:right;s
}
body a {
color:#FFFFFF;
}
span.rosso {color: #CC0000;}
span.blu {color: #003366;}
p.exlink {color: #FFFFFF;}
a.link {color: #000000;}
#main {
margin: 75px;
padding: 10px;
width: 600px;
border: 1px solid #000;
position: absolute;
z-index: 0;
top: 61px;
left: 52px;
background: #FFFFCC;
}
#main #spacer {
height: 75px;
width: 140px;
padding-right: 7px;
clear: left;
float: left;
}
#nav {
position: absolute;
border: 1px solid #000;
z-index: 1000;
width: 200px;
left: 0px;
top: 0px;
padding: 5px 0 10px 10px;
background: #CC0000;
}
perfavore aiutatemi sto impazzendo!!!!!!!!!!!!
(Rebelia confido in te!!!!!!!!)
ringrazio anticipatamente tutti!!!!ciao, gek |
|
Top |
|
|
atigra Semidio
Registrato: 21/09/05 10:14 Messaggi: 249
|
Inviato: 23 Giu 2006 07:53 Oggetto: |
|
|
Forse c'è qualcosa che mi sfugge... ma mi pare tutto ok anche con IE. |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 23 Giu 2006 07:56 Oggetto: |
|
|
ciao
grazie per la fiducia, ma forse sarebbe meglio che tu mi postassi un paio di screenshot per spiegarmi dov'e' la differenza, perche' a me il layout si visualizza nello stesso modo sia con ie:
che con ff:
che con opera:
e non riesco a capire dove secondo te e' da sistemare |
|
Top |
|
|
atigra Semidio
Registrato: 21/09/05 10:14 Messaggi: 249
|
Inviato: 23 Giu 2006 08:28 Oggetto: |
|
|
L'unica cosa che ho notato è che il div con lo sfondo rosso in alto a sx ha "altezze" diverse a seconda del browser, forse il problema è questo??? |
|
Top |
|
|
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 23 Giu 2006 09:58 Oggetto: grazie! |
|
|
non saprei dire come mai a me da questo difetto, forse è "colpa" della risoluzione troppo alta? ho un monitor LCD 19'' e tengo una 1280x1024.. fatto sta che su FF vedo così:
mentre su IE vedo il div giallo troppo in alto...
Citazione: | atigra: il div con lo sfondo rosso in alto a sx ha "altezze" diverse a seconda del browser, |
nn ho capito cosa intendi... il file css è sempre uguale, come è possibile che cambi l'altezza? grazie ancora, gek. |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 23 Giu 2006 11:15 Oggetto: Re: grazie! |
|
|
gek ha scritto: | su IE vedo il div giallo troppo in alto... |
fai una prova: vuota la cache di ie e poi ri-visualizza la pagina e vedi se va a posto
Citazione: | il file css è sempre uguale, come è possibile che cambi l'altezza? grazie ancora, gek. |
dipende dal foglio di stile preimpostato del browser: il tuo foglio di stile andra' a sovrascrivere alcune parti di quello, ma ne usera' altre creando la discrepanza
quel che si puo' fare e': prendere atto che c'e' *comunque* un diverso rendering tra i vari browser e tenerne conto in fase di progettazione evitando i layout calcolati al pixel (perche' sempre a rischio di sfasciamento!) e la seconda cosa che si puo' fare e' mettere questo comando prima di tutto il resto:
Codice: |
* {border: 0px; margin: 0px; padding: 0px;}
|
attenzione!
con questo comando si risolvono alcuni problemi derivanti da diverso margin e padding degli elementi, ma allo stesso tempo sono tutti da reimpostare (ul ad esempio sara' di molto spostato rispetto al solito!)
in alternativa, e' possibile dare un comando come questo:
Codice: |
div, p, h1, h2, h3 {border: 0px; margin: 0px; padding: 0px;}
|
dove la prima parte e' l'elenco degli elementi che volete "azzerare"
personalmente preferisco il primo metodo, vedete voi quale vi conviene maggiormente |
|
Top |
|
|
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 23 Giu 2006 15:49 Oggetto: cvd |
|
|
sapevo di poter contare sul tuo aiuto rebelia! come al solito sei preziosissima! allora:
ho provato a svuotare la cache, ma niente da fare!
ma a voi su IE si vede bene? x' se l'unico a vedere male sono io... il problema nn si pone! ho provato anche con konqueror (sul portatile ho linux) e anche lì si vede perfettamente! uffi.. per quanto riguarda cambiare il css... devo scrivere
Codice: | div, p, h1, h2, h3 {border: 0px; margin: 0px; padding: 0px;} |
in cima senza modificare null'altro? adesso provo a fare così. a presto, v farò sapere!!
Gek |
|
Top |
|
|
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 23 Giu 2006 15:57 Oggetto: oooops |
|
|
ok ho provato a mettere in cima al testo
Codice: |
div, p, h1, h2, h3 {border: 0px; margin: 0px; padding: 0px;} |
ma come unico risultato ho ottenuto che adesso su FF il testo sovrascrive l'immagine, e su IE non è cambiato praticamente nulla (a parte che i links sono + schiacciati, per cui il div rosso è molto più corto)
che nervoso!! (e chi ha più emoticons + ne metta!!)
ma possibile che così tanti problemi per un layout tanto semplice?
gek |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 23 Giu 2006 18:56 Oggetto: Re: cvd |
|
|
gek ha scritto: |
Codice: | div, p, h1, h2, h3 {border: 0px; margin: 0px; padding: 0px;} |
in cima senza modificare null'altro? |
aspetta! forse mi sono spiegata male io
un browser - qualunque browser - ha in se un foglio di stile "base", percio' se tu non metti alcuna formattazione nella tua pagina, un link sara' sempre visualizzato in blu, un titolo h1 sara' sempre in grassetto e molto piu' grande del testo e un elenco puntato avra' sempre il bollino all'inizio di ogni voce e questo succede appunto perche' alla tua pagina senza formattazione viene aggiunto questo foglio di stile preimpostato del browser
naturalmente anche se sono molto simili, ogni browser ha il suo, percio' puo' essere che h1 sia sempre in grassetto e sempre piu' grande del testo, ma in un browser e' 2 volte il testo, nell'altro 4 volte il testo
quando tu crei un foglio di stile, sovrascrivi *alcune* di queste impostazioni: ad esempio dici che vuoi lo sfondo blu anziche' quello bianco di default e che vuoi il testo giallo anziche' il nero di default
quando pero' il browser non trova comandi specifici, usa quelli che gli sono stati preimpostati, percio' se e' previsto che il tag h1 sia 2 volte il testo normale, usera' quella misura li', visto che tu non ne hai impostata nessun'altra e tutto questo succede per *ogni* elemento non sovrascritto da te
detto questo, normalmente quel che ci da problemi nei browser non e' la dimensione dei titoli ne' il punto elenco, ma la gestione del box model - per il quale ti rimando a questo thread - e di bordi, margini e padding di tutti gli elementi blocco
che vuol dire? che un browser puo' avere preimpostato di default un margine per i paragrafi pari a 5 mentre un altro browser pari a 10 oppure che tutti e due hanno il margine per i paragrafi di 5, ma uno ha il padding del div che contiene i paragrafi pari a 10 e l'altro pari a 20 percio' l'effetto finale sara' diverso (attenzione! sono numeri a caso e molto esagerati, ma e' solo per spiegare il concetto, ok?)
ora: per ovviare *almeno in parte* a questo inconveniente, una delle soluzioni e' quella di portare a zero border, margin e padding tutti gli elementi blocco e questo lo fai col comando:
Codice: |
* {border: 0px; margin: 0px; padding: 0px;}
|
dove l'asterisco significa "tutti gli elementi blocco"
se pero' preferisci usare un sistema meno drastico, puoi fare l'elenco di quegli elementi blocco a cui desideri azzerare border, margin e padding e quindi scriverai:
Codice: |
nomeprimoelemento, nomesecondoelemento, nometerzoelemento {border: 0px; margin: 0px; padding: 0px;}
|
cioe *non* devi copiare pari pari l'elenco che ti ho fatto io (magari a te non interessa azzerare il tag p, ma interessa azzerare il tag table, ad esempio), ma devi inserire al posto dell'asterisco e separati da virgola l'elenco degli elementi che vuoi azzerare
ripeto: questa *non* e' la soluzione a tutti i mali, ma potrebbe essere una soluzione per evitarti di specificare per ogni elemento border 0, margin 0, padding 0
per il tuo problema, forse dipende dalla versione di ie, a questo punto: io uso la 6, tu quale hai installata sulla tua macchina? |
|
Top |
|
|
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 24 Giu 2006 03:11 Oggetto: |
|
|
adesso ho capito! effettivamente rileggendo il tuo primo post il concetto era già chiaro, sono stato GOLOSO io sperando di avere a portata di mano una soluzione rapida ed indolore da applicare senza bisogno di collegare troppo il cervello (cosa MOLTO sbagliata!!!). adesso nel weekend avrò poco tempo, ma appena ci rimetto le mani ti faccio sapere di eventuali sviluppi. interessantissimo il link che segnali! indirettamente ho imparato anche come si inseriscono le lettere greche... MITICO!
un grazie anticipato (ma vedrai che se non funziona tornerò a bussare alla porta di casa Zeus...), buon fine settimana! Gek |
|
Top |
|
|
tuffo19 Mortale devoto
Registrato: 06/10/05 13:20 Messaggi: 9 Residenza: Faenza
|
Inviato: 26 Giu 2006 11:51 Oggetto: |
|
|
ok, salve a tutti! superato il we di fuoco (nel senso del caldo) eccomi di nuovo qua. nel frattempo ho fatto vari tentativi di utilizzo del consiglio che mi hai dato (cioè di "resettare" le impostazioni di default a 0, per evitare di incorrere in effetti imprevedibili), ma senza alcun risultato. ho agito sui blocchi div, p, span, h1... le ho provate tutte! infatti mi son reso conto che il problema nn è nel div giallo che sale, ma nel titolo che è più grande e quindi sfora di sotto!
in più ho scoperto anche un altro fatto strano: se navigo sul sito con IE dal portatile (ho esattamente la stessa versione installata, uguale al centesimo: 6.0.2900.xpsp_sp2_gdr.050301-1519 ma risoluzione differente: 1280x800) il problema nn si pone!
quindi devo supporre che sia legato alla risoluzione? come si sistema questa faccenda? e dire che la grafica di questa pagina è a dir poco banale! sono solo 2 div!! grazie cmq a tutt per l'aiuto! |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 26 Giu 2006 12:26 Oggetto: |
|
|
sbaglio o il uichend bollente ti ha portato a uno sdoppiamento della personalita'?
per risolvere il problema, puoi ad esempio provare ad aggiungere un div che prenda da <body> a </body> (interno, naturalmente) a cui darai una misura che sia compatibile col layout e che ti garantisca la stabilita' a ogni risoluzione |
|
Top |
|
|
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 26 Giu 2006 13:38 Oggetto: |
|
|
ops... effettivamente nn mi ero accorto di essere loggato con un altro account!
il uichend fa davvero malissimo!!
cmq ho provato a inserire un div totale, ma nn son riuscito a cavare un ragno dal buco.. o si scombina tutto il layout (accidenti ai vari relatives, absolute, top, left e soprattutto z-axis che ancora nn ho capito a cosa servono!) oppure non si notano modifiche apprezzabili (il titolo h1 semplicemente rimane sempre troppo grande).. cmq visto che ben pochi tengono risoluzioni così elevate.. beh, direi che mi potrei anche arrendere e rinunciare... voi che dite?
ciao, Gek |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 26 Giu 2006 18:46 Oggetto: |
|
|
aggiusta questa parte cosi':
Codice: |
body h1 {
margin-top: 25px;
margin-left: 225px;
font-size: 120%;
}
|
e vediamo che succede |
|
Top |
|
|
gek Eroe
Registrato: 22/01/06 15:55 Messaggi: 53 Residenza: Ravenna
|
Inviato: 26 Giu 2006 19:37 Oggetto: ma ma ma.... |
|
|
NON HO PAROLE!!!!!
tu sei un mostro, un fenomeno, un genio, un luminare, una santa!!!! altro che pranzetto a casa mia! io ti erigo un tempio!!!! MITTICA!!!!
FUNZIONA!!!!!!
ok ok mi sto ubriacando di emoticons... funziona alla perfezione, effettivamente è bastato impostare la dimensione del carattere in percentuale. eppure non ci avevo pensato per niente!!
Citazione: | aggiusta questa parte cosi':
Codice:
body h1 {
margin-top: 25px;
margin-left: 225px;
font-size: 120%;
} |
in realtà ho impostato
e ora direi che è praticamente perfetto!
inchinandomi di fronte al tuo sommo sapere, ti porgo i miei più sentiti ringraziamenti!
a presto! (è nuovamente una minaccia??? tutte le volte che ho un problema mi rivolgo sempre a voi, fatto rompiscatole che sono!!!)
Gek |
|
Top |
|
|
rebelia Dio maturo
Registrato: 17/07/03 08:22 Messaggi: 7987
|
Inviato: 26 Giu 2006 19:50 Oggetto: Re: ma ma ma.... |
|
|
gek ha scritto: | a presto! |
e qua saremo |
|
Top |
|
|
|