mozilla ed explorer

[green25]

Salve,
sono agli inizi con xhtml e css. Ho realizzato una pagina iniziale, correttamente validata con il w3c, ma che mi dà effetti diversi con explorer e mozilla. Con quest'ultimo browser infatti l'immagine "sale" e finisce sotto il testo in cima alla pagina. Explorer la visualizza nel modo giusto.
Qualche consiglio?
Grazie

Il link alla pagina è:http://193.205.249.68:8080/scritturedidonne
Questo il css:
/*external css file */
/* filename 'home.css'*/

body {background-color: #ffe4c4;color: #CC3333; }

a:link {color: #CC3333;text-decoration: none;}
a:visited {color: #666666; text-decoration: none; }
a:hover {color: #9900CC; text-decoration: underline;}
a:active {color: #9900CC;}

html {font-family:Times New Roman, Times, serif;}
.Stile1 {font-size: 18px;}
.Stile2 {font-size: 2.1em;font-weight: 600;}
.Stile3 {font-size: 18px;}
.Stile4 {font-size: 12px;}


.container {position: relative; padding-top:1%;width:100%;}
.intestazione2 {position: absolute; right: 0; }
.intestazione3 { position: absolute; width:100%; text-align: center; left: 0;z-index:2; }


#middle {position: relative; top:10%;left:2%; width:98%; z-index:1; }

img {width: 30%; left:0; top:0;}

.titolo /*titolo progetto*/{
position: absolute;
width: 55%;
visibility: visible;
top:25%;
left:34%;
z-index:3;
text-align: center; }


.ingresso{font-weight:500;padding-left:55%;z-index:4;padding-bottom:3%;}

#footer /*fondo pagina*/ {top: 110%;bottom:0%;left: 5px; width:90%;margin:1%;padding-bottom:0%;padding-top:1.5%;visibility: visible;font-weight: 500;}

p {border:2px;margin:3px}
.margine{margin-left: 2%;}

[Mich_]

Per un commento piu` completo dovresti postare anche il codice HTML o, meglio, un link alla pagina.

Comunque vedo che usi posizionamenti assoluti, che tolgono l'oggetto dalla normale visualizzazione, e lo inseriscono relativo al body.

Se puoi togliere i posizionamenti assoluti, probabilmente va tutto a posto.

[green25]

Grazie per la risposta, riproverò a modificare il posizionamento degli elementi(ma cercavo di ottenere un effetto "header" e piè di pagina fissi e non ci sono riuscita se non utilizzando il posizionamento assoluto).
Avevo comunque anche scritto il link alla pagina (che è su server e dovrebbe essere quindi visibile; il link alla pagina è: http://193.205.249.68:8080/scritturedidonne.

[Mich_]

Opps! non avevo notato il link, scusa.

Comunque prima del CSS, dovresti sistemare l'HTML.
I tag vanno usati per il loro significato semantico.

E` un errore (semantico) usare uno <span> per un titolo (vanno usati i tag <hN>.
E` un errore anche scrivere (nell'ordine
- Archivio di Stato di Roma
- Facoltà di lettere e filosofia
- Ministero per i beni e le attività culturali
- Università di Roma " La Sapienza"
Infatti la facolta` di lettere non fa parte (e non ha nessuna relazione) con l'archivio di stato, ma invece ce l'ha con il ministero ...

Anche l'attributo alt e` usato come se fosse un title: l'alt deve contenere una descrizione dell'immagine, non la descrizione del link.

Per tornare al tuo problema, dovresti guardare come sono fatti i siti dei "maestri", che trovi (ad esempio) tra i "link utili" del forum.

Sicuramente devi abbandonare i posizionamenti assoluti.
Ogni titoletto deve avere un suo oggetto che lo contiene; poi puoi mettere i vari oggetti sulla stessa riga, allinearli a sinistra o a destra ecc, ma prima devi guardare il contenuto, poi la formattazione.
Nella tua pagina se viene tolto il CSS non si capisce piu` nulla, cosa che contrasta con la motivazione piu` grossa dei CSS.

[green25]

Grazie, grazie...grazie
Mi rimetto (con pazienza) al lavoro...
Avevo capito che la semantica è molto importante...ma. mi sono lasciata prendere dalla grafica (e da una miriade di altri problemi ).
Mi piacerebbe riuscire a fare un sito accessibile (anche se "semplice"), e so che la strada è lunga.
Chiedo troppo se chiedo di dare un'occhiatina anche ai metatags?

[pierofix]

Originariamente inviato da Mich_
l'alt deve contenere una descrizione dell'immagine, non la descrizione del link.

A dirla meglio, l'alt è il testo alternativo per l'immagine. La descrizione va inserita nell'attributo longdesc.

Un esempio di alt corretto lo si può trovare in un'immagine usata come titolo. Se usiamo una gif per scrivere "Come usare i CSS" con un carattere particolare ed un'ombreggiatura, nell'alt non faremo altro che scrivere "Come usare i CSS".

Il concetto è che, se l'immagine non viene visualizzata per qual si voglia motivo, il testo alternativo svolga la stessa funzione dell'immagine stessa. Questo viene detto nella prima linea guida del documento ufficiale sull'accessibilità ai contenuti web (più precisamente al punto 1.1):

- http://www.w3.org/TR/WCAG10/#gl-provide-equivalents

Per approfondimenti sul problema delle immagini e l'accessibilità vi rimando all'ottimo documento seguente:

- http://joeclark.org/book/sashay/seri...Chapter06.html

[Mich_]

Originariamente inviato da green25
Grazie, grazie...grazie
Mi rimetto (con pazienza) al lavoro...
Avevo capito che la semantica è molto importante...ma. mi sono lasciata prendere dalla grafica (e da una miriade di altri problemi ).
Mi piacerebbe riuscire a fare un sito accessibile (anche se "semplice"), e so che la strada è lunga.
Chiedo troppo se chiedo di dare un'occhiatina anche ai metatags?

Si`, me ne ero accorto.
Sei partita dalla grafica, hai sistemato tutto bene (pero` con il browser sbagliato), e poi hai trovato l'inghippo (lasciami dire: per fortuna).

Invece devi partire dai contenuti (da inserire usando tag corretti), poi pensare alla formattazione degli stessi (guardando prima nel browser FireFox - o simili) ed infine applicare eventuali hack per il browser IE.

Esempio:
<h1 class="sin">Archivio di Stato
<span class="piccolo">Ministero ...</span></h1>
<h1 class="des">Facolt&ampagrave; di lettere
<span class="piccolo">Universit...</span></h1>
<h2> Osservatorio sull astoria ...</h2>
<div id="titoloprinc">
<a href="Elenco_fondi.jsp" title="Entra nel sito" >
[img]img/volto_giovinetta.jpg[/img]
<h3>Scritture di donne <span class="piccolo">sec ...
progetto di censimento</span>
</a>
</div>
ecc

Poi devi iniziare a sistemare il CSS:
i vari elementi vanno posizionati con
.sin {
text-align: left;
float: left;
}
.des {
text-align: right;
float: right;
}
#titoloprinc {
clear: both; /* per togliere i float preedenti */
margin: 0 auto; /* centrato per browser conformi */
text-align: center; /* centratura testo all'interno */
}
.piccolo {
font-size: smaller; /* oppure 70% */
}
ecc.

[Mich_]

tag <html> la lingua deve essere "it" (due volte): il tuo sito non e` in inglese. Invece la lingua del doctype e` inglese, per cui in DOCTYPE ci deve rimanre /EN

Note sui <meta>
meta name="lang": non serve - la lingua e` definita dal tag <html>

Gli altri meta mi sembrano correti rispetto al loro nome.

[green25]

Invece devi partire dai contenuti (da inserire usando tag corretti), poi pensare alla formattazione degli stessi (guardando prima nel browser FireFox - o simili) ed infine applicare eventuali hack per il browser IE.

Ci sto già lavorando...
Le altre pagine poi dovrebbero andare più "lisce": sono di solo testo. Le genero direttamente da access in html e poi le modifico utilizzando azioni jsp per non riscrivere le parti fisse (il server web è tomcat).

Non sono ancora soddisfatta della resa complessiva, ma non demordo
Mi ero un pò arenata (e anche un pò stanca di leggere manuali).
Grazie della "spinta"

[green25]

Non avevo capito nulla degli elementi "fluttuanti"! Pensavo servissero solo a sistemare il testo intorno alle immagini!
Splendido e semplice
Per cercare di allineare i vari testi mi ero complicata un bel pò la vita!
Inoltre, ho scoperto solo da poco (grazie al forum) come vedere i css negli altri siti