problemino con firefox

[gioser]

ciao ragazzi!. . .allora ho qualche problemino nella visualizzazione della mia pagina personale con firefox. . .visto che è impossbile che il problema sia firefox. . .temo proprio di aver commeso qualche errore io. . .allora ho creato un layout con i css che prevede un header, un menu, un contenitore delle pagine e un footer. . .tutto cio' dentro ad un altro contenitore con sfondo bianco. . .e qui c'è il problema. . .quest'ultimo contenitore coincide con header e footer dando uno spiacevole effetto. . .io vorrei che ci fosse una divisione come per altro succede con explorer. . .aspetto qualche consiglio. . .grazie!

[seed_squall_it]

Dovresti postare quantomeno il codice CSS, ma penso di aver capito ugualmente il problema. Scommetto che il tuo menu e i tuoi contenuti sono affiancati l'uno all'altro vero? Cioè, hai reso flottanti i due box del menu e dei contenuti con float: left o float: right in modo che appaiano affiancati, giusto?

Se è così, è normalissimo quello che ti succede. Il box "contenitore" contiene 2 soli box posizionati in modo statico (testata e footer), quindi assume un'altezza pari alla somma delle altezze di quei 2 box che contiene. I box flottanti è come se non esistessero dentro al contenitore, perché sono estratti dal flusso del documento e non condizionano il layout degli altri box. Il "trucco" è usare il box "footer" per "pulire" il posizionamento flottante. Dato che "footer" è interno al contenitore principale, se "ripulisci" il float in quella posizione, ripristini il normale flusso all'interno del contenitore. Quest'ultimo sarà perciò anche influenzato dall'altezza dei box flottanti al suo interno. Per fare questo, aggiungi alla regola di stile del box "footer" una dichiarazione fatta così:

1. Se i due box sono entrambi float: left, alla regola del "footer" aggiungi clear: left.

2. Se sono entrambi float: right, alla regola del "footer" aggiungi clear: right.

3. Se sono uno float: left e l'altro float: right, alla regola del "footer" aggiungi clear: both.

[gioser]

ciao!. . .ti ringrazio per la tua risposta molto esauriente. . .solo che ho capito pochino . . .qnd metto qui il codice css che utilizzo:
body {background-color:#F5F5F5;}

div#container{height:100%; background-color: white; margin:0;padding: 0.5em 0 0 0px; -moz-border-radius: 20px; }

div#header{height:300px;line-height:300px;margin:0;padding-left:40%;padding-right:30%;padding: 0em 0 0 10px; margin: 10; background:url("http://gioser11.altervista.org/sfondi/HEADER2.jpg");background-repeat: no-repeat;
}

div#menu{height:100px;line-height:20px;margin:10;padding: 0em 0 0 10px; background-color: #B9CAFF; margin: 10;-moz-border-radius: 20px; }

div#contenent{height:400px;line-height:20px;margin:0;padding: 1em 0 0 10px; background-color: #FFFAFA; margin: 10;-moz-border-radius: 20px; }

div#footer{height:60px;line-height:20px;margin:0;padding: 0em 0 0 10px; background-color: #B9CAFF; margin: 10; -moz-border-radius: 20px;}

h1,h2{margin: 0;padding:0;}
h1{font-family:Bradley Hand ITC;color: white;}
h2{font-size: 16; color: black}
h3{font-size: 10; color: black}

a{color:black;text-decoration: none}
a:hover{color: white;text-decoration: none; background: black}
a#activelink{color: black;text-decoration: none}


grazie ancora. . .e fammi sapere se ci capisci qualcosa. . .scusa ma sono un autodidatta e non faccio le cose in maniera molto accademica. . .ciao!

[seed_squall_it]

Non vuol dire...anche io sono autodidatta, ma non c'è nulla di "accademico" nella realizzazione di file CSS.

Cmq mi ero sbagliato a quanto vedo...i tuoi box menu e contenuti non sono flottanti (e quindi affiancati). Visto così il CSS, non so che dirti riguardo al tuo problema (magari col codice XHTML riesco ad aiutarti meglio), ma posso già dirti che ci sono diverse imperfezioni.

1. Evita di usare la proprietà -moz-border-radius...non è una proprietà approvata dal W3C, quindi ti invalida il codice CSS.

2. Quando imposti delle misure a padding, margin, ecc. DIVERSE da 0, DEVI indicare l'unità di misura. Scrivere "margin: 10" non significa nulla: devi scrivere "margin: 10px" (oppure 10pt, 10em, ecc., a seconda dell'unità di misura che usi). Se invece imposti un valore a 0, allora puoi evitare l'unità di misura.

3. Quella height: 100% che dai al container a cosa è riferita? Le misure espresse in percentuale fanno sempre riferimento a quelle del box contenitore. Nel tuo caso, il box container non è contenuto in nessun altro box, ma direttamente nel body, quindi devi impostare height: 100% anche all'elemento body con apposita regola di stile (e anche all'elemento html...con IE non si sa mai!).
Poi cmq penso sia questo l'errore...se tu elimini height: 100% dalla regola di stile del container, questo dovrebbe essere forzato ad assumere l'altezza dei box che contiene (che nel tuo caso non sono flottanti e quindi vengono considerati).

4. Evita di usare famiglie di caratteri "particolari" come Bradley Hand ITC...meglio se usi font standard (che tutti hanno) come Arial, Courier, Sans-serif, Verdana, Helvetica, e alcuni altri (sicuramente Arial e Courier ce li hanno tutti, quindi non sbagli mai). Poi, quando usi font-family, devi specificare più di una famiglia di caratteri, in modo da dare un'alternativa nel caso un carattere non fosse trovato installato. Ad es.

font-family: Arial,Sans-serif,Verdana,Helvetica;

applica carattere Arial. Se Arial non viene trovato sul PC dell'utente, viene applicato Sans-serif. Se neanche questo viene trovato, viene applicato Verdana, e così via. Se non viene trovato nessun carattere, il browser imposta il suo font standard (generalmente Times New Roman).

[gioser]

. . .non so che dire. . .mi hai arato . . .no comunque a parte gli scherzi grazie dei cosigli. . .sembri un vero professionista. . .domani correggo le imperfezioni e poi ti faccio sapere (se ti interessa). . .grazie ancora. . .spero di potere usufruire ancora dei tuoi consigli in fututro!ciao!

[seed_squall_it]

Certo che mi interessa sapere com'è andata...e se posso esserti utile, mi fa piacere. Non sono un professionista (anche se è molto che mi interesso di web e PC)...sto solo cercando di contribuire a diffondere la cultura degli standard, perché vedo che molte persone non sanno ancora cosa siano gli standard e si ostinano a usare le vecchie tabelle per creare layout di siti inaccessibili. Altre incontrano difficoltà coi CSS e tornano sui loro passi...e queste sono abitudini che vanno cambiate. Io stesso ho perso 3 settimane a decidere se e come dovevo convertire il mio sito quando iniziai con i CSS...è normale, all'inizio si incontrano difficoltà che sembrano insormontabili se si è abituati con le tabelle, ma poi si scopre quello che i CSS possono fare e non si torna più indietro!

Già che ci sono, vorrei anche porre la tua attenzione su un aspetto importantissimo delle pagine XHTML: la semantica. Ho guardato la pagina che hai su Altervista e ho notato che ci sono "irregolarità" nell'uso di determinati tag. Ad es il "menu di navigazione": ho visto che nel tuo codice XHTML appare così:

LINK | LINK | LINK | LINK

Un menu fatto così è semanticamente scorretto (il codice XHTML è corretto, ma non viene rispettata la "natura" delle informazioni veicolate tramite questa serie di link). I menu hanno tutti la struttura di un elenco (tipicamente, di un elenco non ordinato), quindi è buona norma usare i tag che XHTML mette a disposizione per questo scopo: <ul> e[*]. Prendendo spunto dal tuo sito, il menu andrebbe fatto così:

Codice XHTML:

<ul id="menu">[*]LINK[*]LINK[*]LINK[*]LINK[/list]

Codice CSS (relativo al solo menu: non tiene conto della
sua posizione e degli eventuali box in cui è contenuto):

#menu {
padding: 0;
margin: 0;
}

#menu li {
list-style: none;
padding: 0 2px;
margin: 0;
float: left;
}

#menu li a {
color: #ffffff;
text-decoration: none;
border-left: 1px solid #ffffff;
line-height: 12px;
padding: 0 5px;
margin: 0;
float: left;
}

#menu li a#primavoce {
border-left: none;
}

Come vedrai disabilitando gli stili in Firefox, questo menu appare come un elenco puntato (non ordinato), mentre abilitando gli stili appare coma una serie di link orizzontali separati da un "|" (che è il bordo sinistro degli elementi <a>, escluso il primo). Questo preserva la semantica del menu. L'importante, quando si lavora in XHTML, è considerare prima di tutto la semantica e la funzione di ogni singolo elemento della pagina, senza preoccuparsi dell'aspetto finale. Con i CSS poi si imposteranno le regole opportune (e se necessario, si aggiungerà qualche elemento <div> o <span> ad hoc nella pagina) per "presentare" il documento.

[gioser]

Ti ringrazio per la tua collaborazioe, ho cominciato a scrivere pagine web in html circa due mesi fa. . .ho letto le guide presenti su html.it (che ritengo il mio punto di riferimento) e piano piano mi sono trovato davanti i problemi che immagino tutti incontrano (relativi all'uso di tabelle invisibili ecc). . .poi ho scoperto i css che ritengo un aspetto fondamentale per scrivere pagine relativamente leggere e accessibili. . .ho deciso cosi di attivare un sito non con la presunzione di fare il web master e guadagnare con questo lavoro ma piuttosto nel tentativo di realizzare qualcosa di profesionale e utile per me. . .il mio problema e' il tempo a mia disposizione, studio all'universita' (informatica) e nei ritagli di tempo "sviluppo" il mio (pseudo)sito. . .quello che hai visto l'ho fatto in un ora (che e' anche troppo per quello che c'e'). . .naturalmente di regole ne so pochine anche se scrivere un css semanticamente corretto era ed e' il mio obbiettivo. . .ora naturalmente applichero' (se ci riesco) le modifiche che mi hai consigliato e poi ti dico!. . .grazie ancora!