[IE vs FF] risultati diversi con una pagina html

http://debug.altervista.org/temp/

questa pagina risulta diversa visitandola con i due browser, e vorrei capire perchè.
Vedete quel difetto sulla colonna destra? (smargina verso il centro, guardate il bordo interno rispetto la parte superiore e inferiore centrali)
Il difetto scompare solo se cancello l'intero contenuto della colonna, apparentemente senza motivo.
Forse sbaglio qualcosa nell'impostazione di qualche misura....
Bho, io mi sono rotto di stare ore e ore dietro a questi problemi che mi portano via tempo utile!
Mi potete dare una mano? ;)


Ciaoooooo!!!!!!!!!

ciao debug,

io la vedo bene sia con explorer che con firefox e anche con netscape 6.2 (un po vecchiotto)..

nn avrò capito il difetto?? bho!!

io le due colonne le vedo perfettamente uguali..

vedi tu..

ciao

Ti spiego il difetto: se confontri le due colonne noterai che mentre quella sx è perfettamente allineata (io almeno la vedo così con ie e ff) rispetto al bordino scuro che separa la colonna stessa dal centro (la colonna centrale), quella dx non fa lo stesso, ma ruba un pixel alla colonna centrale.

Per la cronaca, ora ho potuto vedere la pagina con mac e ie 5.2 e fa abbastanza schifo! (soprattutto per i margini delle tabelle)

se avrò nuove vi aggiornerò


Ciaooooo!!!!!!!!

[graphicpoint]

Anche io vedo tutto perfettamente uguale !

debug ha ragione pure io vedo male, la colonna dx è più avanti rispetto alla sx e quindi quella centrale viene rimpicciolita

io uno IE 6

cià!

[EDIT]
ciao ho visto che le due colonne sono identiche cn gli stessi contenuti e grafica.. ecco nn è perchè la grafica sulla colonna dx fa aumentare lo spazio della colonna? prova a mettere le immagini all' esterno

aricià!
[/EDIT]

[Ospite]

forse dipende dal fatto che explorer lascia un margine destro di 1 px..prova a cercare margine explorer css e vedi che c'è qualcosa in merito, oppure su constile.org

Dovrebbere essere proprio quello:
explorer mette i bordi verso l'esterno (errato), mentre gli altri browser lo mettono verso l'interno (giusto)

bye

[Ospite]

si ma penso solo il margine destro no? infatti nel layou con i css a + colonne, si mette di solito -1 appunto per explorer, anch'io sto un po' approfondendo i css ...

si ma penso solo il margine destro no? infatti nel layou con i css a + colonne, si mette di solito -1 appunto per explorer, anch'io sto un po' approfondendo i css ...

Per i css il problema è più complesso
Purtroppo ie (tutte le versioni, sembra che neanche con il 7b la mettano a posto...) non considera il padding nel totale del blocco (dx, sx, alto e basso)

In teoria un blocco di 200px con margine dx e sx di 10px ciascuno, dovrebbe avere 180px rimanenti per il contenuto (come fanno tutti i browser). Explorer invece lascia 200px per il contenuto, facendo diventare a tutti gli effetti il blocco di 220px.

Esistono diverse soluzioni, una è quella di cui parli, un'altra è la seguente:
-------------------
div.blocco {
qui metto i css per i browser "sani"
}

* html div.blocco {
qui metto il codice per ie
}
---------------------

Questo hack sfrutta un baco di explorer che considera per buona la dicitura * html (che è errata, perchè il tag html è il "padre" di tutto e quindi viene saltato da tutti i browser)

Un'altra soluzione, più semplice ma che sporca un po' il codice xhtml è la seguente:

Crei un blocco e gli dai la larghezza desiderata (ma padding: 0px e margin: 0px)
All'interno metti un'ALTRO blocco ed a questo dai i valori di padding e margin SENZA dargli la larghezza.
A questo punto tutti i browser si comportano nello stesso modo, perchè dopo avere messo il padding ed il margin (ed eventuali bordi), lasciano lo spazio che per il contenuto calcolandolo dal padre.

...spero di non essermi incasinato troppo con la spiegazione, in realtà è più semplice di quanto sembri :smile: :smile: :smile:

bye,
Marco

[Ospite]

mi hai ucciso
le poche certezze che avevo sono state distrutte :grin:

qui il difetto è spiegato molto bene
http://www.constile.org/tutorial/IE5_box_model/

ma non sono sicuro si tratti di questo, perchè debug giustamente ha settato tutti i padding e margin a 0px

per ora il mio consiglio è di eliminare tutte le definizioni si stile inline e mettere tutto nel css esterno, per avere un po più il controllo sulla visualizzazione

mavericck

[NoWhere]

queste chicche sono davvero speciali.. dovrebbero inserire dei mini manuali al posto delle home dei più conosciuti siti di programmazione web!!


...cmq, [ottimo punto di riferimento con stile e ottima sapienza loziosecchi ] debug, mi ci sono fatto una surfata ma con FF ultimate release e IE6 li vedo al 99.9% uguali!!

é con opera 7.54 che si vede sgarrato: non centra l'intero blocco al centro e alcune img del layout sfalzano di pochissimi px!!

[Ospite]

cmq constile.org porta avanti l'idea di impostare tutto senza le tabelle, chi usa le tabelle per quel sito è un malfattore :) (a parte che anch'io lo trovo un ottimo sito infatti ho il link nel mio) , ma la pagina di Debug è tutta intabellata quindi non credo lo possa aiutare molto.

A regà (detto alla romana) che casino!!! :( :( :D :P
Io coi css è poco che smanetto, e non ho mai avuto il tempo e la testa per studiarmeli come si deve (si nota vero?).
Ho provato varie soluzioni senza risultato; ho provato anche l'hack proposto da loziosechi, ma il fatto è che non so cosa metterci dentro la definizione del blocco! Infatti non ho trovato una soluzione che andasse bene per IE! :(
AH! Se potessi farlo tutto in flash!!!! :D ;)

Se non trovo una soluzione adeguata mi sa che faccio i bordi con celle dedicate... :(

Grazie a tutti!


Ciaooooooo!!!!!!!!!!!

Il problema di usare solo fogli di stile, sta nello startup... cercare di sfuggire dalla sicurezza delle tabelle per buttarsi in un mondo abbastanza oscuro ed instabile come quello dei css puri... ed è quello che blocca tantissima gente... va investito del tempo...

... ma vi assicuro che ne vale la pena!!!

La produttività aumenta esponenzialmente ed i browser che davano seriamante problemi (come ie5 per mac ed ie 5.0 win) stanno poco per volta morendo

Sono ormai quasi due anni che uso solo fogli di stile e non tornerei più indietro...

Attenzione però: le tabelle non sono il "male assoluto", ma come dice il w3c devono avere un loro utilizzo preciso, e cioè quello di contenitori dati :winkOLD:

A questo indirizzo ho messo su alcuni template:
http://loziosecchi.altervista.org/stuff/
Sono una serie di prove e di bozze che possono essere utilizzate tranquillamente. Sono molto semplici proprio perchè così sono più chiare. Spero possano essere d'aiuto a qualcuno

bye,
Marco


Per debug: post contemporaneo :smile:
allora, dovresti fare una cosa del genere (parlo solo del blocco centrale, senza banner o footer):
Diciamo che la larghezza è di 1000px (definita ad esempio nel body)
nell'html sarà:
<div id="sinistra">qui metti il contenuto (i div veri e propri)</div>
<div id="destra">qui metti il contenuto (i div veri e propri)</div>
<div id="centro">qui metti il contenuto (i div veri e propri)</div>

Il foglio di stile sarà:
#sinistra {width:200px; float:left;backgroud-color:#0000ff;}
#sinistra {width:600px; float:left;backgroud-color:#00ff00;}
#sinistra {width:200px; float:left;backgroud-color:#ff0000;}

E' IMPORTANTE che questi blocchi non abbiano ne' margine ne' padding perchè servono solo da contenitori.
All'interno metti dei div senza larghezza, ma con margin e padding (ho messo dei colori farlocchi giusto per fare capire)

Spero possa aiutarti

Sì vabè, ma alla fine?
Come posso risolvere?
Sempre se c'è una soluzione abbastanza indolore adatta al lavoro già impostato....


Ciaooooo!!!!!

[Ospite]

se ti serve c'è anche l'ottimo sito http://glish.com/css/

per debug: guarda il mio edit sopra

P.S.: io ai tempi ho iniziato da qui: http://www.w3schools.com/css/default.asp

Grazie loziosechi, ma non è servito!! :(
Il risultato è identico!


Ciaoo!!!

[Ospite]

di + non posso aiutarti anche perché io li vedo identici con ie e mozilla :(( cmq ora devo staccare...mi spiace

Debug, ho dato un'occhiata al codice...
Credo che il problema vada fatto risalire alla classe td-340 nel foglio di stile

Nella fattispecie il problema potrbbe essere dato dal border-right e dal border-left (che in ie danno solitamente questo tipo di problemi)

Soluzione (se è questo il problema):
TOGLI i due border dal css e crea un'immagine-sfondo con il giallo chiaro ed i bordi (ricavala dall'immagine sopra con le curve, così sei sicuro di essere preciso) e piazzala come background ripetuto (solo y) nel blocco

Spero possa aiutarti

Bhè a sto punto faccio prima a modificare le due immagini in alto e in basso che devono coincidere con quei bordi.
Credo che farò così, anche se mi rode al quanto (razionalità rules).

Se avrò altri problemi farò un fischio! ;)
Grazie mille a tutti quanti, gran bella discussione!

EDIT: MA PORC!!!! mi ero dimenticato che su FF si vede tutto ok!! Certo che sono veramente rimbambito! Quindi la mia soluzione va a farsi benedire!!!
Ok, faccio come suggerito e vedo se è ok...


Ciaooooooooo!!!!!!!!!!!!!

Loziosechi, c'ho provato, ma, anche logicamente, non è cambiato, perchè lo spazio a disposizione per il background è sempre quello errato!

Disperato, ringrazio...


Ciao!!!!!

[Ospite]

flavio ma per starci tanto dietro così allora non ti conviene farlo proprio solo con i div seguendo un template base a 3 colonne? a quest'ora forse l'avevi fatto

Intedi senza tabelle? Solo con i css?
No, già mi impicco così, figuriamoci a gestirmi la cosa solo coi css!
E poi il lavoro è molto ma molto di più di quello che vi ho fatto vedere!

Tnx ;)


Ciaooooo!!!!!!

[Ospite]

a ok..però tieni conto che sembra complicato ma poi è + semplice, molto di è gestire tutto con i div..come quando noi diciamo a chi non sa il php..sembra complicato fare una galleria in php ma....poi non stai a fare 200 pagine in html, però capisco che quando si è abituati in una maniera...anch'io le tabelle le "vedo" nel senso se vedo td penso la tabella la visualizzo invece div anche se li faccio sono "cosa mentale" per adesso :smile:

... partendo dal presupposto che ho capito circa il 5% di quello ch hai scritto... ti do ragione! :D :D HEHEHE ;)
Vedrò di trovare qualche soluzione tecnica o di provare altre vie (tipo far cambiare idea su qualche accorgimento grafico al cliente).

Vi faccio sapere


Ciaooooooo!!!!!!!!

[Ospite]

e...sto a troppi gradi centigradi per scrivere bene :(

[NoWhere]

errore. non sarebbe a solo css, sarebbe a creare lo scheletro con strutture a blocchi [ <div></div> ] settati tramite i css!!

se poi unisci ciò al php [tu che sai programmare... me tapino!!] direi che é un ottimissimo compromesso!! :winkOLD:

nowhere, intendi dire sempre con le tabelle configurate tramite css?
Se è così, allora è quello che già sto facendo; altrimenti è quello che avevo capito da farlimas, e la risposta è sempre quella ;)


Ciaooooo!!!!!