i browser non visualizzano correttamente

Printable View

27-03-2014, 12.28.55

i browser non visualizzano correttamente

Salve a tutti ,
ho un piccolo problema con i css ( premetto che lo sto studiando da solo e non sono molto pratico ) quando ho creato qesto layout http://fastclick.altervista.org/prova.html (usato un programma kit html ) su internet explorer si vede tutto bene invece per quanto riguarda firefox e chrome niente da fare .

ps.ho gia creato un sito http://alessandriabears.altervista.org/ con le tabelle (e u po di css ) ma leggendo in giro che è molto meglio quest ultimo sto iniziando a impararlo .

pps. se avete voglia nel guardare i codici e se potete dirmi come mai quando creo un div il testo non va a capo (per il momento ho usato overflow:hidden) ma va oltre allungando il div , dove nel div a destra ( della pagina sopra prova.html ) il testo va a capo

grazie mille in anticipo e scusate le domande da neofita :roll::roll:
27-03-2014, 13.11.36
karl94

Non noto grosse differenze, che versione stai usando di Internet Explorer? Puoi riportare una schermata?
27-03-2014, 13.23.22

sto usando windows 7 quindi presumo sia internet explorer 10 , ( non ti saprei dire meglio che non lo uso mai , sempre usato firefox come browser predefinito ).

comunque in che senso non noti differenze ?? si vede su entrambi i browser male ?? http://fastclick.altervista.org/prova.html
io lo vedo cosi su ie
http://imageshack.com/a/img62/2613/po9p.jpg

ps. colpa mia che avevo cambiato il doctype credendo che fosse quello il problema , ma nessuno tra quelli trovati online funzionava , adesso ho messo quello iniziale che avevo .
27-03-2014, 13.28.39
karl94

Non so cosa tu intenda per "male", io la visualizzo così: http://oi58.tinypic.com/duuy9.jpg
27-03-2014, 13.32.45

mmm veramente strano ... non riesci a visualizzare i vari codici ? magari ho sbagliato qualcosa , altrimenti posso postarteli io se per te non è un problema dare un occhiata .
27-03-2014, 13.39.27
karl94

Il sorgente è certamente visibile, non so però qual'è il risultato che vuoi ottenere, potresti fare uno schema o essere più esplicito?
Comunque io comincerei ad eliminare la larghezza fissa assegnata per l'elemento body e userei la dichiarazione di DOCTYPE di HTML5.
27-03-2014, 14.00.02

con il doctype di html 5 si visualizza come da immagine che hai messo te , invece io vorrei che si visualizzasse come dall immagine che ho messo io poco piu sopra.... http://fastclick.altervista.org/prova.html prova ad aprirlo con internet explorer eliminando la cache.

ps. nel body non cè un width fissa, cè solo il color e il background-color

ps. con questo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> viene visualizzato come vorrei io su internet explorer che ho messo un immagine piu sopra .

cossi vorrei :
http://imageshack.com/a/img833/2730/1dkp.jpg
27-03-2014, 14.09.51
karl94

Internet Explorer con quel DOCTYPE non visualizza la pagina secondo gli standard, non usarlo altrimenti non potrai mai avere un risultato consistente tra i vari browser. Usa la dichiarazione di DOCTYPE di HTML5, per evitare che il box generato dall'elemento con id contenuti si sovrapponga a quelli flottanti, imposta per questo la proprietà overflow su un valore differente da quello iniziale (visible), per esempio hidden. Rimuovi infine l'altezza che hai impostato per le colonne laterali. Ti consiglierei anche di rimuovere la larghezza che hai assegnato per il contenitore.
27-03-2014, 14.23.37

fatto i cambiamenti che mi hai detto ma nulla è cambiato .

credevo di fare una cosa semplice ho pres un layout a 3 colonne e ho semplicemente modificato la colonna di sinistra mettendoci altri 2 div ma a quanto pare si è complicato tutto :cry::cry::cry::cry::cry:

ps. non ti vorrei disturbare ma volevo chiedere se il codice scritto va bene ? non ci sono errori banali vero ??
27-03-2014, 14.32.37
karl94

Sul tuo sito è attivo CloudFlare, assicurati di attivare la modalità di sviluppo dal relativo pannello di controllo quando effettui modifiche al sito, altrimenti continuerai a visualizzare la vecchia versione in cache.
Comunque la proprietà overflow non la devi specificare né per il contenitore né per gli elementi p, ma solo per l'elemento con id contenuti.
Errori gravi non ne vedo, però ci sono comunque cose da sistemare, per esempio non ha molto senso scrivere

Codice:

height: auto !important; height: 150px;

Ed in generale non dovresti assegnare larghezze e altezze a tutti i box.

Ah, hai provato ad usare gli strumenti per gli sviluppatori che i moderni browser mettono a disposizione? A mio parere sono molto utili anche per chi comincia ad approcciarsi allo sviluppo di pagine web.
27-03-2014, 14.48.10

assegno larghezze e altzze a tutti i box perchè sto cercando di renderlo pun pochettino simile a http://alessandriabears.altervista.org/ che lho creato con le tabelle , mi sembra una rottura cambiare tutti i dati a mano , per questo optavo di crearne uno uguale in css esterno cosi in pochi passaggi potevo modificare intere pagine , non credevo fosse cosi difficile . comunque grazie mille sei stato gentilissimo , adesso provo a rifare tutto da capo con aptana che mi sembra un pochettino piu completo in css ...
27-03-2014, 19.27.24
zerobruno

http://i.imgur.com/widhjVy.png

A me visualizza 'sto schifo.

Forse prima di insegnare alla gente a inserire i div, dovresti imparartelo prima tu.
27-03-2014, 19.33.14
karl94

Zerobruno: scusa, ma con chi ce l'hai?
27-03-2014, 22.13.57

adesso credo di aver risolto tutto , usato il toolkit fornito da firefox se potete dirmi come la visualizzate adesso ... http://fastclick.altervista.org/prova.html

dovrebbe venire cosi :
http://imageshack.com/a/img35/9499/1rxm.jpg

PPS. un problema che persiste è il testo che non va a capo una volta giunto a bordo colonna ma esce fuori .
27-03-2014, 22.41.20

Il testo non va a capo perché non ci sono spazi : se scrivi ad esempio "sinistra sinistra sinistra" al posto di "sinistrasinistrasinistra" dovrebbe andare a posto

(Io dal browser android vedo tutto OK ;))
27-03-2014, 23.02.00

tampertools grazie mille per il consiglio ahahahah te lo giuro che è da 3 o 4 giorni che cercavo sta cosa e non ci capivo niente ahahahah adesso ho risolto tutto controllato in locale e andava tutto perfettamente. grazie mille veramente.
27-03-2014, 23.50.18
karl94

In alcuni casi può essere anche utile adoperare la proprietà CSS word-break: se impostata su break-all le righe di testo potranno venire spezzate per andare a capo anche nel mezzo delle parole.