Newsgroup: it.lavoro.professioni.webmaster
Titolo: css e mozilla, help.

Salve a tutti,
ho appena constatato un grave problema di compatibilitŕ mozilla coi css
appena fatti:
Il sito č impaginato in questo modo, con un css esterno:
body {
 background-color: #CCC;
}
#contenuto {
 visibility: visible;
 height: 35px;
 margin-right:5%;
 margin-left:5%;
 background-color: #FFF;
 border:1px solid #000;
 text-align: left;
 margin-lft: 10%;
 min-width:400px;
 padding-bottom:20px;
}
#titolo {
 padding:0px;
 width:100%;
 background-color: #F93;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000;
}
#footer {
}
#footer td{
 padding-left:30px;
 padding-right:30px;
 padding-top:5px;
 padding-bottom:5px;
 letter-spacing: 12px;
 border: 1px solid #000;
 color: #000000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 letter-spacing: 12px;
 background-color: #FFF;
}
Cioč un titolo con sfondo arancione, il contenuto su sfondo bianco e una
barra di navigazione in basso, bianca, su tabella.
Ecco una pagina tipo:
<div id=contenuto>
    <div id=titolo>
        <h1>titolo della pagina</h1>
    </div>
    <p>contenuto della pagina</p>
</div>
<div id="footer">
 <table width="90%" border="0" align="center">
   <tr>
       <td align="left" width="33%"><a href="1.5.1.htm">indietro</td>
       <td align="center" width="34%"><a href="index.html">indice</a></td>
       <td align="right" width="33%"><a href="1.5.3.htm">avanti</td>
   </tr>
 </table>
</div>
Su explorer č perfetto! Su mozilla č tutto grigio, cioč non gli frega
dell'elemento #contenuto che ha lo sfondo bianco.
In piů la barra di navigazione č sotto il titolo, prima del contenuto, e non
in fondo alla pagina!
Perchč mai, cosa potrei cambiare? Per scrupolo, perchč potrei pure
fregarmene, ma l'errore in mozilla č proprio evidente.
Potrei metter il div footer dentro il div contenuto, ma cosě mi piace di
piů!
grazie mille, ciao

 snip
Funziona alla perfezione
-- 
                                                __Nicholas Wieland
Namespaces are one honking great idea -- let's do more of those!
                                                __The Zen of Python

 Funziona alla perfezione
Su Mozilla 1.2.1 no e neppure su mozilla firebird 0.7, t'assicuro, e non
solo da me!
Da te funziona con quale mozilla?

 grazie mille, ciao
-- 
Spirito Libero
Siamo tutti un po' abusivi a questo mondo...
(Non mettere il sale se vuoi rispondermi!)

 
Presumo intendesse dire che il supporto CSS su Mozilla funziona alla 
perfezione. Oppure scherzava...


 schifo!" e clicco su back...
E' un sito per un corso online, non č per tutti...:) Cmq hai perfettamente
ragione!
Ti ringrazio moltissimo, ciao

 
Ciao ;)


 padding: 5px 30px 0px 30px
In effetti su un altro tag avevo usato questa notazione, poi non so perchè
qua li ho impostati uno a uno!
Grazie mille ancora, ciao

Un'ultima cosa sui css.
Se nel div contenuto, che č largo 90%, ci metto un table width="100%",
pensavo che il 100% si riferisse allo spazio che ha a disposizione dentro il
tag div. Invece explorer mi sballa tutto. Sono obbligato a non impostare la
larghezza della tabella, perchč anche al 90% deborda, seppur con margin e
padding uguali a 0! Non c'č modo di usare una dimensione percentuale
relativa al parent?
Debbo farlo coi css per forza?
Grazie ancora, ciao

 Grazie ancora, ciao
Prego, ciao


 
http://css.maxdesign.com.au/listamatic/index.htm
Ho letto attentamente, ho strutturato una cosa del tipo:
#navlist
{
 border: 1px solid #000000;
 margin-bottom: 30px;
 background-color: #FFFFFF;
 font-family: Arial;
 padding-bottom: 5px;
 padding-top: 5px;
 min-width:400px;
 text-align: center;
 letter-spacing: 12px;
 margin-right:5%;
 margin-left:5%;
}
#navlist a, #navlist a:link, #navlist a:visited, #navlist a:active
{
 border: 1px solid #FFFFFF;
 color: #000000;
 font-weight: bold;
 text-decoration: none;
}
#navlist a:hover
{
 border: 1px solid #000000;
 text-decoration: none;
}
#navlist li
{
 display: inline;
 font-size: 14px;
 font-weight: bold;
 padding-right: 5%;
 padding-left: 5%;
}
#navlist ul
{
 margin: 0px;
 padding: 0px;
}
Poi nell'html:
<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="#" id="current"></a>&lt;&lt;&lt;Indietro</li>
    <li><a href="#">Indice</a></li>
    <li><a href="#">Avanti&gt;&gt;&gt;</a></li>
  </ul>
</div>
Il probelma è che vorrei che l'elemento a sx fosse vicino al bordo sx e
quello a dx fosse vicino al bordo dx.
Non so come fare.
Nel modo sopra descritto poi se la pagina è molto larga la lista sta al
centro, viceversa se è molto stretta va a capo.
Nella tabella m'assicuravo l'orizzontalità della barra e la vicinanza dei
due elementi estremi ai bordi.
Puoi aiutarmi? Ti ringrazio moltissimo

 perfezione. Oppure scherzava...
Nope, figurati...
Su Mozilla 1.5 funziona.
-- 
                                                __Nicholas Wieland
Complex is better than complicated.
                                                __The Zen of Python

 
Per quello che devi fare tu (tre pulsanti: indietro - indice - avanti), 
il tutorial che ti ho consigliato, non va proprio bene, perche' 
costruisce una barra di navigazione piu' complessa e che prevede i 
pulsanti affiancati. La soluzione che avevi utilizzato tu (la tabella), 
in questo senso ti toglie dagli impicci, anche se non e' pulita e 
corretta. Per ottenere un risultato analogo con i CSS, sarebbe 
necessario uno studio dei posizionamenti assoluto e relativo, in maniera 
tale da controllare direttamente la posizione che avranno i link nella 
pagina (con IE c'e' il solito casino). Se vuoi approfondire, leggi 
questo tutorial: 
http://pro.html.it/articoli/id_413/idcat_8/pag_1/pag.html
L'autore, SantaKlauss, e' un utente che qualche volta ha postato anche 
qui, ma che puoi incontrare molto piu' spesso su it.comp.www.html. Se 
vuoi un buon link dove imparare i CSS vai qui: 
http://www.w3schools.com
Ciao
