Newsgroup: it.lavoro.professioni.webmaster
Titolo: Css e sfondi. Problemi con Ie ma no con Opera e Mozilla.

Ciao a tutti.
Sto facendo degli esperimenti con i CSS.
Ho pero' un problema.
Ho fatto una pagina di prova stile portalone classico seguendo i
suggerimenti
di 
www.constile.org
poi al centro della pagina ho provato a mettere delle tabelle con le
seguenti
caratteristiche:
sono tabelle fatte di 2 righe x 1 colonne.
--------------------------
-     Titolo                      -
--------------------------
-  testo                           -
-  testo                           -
-  testo                           -
--------------------------
<span class="scheda">
    <p class="titoloscheda">
        ciao sono il fantastico titolo
    </p>
    <p class="testoscheda">
        ciao, sono lo stupido testo
    </p>
</span>
nella classe
.titoloscheda { }
ho definito uno sfondo ed un bordo.
Il problema e' che con internet explorer (ho fatto le prove con la vers. 6)
non mi vengono visualizzati ne' sfondo ne' bordo.
La cosa arcana e' che se evedenzio col mouse quella parte di pagina e poi
tolgo
la selezione, la tabella prende magicamente colore... insomma e'
visualizzata quasi
correttamente.
Ho fatto poi delle prove con Opera 7 e con Mozilla e tutto funziona a
dovere.
Ovviamente non posso mettere una nota in fondo alla pagina del tipo:
"per visualizzare corretamente la pagina con Ie evidenziare il testo
e togliere la selezione".
Si tratta forse di un bug di Ie?
Esiste un workaround (insomma per capirci, uno sgamo)?
Scusatemi se non sono stato abbastanza preciso con la porzione di codice
ma non ho i sorgenti a portata di mano.
Eventualmente posso postare in settimana tutto il codice della pagina.
Grazie per ora a tutti e complimenti per gli ottimi post
che caratterizzano questo NG (sono sincero, non e' ruffianeria).
Saluti,
*aw*

 Eventualmente posso postare in settimana tutto il codice della pagina.
IMHO è quasi necessario che tu indichi chiaramente tutto il codice CSS
oppure fornisca l'url della pagina "incriminata".
Ciao
--
http://www.leishmania.org/
http://www.leishmania.it/campagna/

 dovere.
Ovviamente, quelli sono browser come si deve ;-)
Saluti
--
Gianluca Troiani
www: 
http://www.constile.org/
blog: 
http://geco.constile.org/

 blog: 
http://geco.constile.org/
Suggerimenti direttamente dall'autore :) ?
Colgo l'occasione per farti i complimenti per il libro
"Css - imparare dagli esempi" e per il sito.
Sono molto chiari anche se l'argomento trattato non e'
semplicissimo.
Ringrazio anche gli altri che mi stanno aiutando e
che comunque stanno leggendo questo thread.
Allego in coda al posto il sorgente della pagina e del file default.css
Sorgente della pagina:
--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html>
<head>
 <title>Azienda USL z</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="expires" content="0" />
 <meta name="resource-type" content="document" />
 <meta name="distribution" content="global" />
 <meta name="author" content="Angelo Oliviero" />
 <meta name="keywords" content="veterinaria" />
 <meta name="description" content="Servizio di Veterinaria - Azienda USL z -
Prato" />
 <meta name="revisit-after" content="1 days" />
 <meta name="rating" content="general" />
 <script type="text/javascript" language="Javascript"
src="include/js/styleswitcher.js">
 </script>
 <link rel="stylesheet" type="text/css" href="include/stili/default.css"
title="default" />
 <link rel="stylesheet" type="text/css" href="include/stili/orizzontale.css"
title="orizzontale" />
 <link rel="stylesheet" type="text/css" href="include/stili/ipovedenti.css"
title="ipovedenti" />
 <link rel="stylesheet" type="text/css" href="include/stili/stampante.css"
media="print" />
</head>
<body>
<div id="testa">
  <h1>Azienda USL z di z</h1>
  <h4>- Veterinaria -</h4>
</div>
<div id="smenu">
  <ul>
    <li>Selezione Stile:</li>
    <li><a href="#" onclick="setActiveStyleSheet('default'); return
false;">Verticale</a></li>
    <li><a href="#" onclick="setActiveStyleSheet('orizzontale'); return
false;">Orizzontale</a></li>
    <li><a href="#" onclick="setActiveStyleSheet('ipovedenti'); return
false;">Ipovedenti</a></li>
  </ul>
</div>
<div id="corpo">
  <div id="mmenu">
    <p class="titolomenu">Menu principale:</p>
    <ul>
      <li> <a href="#" title="Sono fornite le ultime comunicazioni su
argomenti recenti.">
        Novit&agrave; </a> </li>
      <li> <a href="#" title="Contiene le informazioni relative a dove
siamo, i nostri obiettivi, cosa facciamo e come contattarci.">
        Presentazione </a> </li>
      <li> <a href="#" title="Invia ad una panoramica delle attivit&agrave;
svolte dai tre settori in cui &egrave; suddivisa la Sanit&agrave; Pubblica
Veterinaria">
        Mappa </a> </li>
      <li> <a href="#" title="Collegamenti alle sezioni principali del
sito">
        Sommario </a> </li>
      <li> <a href="#" title="Risposte alle domande piu' frequenti"> Faq
</a>
      </li>
      <li> <a href="#" title="Elenco, in continuo aggiornamento, dei termini
utilizzati nel settore veterinario">
        Glossario </a> </li>
      <li><a href="#" title="Moduli utilizzati nel settore veterinario,
stampabili">
        Modulistica </a> </li>
      <li><a href="#"> Normative </a> </li>
      <li><a href="#"> Statistiche </a> </li>
      <li><a href="#"> Area A </a></li>
      <li><a href="#"> Area B </a></li>
      <li><a href="#"> Links </a></li>
    </ul>
  </div>
  <div id="cmenu">
    <p class="titolomenu">Menu Contest:</p>
    <ul>
      <li><a href="#"> Presentazione </a> </li>
      <li><a href="#"> Servizi </a> </li>
      <li><a href="#"> Mappa </a> </li>
      <li><a href="#"> Sommario </a> </li>
      <li><a href="#"> Novit&agrave; </a> </li>
      <li><a href="#"> Faq </a> </li>
      <li><a href="#"> Glossario </a> </li>
      <li><a href="#"> Modulistica </a> </li>
      <li><a href="#"> Normative </a> </li>
      <li><a href="#"> Statistiche </a> </li>
      <li><a href="#"> Links </a> </li>
    </ul>
  </div>
  <div id="contenuto">
    <div class="scheda">
      <p class="schedatitolo">titolo</p>
      <p class="schedatesto">commenti commenti commenti commenti commenti
commenti
        commenti </p>
    </div>
    <div class="scheda">
      <p class="schedatitolo">titolo</p>
      <p class="schedatesto">commenti commenti commenti commenti commenti
commenti
        commenti </p>
    </div>
    <div class="scheda">
      <p class="schedatitolo">titolo</p>
      <p class="schedatesto">commenti commenti commenti commenti commenti
commenti
        commenti </p>
    </div>
    <div class="scheda">
      <p class="schedatitolo">titolo</p>
      <p class="schedatesto">commenti commenti commenti commenti commenti
commenti
        commenti </p>
    </div>
    <div class="scheda">
      <p class="schedatitolo">titolo</p>
      <p class="schedatesto">commenti commenti commenti commenti commenti
commenti
        commenti </p>
    </div>
  </div>
</div>
<div id="footer"> Azienda USL z di z </div>
</body></html>
-----------------
default.css
-------------
body {
   font:80% verdana,helvetica,sans-serif;
         text-align: center;
   margin: 0;
   padding: 0;
}
#testa {
   width: 90%;
         position: relative;
   margin: 0 auto;
   padding: 0;
         text-align:center;
   color: #000000;
   background-color: #009966;
}
#smenu {
   width: 90%;
         position: relative;
         top: 0;
   margin: 0 auto;
         padding: 0;
         text-align: left;
   color: #000000;
   background-color: #9ce89d;
}
#smenu a:link{
   color: #337352;
   background-color: #9ce89d;
}
#smenu a:visited{
   color: #337352;
   background-color: #9ce89d;
}
#smenu a:hover{
   background: #337352;
         color: #ffffff;
}
#smenu ul {
        margin: 0;
        padding: 0;
        padding-left: 1em;
        list-style-type: none;
}
#smenu li {
         font-weight: bold;
   float: left;
   padding-right: 1em;
}
#corpo {
   width: 90%;
   margin: 0 auto;
   position: relative;
         text-align:left;
   color: #000000;
         background: #009966;
}
#mmenu {
          position: absolute;
          text-align: right;
          font-weight: bold;
          padding: 0;
          padding-top: 1em;
          color: #fff;
   background: #009966;
       top: 0;
          left: 0;
       width: 20%;
}
#mmenu a {
        display:block;
        padding-right: 1em;
}
#mmenu a:link{
   color: #9ce89d;
   background: #009966;
}
#mmenu a:visited{
   color: #9ce89d;
   background: #009966;
}
#mmenu a:hover{
   background: #337352;
      color: #ffffff;
}
#mmenu p.titolomenu {
    font-size: 100%;
    font-weight: bold;
    text-align: right;
    padding-right: 1em;
          padding-top: 0;
          padding-bottom: 0;
          margin: 0;
          border: 0 none;
          background: #337352;
          color: #fff;
}
#mmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
}
#mmenu li {
        line-height:1.2em;
}
#contenuto {
         margin: 0 20%;
      padding: 1em 0;
         background-color: #ffffff;
   color: #000000;
         border-left: 1px solid #000;
         border-right: 1px solid #000;
}
.notizia {
          padding-bottom: 10px;
}
p.notiziatesto {
    font-size:100%;
    text-align: justify;
    padding-left: 10px;
    padding-right: 10px;
          padding-top: 0;
          padding-bottom: 0;
          margin: 0;
          border: 0 none;
}
p.notiziatitolo {
    font-size: 100%;
    color: #000000;
   background-color: #ffffff;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
          padding-top: 10px;
          padding-bottom: 0;
          margin: 0;
          border: 0 none;
}
.scheda {
          padding-top: 0;
    padding-bottom: 0;
}
p.schedatesto {
       display:block;
    font-size:100%;
    text-align: justify;
    color: #000;
   background: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
          padding-top: 0;
          padding-bottom: 0;
          margin: 0;
          border: 1px solid #000;
}
.schedatitolo {
   border: 2px solid #000;
   margin-bottom: 10px;
    color: #ff0000;
            background: #99ffff;
    font-size: 100%;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
       padding-top: 10px;
       padding-bottom: 0px;
       margin: 0;
}
#cmenu {
          position: absolute;
          text-align: left;
          font-weight: bold;
          padding: 0;
          padding-top: 1em;
          color: #fff;
   background-color: #009966;
          position: absolute;
       top: 0;
          right: 0;
       width: 20%;
}
#cmenu a {
        display:block;
        padding-left: 1em;
}
#cmenu p.titolomenu {
    font-size: 100%;
    font-weight: bold;
    text-align: left;
    padding-left: 1em;
          padding-top: 0;
          padding-bottom: 0;
          margin: 0;
          border: 0 none;
          background: #337352;
          color: #fff;
}
#cmenu a:link{
   color: #9ce89d;
   background: #009966;
}
#cmenu a:visited{
   color: #9ce89d;
   background: #009966;
}
#cmenu a:hover{
   background: #337352;
         color: #ffffff;
}
#cmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
}
#cmenu li {
        line-height:1.2em;
}
#footer {
   width: 90%;
      position: relative;
   margin: 0em auto;
      text-align:left;
   color: #ffffff;
   background-color: #9ce89d;
   text-align: center;
}
#immagine {
   float:left;
}
----------------

 Allego in coda al posto il sorgente della pagina e del file default.css
ha aggiunto la seguente regola infondo al foglio di stile e tutto sembra funzionare:
#contenuto{position:relative}
Hai fatto bene a inviare il codice.
Saluti