compatibilità css con ff e ie

SolidSnake4

Utente Attivo
23 Ott 2007
505
0
0
Salve allora il mio è un problema vecchio che esiste da tanto. Vengo al sodo ho problemi di visualizzazione di un template, creato da me con fogli di stile CSS. Praticamente il problema lo da a quanto ho capito io per le larghezze delle varie parti del mio template. Allora di base la larghezza è 800, e se lascio le misure così come stanno con IE7 non ci sono problemi, mentre con firefox me lo visualizza in maniera non corretta come se le misure superassero quelle totali cioè di 800. Ora come posso fare in modo che in entrambi i casi, cioè utilizzando sia FF che IE7 la visualizzazione sia sempre lo stessa ? Io a questo punto non avendo molta esperienza con i CSS stavo pensando di farne due a seconda del browser usato dagli utenti, oppure altrimenti come soluzione estrema di ritornare ad usare le tabelle ma ormai mi sembrano abbastanza superate, chi mi saprebbe aiutare con questo dilemma ?
 

lukeonweb

Utente Attivo
5 Mar 2003
5.175
13
38
46
Napoli
www.lucaruggiero.it
Il problema è vecchio non solo per te: è un problema a cui chiunque va incontro, professionisti compresi :)

Quando crei un layout, ad esempio (e soprattutto table-less), oltre al width, vanno considerati anche i bordi ed il padding.

Se hai due DIV affiancati , di 100 e di 200 pixel, il totale è 300, e di qui non si scappa.

Se il primo DIV ha il bordo a sinistra ed il secondo a destra, devi calcolare: 1 + 99 + 199 + 1 (ovvero: bordo, DIV 1, DIV 2, bordo).

Lo stesso calcolo devi applicarlo sull padding a sinistra e a destra.

Vedi di lavorare intorno a questi accorgimenti e non dovresti avere problemi.

Ciao!
 

SolidSnake4

Utente Attivo
23 Ott 2007
505
0
0
sto provando a modificare padding width e bordi ma ancora non sono riuscito a trovare i valori adatti per poter diciamo così bilanciare il template con FF e IE
 

SolidSnake4

Utente Attivo
23 Ott 2007
505
0
0
be si la pagina sta sul mio spazio di aruba il link è questo e con FF mi si vede bene mentre con IE è sballato, forse chessò dipende dal fatto che ci sono due div affiancati non so. A poi c'è un'altra cosa ho provato un altro tutorial sempre sui css anzi era sulla guida che c'è su mrwebmaster dove c'era un template a due colonne però mi sembra affiancate con due div e in quel caso il problema non si presentava, magari non vuol dire niente però certo è che questo problema è assai pesante come lo sono i puntatori nel caso di C ma la meno male il problema lo riesco a superare abbondantemente
 
Ultima modifica:

SolidSnake4

Utente Attivo
23 Ott 2007
505
0
0
ecco il codice css :

Codice:
/*
    ASSEGNO UNO STILE GENERICO AL CORPO DELLA PAGINA
    ED ALL'ELEMENTO DIV
*/

body
{
    margin: 0px;
    background-color: #EEEEEE;
    color: #000000;
}
div
{
    font: Normal 10px Verdana;
}

/*
    DEFINISCO IL DIV DIV PRINCIPALE, CONTENITORE
    DI TUTTI GLI ALTRI DIV
*/

#MAIN
{
    width: 800px;
}

/*
    DEFINISCO UNO STILE AL TOP DELLA PAGINA
*/

#TOP
{
    text-align: left;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: Bold;
    padding: 3px;
    border: Solid 1px #000000;
}

/*
    DEFINISCO IL DIV CONTENENTE IL LOGO DELLA PAGINA
*/

#LOGO
{
    text-align: left;
    background-color: #FFCC00;
    float: left;
    width: 359px;
    padding: 35px;
    border-left: Solid 1px #000000;
}

/*
    DEFINISCO UN DIV CONTENENTE IL MOTORE DI RICERCA
    O ALTRI ELEMENTI DA POSIZIONARE DI CANTO AL LOGO
    COME AD ESEMPIO UN BANNER PUBBLICITARIO
*/

#RICERCA
{
    text-align: center;
    background-color: #FFCC00;
    float: left;
    width: 299px;
    padding: 35px;
    border-right: Solid 1px #000000;
}

/*
    SULLA FALSA RIGA DEL TOP, DEFINISCO UN MENU ORIZZONTALE
*/

#MENU_ORIZZ
{
    text-align: left;
    background-color: #336699;
    color: #FFFFFF;
    font-weight: Bold;
    width: 792px;
    padding: 3px;
    border: Solid 1px #000000;
}

/*
    DEFINISCO, IN UN UNICO STILE, I DUE MENU LATERALI
*/

#MENU_SX, #MENU_DX
{
    background-color: #FFCC00;
    float: left;
    width: 150px;
    padding: 3px;
    border-left: Solid 1px #000000;
    border-right: Solid 1px #000000;
    border-bottom: Solid 1px #000000;
}

/*
    DEFINISCO IL CORPO DELLA PAGINA
*/

#CORPO
{
    background-color: #FFFFFF;
    float: left;
    width: 478px;
    padding: 3px;
    border-bottom: Solid 1px #000000;
}
 

lukeonweb

Utente Attivo
5 Mar 2003
5.175
13
38
46
Napoli
www.lucaruggiero.it
Ok. Innanzitutto una domanda per cortesia: l'esempio è quello della mia lezione del corso di Web Design che, all'epoca, funzionava bene, quindi deduco che l'hai un po modificato, o sbaglio?

Fammi capire per favore :)
 

SolidSnake4

Utente Attivo
23 Ott 2007
505
0
0
si è quello ma l'avevo già detto nella precedente discussione, mi ero dimenticato di metterlo anche qua come indicazione, comunque si è quello ma il problema ho ampliato solo . Anzi no l'esempio l'ho preso dalla guida del web design layout e livelli su questo esempio che mi da gli errori di visualizzazione. Però ora mi è sorto un dubbio e se usassi delle immagini per creare sli spazi per i due menù esterni e per il corpo della pagina pensi che mi continuerebbe a dare errori di visualizzazione ?
 
Ultima modifica:

sbobby

Utente Attivo
26 Gen 2006
791
0
0
Roma
ragazzi secondo me per questi problemi la soluzione migliore sono sempre i commenti condizionali per IE!!!
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Problema compatibilità CSS HTML e CSS 1
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
O compatibilità versioni diverse di MySQL MySQL 0
asevenx Problema compatibilità browser con @media screen HTML e CSS 2
I Piccolo roblema di compatibilità mobile.. help! PHP 1
F Compatibilità IE8 :contains() jQuery 0
G Compatibilità Firefox Javascript 0
M Compatibilità HTML e CSS 0
filomeni compatibilità IE Javascript 3
StarFish Compatibilità HDD e ram per portatili (Sony Vaio e HP pavilion) Hardware 0
F Compatibilità IE HTML e CSS 4
felino Forzare la compatibilità di Internet Explorer HTML e CSS 0
F compatibilità tra browser HTML e CSS 3
A Aiuto compatibilità browser! HTML e CSS 2
asevenx problema barra menu e compatibilità browser WordPress 6
P compatibilità ie8 e box-shadow HTML e CSS 17
F Realizzo siti in HTML puro, massima compatibilità Offerte e Richieste di Lavoro e/o Collaborazione 1
P attuale compatibilità HTML5 con i principali browser HTML e CSS 6
P sito e compatibilità con IE9 HTML e CSS 3
A Risoluzione siti internet e compatibilità browser HTML e CSS 1
X Compatibilità php PHP 2
T Problema compatibilità browser HTML e CSS 6
P Problema compatibilità Internet Explorer HTML e CSS 1
borgo italia html5: dubbi sulla compatibilità HTML e CSS 20
A IE 8 problema visualizzazione e compatibilità Javascript 0
S MySql 5.1 VS MySql 5.0 e compatibilità query MySQL 2
K compatibilità crossbrowser tra opera e firefox HTML e CSS 2
danlupo Problema Layout Compatibilità HTML e CSS 6
A Nuova versione di PHP e vecchi siti: problemi di compatibilità? PHP 1
A problemi compatibilità Flash 9
D Problema compatibilità browser HTML e CSS 2
M Problema "grandezza" link e compatibilità IE: HELP! HTML e CSS 4
S con cosa pubblicare il sito e controllo compatibilità browser HTML e CSS 3
L [AJAX] compatibilità e funzionamento FF e IE Ajax 2
P Problema compatibilità con i browser HTML e CSS 8
B Altezza TD con IE e FF [era:compatibilità IE con Mozilla] HTML e CSS 1
P Problemi di compatibilità PHP 0
S browser:problemi di compatibilità... Javascript 0
Y Compatibilità Firefox e Opera con JavaScript Javascript 0
L compatibilità browser rollover Javascript 1
K Compatibilità sito-browser HTML e CSS 12
F compatibilità sito HTML e CSS 9
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1

Discussioni simili