IE mi fa impazzire!

[fvaresano]

Ciao a tutti!

E' da un po' di tempo che sto lavorando al mio
sito personale. Ho creato un design carino che
pero' non riesco a far "piacere" a IE.

Il design puo' essere visto qui

Con IE 6 ci siamo quasi solo questa pagina da problemi.

Invece IE 5.5 e 5.0 renderizzano propio a loro modo.
Non riescono a centrare il sito!

Il sito e' realizzato con drupal e qui trovate il
sorgente del tema.

Spero che qualcuno riesca a darmi una mano.

Grazie.

Fabio

[thomas_anderson]

Ok, ma che problemi ti da IE5.x? Posizionamento? Posta la parte del codice interessata dal problema. :master:

[fvaresano]

Sia IE 5.0 che IE 5.5 non riescono a centrare il design
che viene allineato a sx. Inoltre presentano un problema
nella visualizzazione del footer che appare spostato verso dx.

Inoltre IE 5.0 perde lo spaziamento dei link nell' header
visualizzando tutto appiccicato.

Ho scoperto invece che opera distanzia tantissimo il
contenuto dall'header.

Questo il css incriminato (che richiama altri css specifici).
La parte colpevole del primo problema credo sia div#content.

Inoltre ho notato che visitando la pagina websites
il design viene spostato leggermente sulla
sinistra (anche con firefox).

[Manu]

sicuramente per il posizionamento in IE 5.01 e 5.5 devi mettere come regola per il body:

text-align: center;

e successivamente nel contenitore generale (#container):

text-align: left;

[fvaresano]

Grande Manu!

Ora il design viene centrato da tutti i browsers.

Rimangono ancora problemi sul footer che viene spostato
leggermente a sx, alcune volte neanche visualizzato.

Inoltre la modifica al text-align ha portato a creare
un problema sui blocchi laterali che adesso vengono
visualizzati solo in parte (IE 5.0 e 5.5).

IE 5.0 appiccica sempre i link sull'header.

Grazie...

[Manu]

Ho sostituito questa parte di Css:

div#sidebar {
/*background: green;*/
width: 250px;
margin: -100px 0px 0px 493px;
padding: 0px 0px 0px 50px;
/* background: url(http://www.varesano.net/varesano.net.../separator.gif) left top no-repeat; */
voice-family: "\"}\"";
voice-family: inherith;
width: 200px;
}

html>body div#sidebar {
	width: 200px;
}

div#footer {
clear: both;
width: 800px;
background: url(http://www.varesano.net/varesano.net...ges/footer.jpg) no-repeat bottom left;
margin: 0px 0px 0px -10px;
padding: 40px 0 20px 0;
text-align: center;
font-size: 0.8em;
voice-family: "\"}\"";
voice-family: inherith;
margin: 0px 0px 0px -10px;
}

html>body div#footer {
margin: 0px 0px 0px -10px;
padding: 30px 0px 10px 0px;
}

e tutto funziona bene su FF IE 5.x e 6. Copia la parte di css e sostituiscila al tuo.

Importante: la regola con selettore html>body div#footer deve stare subito al di sotto della regola con selettore div#footer idem per html>body div#sidebar proprio così come è scritta qui sopra.

Ciao se vuoi spiegazioni su quello che ho fatto chiedi pure!

[Manu]

ancora un' altra cosa:

se vuoi aggiungere delle regole e vuoi che siano generali cioe riguardino tutti i browser scrivile prima di:

voice-family: "\"}\"";
voice-family: inherith;

sotto di queste stanno delle regole che vengono viste solamente da IE 6.0 FF e OPERA.

quelle dentro alle regole con selettore che incominciano con:

[CODE]
html>body #nome_selettore {
.....
}
[CODE]

vengono viste unicamente da FF e OPERA

E'una spiegazione un po terra terra ma se percaso dovessi aggiungere qualche regola al tuo lavoro sapresti dove metterla!

CIAO

[fvaresano]

grandissimo!

ci sono ancora dei problemi sulla pagina contact
(link in alto a dx) e sui link in alto con IE 5.0.

Comunque non mi e' molto chiaro il funzionamento
delle regole che hai creato.

A quanto pare servono a nascondere le regole solo ad alcuni
tipi di browser buggati... ma non ho ben capito quali
browser per quali regole.

Sapresti mica indirizzarmi su un po' di documentazione
sui metodi da te utilizzati?

[fvaresano]

mi sono dimenticato di chiederti...

hai notato che non e' possibile selezionare col mouse
il testo nell'area contenuti con tutti gli IE?

Hai mica idea del motivo????

[Manu]

allora, per quanto riguarda il codice che ti ho postato:

io ho appreso il tutto da tre libri

1) progettare il web del futuro di jeffrey Zeldman
2) eric Meyer on CSS
3) more eric Meyer on CSS


ho usato la regola del "box model hack" di Tantek che come hai dedotto sfrutta alcune falle dei browser non conformi per nascondere alcuni stili necessari per colmare le falle degli stessi.

Inizialmente la regola veniva usata per risolvere il problema dell'interpretazione differente del box model di IE successivamente venne utilizzata per risolvere molti altri problemi.

Sicuramente se cerchi nella guida di questo sito troverai delucidazioni a riguardo del boxmodel del boxmodel Hack e della regola di Tantek.
Se ciò non dovrebbe soddisfarti esegui pure una ricerca sul web e sono sicuro che troverai migliaia di articoli a riguardo.

Io purtroppo utilizzo più i libri e il materiale cartaceo per recuperare le informazioni e quindi link precisi e attendibili non te ne so fornire.

Cmq sfogliando la guida ai css del sito ho notato che è molto completa e attendibile quindi problemi non dovresti averne...se poi hai un po di soldi da parte ti consiglio di procurarti i libri partendo dal primo che ho elencato per capire veramente a pieno l'argomento.

-----------------------

per il resto durante il fine settimana ho un po di tempo libero per rivedere il codice e provare a risolvere il problema....

-----------------------

Per la selezione: ho notato alcune volte questo problema e sinceramente non ho mai capito dove stesse la causa.

spero di averti aiutato

Saluti!