CSS su Opera e Netscape

[fragolag]

Vorrei rendere compatibile un sito con Opera e Netscape.
I problemi più gravi per ora sono questi:
su Opera non sono cliccabili i link del corpo centrale e dei menu laterali; idem su Netscape, in più i link del menu superiore non portano da nessuna parte.
Ho fatto alcuni esperimenti e ho la sensazione che il problema risieda nell'uso dei CSS e nell'annidamento dei <div>... ma nn riesco a capire come far funzionare il tutto.

La cosa assurda è ke su IE 6 tutto funziona per bene e ho persino verificato che fosse valida ciascuna pagina (XHTML 1.0 Transitional e CSS).

Sapreste dirmi dove ho sbagliato?

Grazie!
www.studiumcanticum.it/home.php

P.S. se "frugando" il sito vi venissero in mente delle osservazioni... sarei lieta di conoscerle!
Ri-grazie

[Marcolino's]

Sto dando un'occhiata al tuo sito, mi sono scaricato in locale la tua pagina e la sto guardando, il bello è che senza CSS si legge una meraviglia.
Ora gli do un'occhiata e poi ti dico, peccato perchè il sito è carino nella sia semplicità.

Aspetta fiduciosa, elaborazione in corso! Bip.

[Marcolino's]

Quasi fatto ora si vede solo è da tirare su la barra laterale destra ti anticipo che la "colpa" è dei position: relative, inizia a toglierli.

[kkriminale]

secondo me usare stylesheet differenti per risoluzioni differenti non è una bella mossa.

Con Mozilla 1.5 non si vede il corpo centrale della pagina solo i link sopra e sotto.

I validatori ti possono dire solo se hai scritto le cose bene non se è giusto fare quello che hai fatto.

[Marcolino's]

Originariamente inviato da kkriminale
secondo me usare stylesheet differenti per risoluzioni differenti non è una bella mossa.

Con Mozilla 1.5 non si vede il corpo centrale della pagina solo i link sopra e sotto.

I validatori ti possono dire solo se hai scritto le cose bene non se è giusto fare quello che hai fatto.

No questo non c'entra, in effetti aveva anche sbagliato il codice javascript e non prendeva quell'opzione, maquando l'ho corretta in effetti non si vedeva più nulla.
Il motivo è che i vari layer coprono gli altri, in particolare foot copre tutto, ora sono riuscito a sistemarlo in parte, ma mi rendo conto che ci vorrebbe una riscrittura completa.

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: #000000;
background-color: #FFF7DD;
line-height: 1.5em;
text-align: center;
margin: 0;
padding: 0;
}

#box {		/*serve per la centratura nelle risoluzioni superiori*/
padding: 0;
width: 760px;
margin: 1em auto;
border: 1px solid red;
}

#head {
padding: 0;
width: 780px;
top: 10px;
left: 10px;
}

#center {
top: 10px;
left: 10px;
float: left;
margin: 10px 0px 20px 0px;
padding: 0px 0px 0px 0px;
width: 520px;
}

#menu_dx {
	right: 10px;
	float: right;
	margin: 6px 0px 20px 0px;
	padding: 0;
	width: 236px;
}

#foot {
top: 10px;
left: 10px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 0px;
width: 760px;
}

p.barra_menu {		/*barra dei link in head e foot*/
color: #660033;
text-align: center;
background-color: #FFF7DD;
margin: 10 ;
padding: 0;
border: 1px solid #660033;
}

div.menu {		/*elenco link laterale*/
background-color: #FFF7DD;
margin: 0px 10px 10px 10px;
padding: 0px 0px 0px 0px;
border: 1px solid #660033;
}

form {
background-color: #EBD7C7;
line-height: 1.2em;
margin: 4px 10px 14px 10px;
padding: 10px 10px 10px 10px;
border-width: 1px 1px 1px 1px;
border-color: #660033;
border-style: solid;
}

form.menu {
font-size: 8pt;
color: #660033;
background-color: #EBD7C7;
line-height: 1.2em;
margin: 4px 10px 14px 10px;
padding: 4px 10px 4px 10px;
border-width: 1px 1px 1px 1px;
border-color: #660033;
border-style: solid;
}

input {
background-color: #FFFFFF;
}

.button {
background-color: #EBD7C7;
}

table {
background-color: #EBD7C7;
margin: 4px 10px 4px 10px;
padding: 10px 10px 10px 10px;
border-width: 1px solid #660033;
width: 500px;
}

td {
border-bottom: 1px solid #FFF7DD;
line-height: 1.5em;
padding: 4px 10px 4px 10px;
}

table.menu {
font-size: 8pt;
margin: 0;
padding: 3px;
border: none;
width: 100px;
}

table.admin {
font-size: 8pt;
}

td.menu {
border: 0px;
}

p {
background-color: #EBD7C7;
text-indent: 10px;
text-align: justify;
margin: 4px 10px 4px 10px;
padding: 10px 10px 10px 10px;
border-width: 1px;
border-color: #660033;
border-style: solid;
}

p.menu {
font-size: 8pt;
color: #660033;
text-indent: 0px;
text-align: left;
line-height: 1.2em;
margin: 4px 10px 14px 10px;
padding-top: 4px;
padding-bottom: 4px
}

p.link {		/*link di navigazione sotto i paragrafi*/
background-color: #FFF7DD;
text-align: center;
text-indent: 0px;
margin: 4px 10px 4px 10px;
padding: 0px 0px 0px 0px;
border: 1px solid #660033;
}

p.cantori {
text-indent: 0px;
padding-left: 20px;
}

h1 {
font-weight: bold;
font-size: 10pt;
color: #FFF7DD;
background-color: #660033;
vertical-align: middle;
margin: 10px 10px 4px 10px;
padding: 0px 0px 0px 10px;
}

h2 {
font-weight: bold;
font-size: 10pt;
color: #660033;
vertical-align: middle;
margin: 20px 10px 4px 10px;
padding: 0px 0px 0px 10px;
}

h3 {
font-weight: bold;
font-size: 10pt;
color: #FFF7DD;
background-color: #660033;
vertical-align: middle;
margin: 14px 10px 4px 10px;
padding: 0px 0px 0px 10px;
}

.voce_menu {
font-weight: normal;
color: #660033;
background-color: #FFF7DD;
vertical-align: middle;
margin: 4px 10px 4px 10px;
padding: 0px 0px 0px 10px;
border-width: 1px;
border-color: #660033;
border-style: solid;
}

a:link {
color: #660033;
}

a:visited {
color: #660033;
}

a:hover {
color: #660033;
background-color: #FFF7DD;
text-decoration: none;
}

a.menu:link {
text-decoration: none;
}

a.menu:visited {
text-decoration: none;
}

a.menu:hover {
background-color: #EBD7C7;
}

a.menu_dx:link {
text-decoration: none;
}

a.menu_dx:visited {
text-decoration: none;
}

a.menu_dx:hover {
background-color: #EBD7C7;
text-decoration: none;
}

a.link:hover {
background-color: #EBD7C7;
}

ul {
color: #660033;
line-height: 1.5em;
list-style-type: square;
margin: 10px 10px 10px 30px;
padding: 0px 0px 0px 0px;
}

img {
background-color: #FFF7DD;
margin-top: 6px;
padding: 4px;
border: 1px solid #660033;
}

Scusate per la lunghezza del file.

PS il bordo rosso mi serviva per vedere dove andava a finire tale livello.

[fragolag]

Ragazzi, prima di tutto grazie per l'attenzione

Leggendo guide, tutorials e articoli vari sui CSS a quanto pare non sono riuscita a farmi un'idea chiara su come si deve procedere.
La pratica sembra anni luce lontana dalla teoria...
e così mi tocca riscrivere tutto il codice.

x Marcolino's:
- quando si devono/possono usare i position relative?
- qual è l'errore nel codice javascript?
- il css ke mi hai gentilmente corretto su cosa l'hai testato?

x kkriminale:
xkè nn è una bella mossa usare stylesheet differenti per risoluzioni differenti? (è un suggerimento ke avevo preso da conStile.org)

Ah, un'altra cosa, a voi è mai capitato di muovere il mouse su un link e vedere ke si spostano porzioni della pg (tipo img, paragrafi o altri link)... è una cosa orrenda, xkè succede?

a presto

[Marcolino's]

Allora fragolag, intanto scusa se ti rispondo solo ora, ma mi ero perso il tuo topic quindi ...

Allora, l'ho sviluppato su GNU/Linux browser Mozilla.
Per quanto riguarda il connubi teoria/pratica ti do ragione, ma la soluzione è sempre la stessa e cioè fare, fare, fare ... fare.
Constile già lo conosci quindi non ti passo il link, se mastichi abbastanza l'inglese ti consiglio:
http://www.alistapart.com/
http://www.htmlhelp.com/reference/css/properties.html
http://www.lucamascaro.info/articoli.xsp (questo è in italiano).

Per il tuo sito credo che ti ci vorrà un po di pazienza, ma non dovrebbe essere difficile farlo venire fuori anche con gli altri browser, un'accortezza: ho notato che hai dato la larghezza generale a 780 pixel, ma la larghezza massima per un 800x600 è 760 pixel.
Inoltre io non farei nulla per quanto riguarda il cambio di risoluzione, ma centrerei soltanto il sito nella pagina.
Per il javascript l'errore è solo che non veniva caricato, ma se metti la chiamata alla funzione nel body (onLoad='funzione()') allora va, però ricordati che esiste la possibilità di disabilitare il javascript nei browser, come pure di impedire alle popup di saltare fuori.

Ciao, Marco.

[fragolag]

Marco... ancora grazie!
Ho dato avvio alla fase di revisione profonda, spero di tirar fuori qlcs di decente.

P.S. ma perkè mi fisso con sti css anzikè mettermi a studiare x gli esami?!?!?! :master:

[fragolag]

Ho riscritto di sana pianta la formattazione, con gli okki puntati su IE 6, Opera 6 e Mozilla 1.4. Sembra ke funzioni...

Se avete un minutino potreste verificare la compatibilità con i vostri browser? grazie mille!