[RISOLTO (almeno questo)]Fogli di stile css e IE

[targzeta]

Ciao ragazzi,
si sa che IE è proprio una chiavica nel seguire gli standard del w3c in fatto di fogli di stile. In particolare il mio problema è il seguente:
In una pagina c'è un menù sinistro con scritto "Legambiente Pisa" in verticale. La scritta è un immagine di background della lista. Con mozilla e altri browser va tutto bene (grazie per segnalazione di http://browsershots.org/), con IE invece succede che la scritta si trova sotto la lista e che quindi si veda male.
Eccovi uno screen shot (fin che non scade ),
http://browsershots.org/screenshots/484 ... 8813f651a/

C'è qualche guru di css (o meglio di IE) che riesca a spiegarmi perchè mai succede questa cosa?
Eccovi i fogli di stile che interessano il menù

Codice: Seleziona tutto

DIV#menu_sx { 
              width:          18%;
              padding-right:  1%;
              margin-right:   3%;
              text-align:     left;
              float:          left;
              background:     #E5E5E5 url(/bg_tondo_top_right.gif) no-repeat scroll right top;
            } 

UL.menu_sx { 
             list-style-type:  none; 
             list-style-position: inside;
             background:       url(/legapisa.gif) no-repeat scroll 0 8px;
           }

grazie mille,
spina

[sya54M]

ci sono 2 errori, uno in index.css a LI.menu_sx A:visited e uno in gstyle.css a A:visited
guarda qui per i dettagli:

http://jigsaw.w3.org/css-validator/vali ... =1&lang=it

[conraid]

Spina, secondo me quel codice è troppo incasinato. Sembra il mio quando di quando faccio gli script BASH

Comunque così ad occhio io metterei un div in più, ma non ho provato. IE è una rottura di BEEP notevole per queste cose.

[targzeta]

ci sono 2 errori, uno in index.css a LI.menu_sx A:visited e uno in gstyle.css a A:visited
guarda qui per i dettagli:

http://jigsaw.w3.org/css-validator/vali ... =1&lang=it

Ti ringrazio, ma non era quello che mi interessava .

Spina

[targzeta]

Spina, secondo me quel codice è troppo incasinato. Sembra il mio quando di quando faccio gli script BASH

Comunque così ad occhio io metterei un div in più, ma non ho provato. IE è una rottura di BEEP notevole per queste cose.

Quello che non mi piace proprio è la tabella per il menù orizzontale in alto (insieme a quel align), però davvero non riuscivo a centrare il menù eliminando la tabella. Inoltre ci sono troppi div nel div centrale . Ma il problema, non so se si è capito dalla screenshot, e la scritta verticale nel menù di sinistra, che con IE si sballa tutta.

grazie comunque per il tentativo,
Spina

[danix]

Quello che non mi piace proprio è la tabella per il menù orizzontale in alto (insieme a quel align), però davvero non riuscivo a centrare il menù eliminando la tabella.

ma non puoi semplicemente mettere il codice relativo al menù orizzontale in un div e dargli nel css

Codice: Seleziona tutto

margin:0 auto;

si dovrebbe centrare automaticamente...

Inoltre ci sono troppi div nel div centrale . Ma il problema, non so se si è capito dalla screenshot, e la scritta verticale nel menù di sinistra, che con IE si sballa tutta.

riguardo al problema del menu laterale, non so di preciso come aiutarti, ma la prima cosa che ho notato guardando l'html della pagina è il fatto che tutto in quel menu ha una classe o un id, non puoi ottenere la stessa formattazione dando solo la classe al div contenitore e specificando i valori per le varie voci in questo modo:

Codice: Seleziona tutto

div#menu_sx {
  attributi div
  }
div#menu_sx ul {
  attributi che interessano
  solo l'ul che sta
  sotto al div con id
  menu_sx
  }
div#menu_sx ul li {
  attributi che modificano
  solo i tag li che si trovano
  dentro ad un ul contenuta
  in un div con id menu_sx
  }

???
almeno avresti tutto un po' più ordinato per incominciare...
poi potresti provare a dare l'immagine di sfondo al div, lasciando l'ul trasparente e sistemando l'immagine d'angolo all'inizio del div in alto e dandogli un float right...
per quanto riguarda lo sfondo del div io dichiarerei una cosa tipo:

Codice: Seleziona tutto

DIV#menu_sx { 
             background:       url(/legapisa.gif) no-repeat scroll top left;
            }

spero di non aver detto troppe castronerie... purtroppo come diceva giustamente conraid IE fa veramente schifo in quanto a supporto ai css...

Per evitarti tutto questo potresti mettere un codice in php che identifica il browser dell'utente e se ha IE (qualsiasi versione) lo manda a schifo (leggi lo manda a scaricarsi firefox)


PS
io avevo scritto lo manda a c**are, non lo manda a schifo... comunque... rende lo stesso l'idea...

[targzeta]

ci sono 2 errori, uno in index.css a LI.menu_sx A:visited e uno in gstyle.css a A:visited
guarda qui per i dettagli:

http://jigsaw.w3.org/css-validator/vali ... =1&lang=it

Rileggendo la mia risposta, non vorrei essere sembrato scortese. Ti ringrazio davvero di avermi segnalato questi errori, e li ho aggiustati.

Spina

[targzeta]

@danix
grazie per l'idee, ora provo e ti faccio sapere.

Per quanto riguarda la prima, quella del menù orizzontale, no, non funziona perchè sono tutti float: left e quindi vanno sempre a sinistra del div, a meno di non centrare il div, ma come si centra un div? dovrei dargli una larghezza fissa....e non mi piace l'idea, anche perchè...di quanto?

Quella del selettore genitore, non la uso perchè l'ho ereditata dal file originale, il codice è generato in php, comunque ora provo a modificarlo.

Invece l'idea per la scritta mi piace, ora provo e speriamo bene .

Spina

[danix]

non serve dargli larghezza fissa, basta che gli dai un

Codice: Seleziona tutto

clear:both;

e metti il testo al suo interno centrato...
io in un sito con layout simile ho creato un div (id="menu") e ci ho messo solo un ul, ho organizzato il tutto come ti ho detto e ho ottenuto lo stesso risultato che hai tu al momento...

riguardo ai selettori basta che fai in modo che il php non imposti una classe per i vari ul e li ma solo per il div... il css non credo tu lo crei con il php, no??

[targzeta]

non serve dargli larghezza fissa, basta che gli dai un

Codice: Seleziona tutto

clear:both;

e metti il testo al suo interno centrato...
io in un sito con layout simile ho creato un div (id="menu") e ci ho messo solo un ul, ho organizzato il tutto come ti ho detto e ho ottenuto lo stesso risultato che hai tu al momento...

riguardo ai selettori basta che fai in modo che il php non imposti una classe per i vari ul e li ma solo per il div... il css non credo tu lo crei con il php, no??

Avresti un link di un sito che ha lo stesso effetto, l'ho cercato un pò, ma niente. Sono il primo a dire che è brutto usare questo stratagemma, ma non mi viene niente in mente...e non è che sia proprio un guro in questo campo.

Il selettore era una sciocchezza, poi è questione di stile secondo me, comunque ho fatto come hai suggerito tu. Invece per la scritta verticale, è qui che ti ringrazio enormemente, ha funzionato:
http://api.browsershots.org/png/origina ... 63079a.png

Grazie ancora,
Spina

[danix]

mi fa piacere che abbia funzionato ...

riguardo al menu in alto, il sito in questione ce l'ho solo in locale ed è generato dinamicamente, comunque in breve l'html generato è così formato:

Codice: Seleziona tutto

DTD
<html>
  <head>
    <meta></meta>
    <style></style>
    <title></title>
  </head>
  <body>
    <div id="sitebody">
      <div id="topmenu">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="menuleft">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="content1">
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div id="contentN">
        <p></p>
        <p></p>
      </div>
      <div id="footer">
        <p></p>
      </div>
    </div>
  </body>
</html>

nel css ho impostato al minimo i parametri per il body (giusto il colore di sfondo e quello che riguarda i caratteri in genere), sitebox mi serve per dare una dimensione al sito, praticamente agisco su quello se voglio un sito a dimensione fissa o se voglio che prenda tutta la larghezza del browser...
topmenu come ti dicevo ha questi attributi:

Codice: Seleziona tutto

text-align:center;
padding:0;
margin:0 auto;

se così non dovesse funzionare puoi separare il blocco del menu in alto dai blocchi che stanno sotto con uno stratagemma, devi mettere un div subito sotto a topmenu, gli dai class="clearer" ad esempio, come contenuto puoi mettere   e nel css gli dai come height 4 o 5 px, width 100% e clear:both, in questo modo niente si potrà mettere di fianco al topmenu... la pagina con quel div particolare in più risulterebbe così:

Codice: Seleziona tutto

DTD
<html>
  <head>
    <meta></meta>
    <style></style>
    <title></title>
  </head>
  <body>
    <div id="sitebody">
      <div id="topmenu">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="clearer">&nbsp;
      </div>
      <div id="menuleft">
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div id="content1">
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div id="contentN">
        <p></p>
        <p></p>
      </div>
      <div id="footer">
        <p></p>
      </div>
    </div>
  </body>
</html>

spero di essermi spiegato chiaramente...

[targzeta]

Aggiornamento. Ho tolto la tabella e ho reso il codice valido per HTML 4.01 strict. Però il menù orizzontale non lo riesco a centrare. La forma è

Codice: Seleziona tutto

<DIV id="menu_banner">
  <UL>
    <LI>
    <LI>
  </UL>
</DIV>

e, anche mettendo un "text-align: center" e "margin: auto" al DIV, l'UL all'interno non si centra.

Per ora ho messo il DIV flottante a sinistra ed ho impostato dei margini laterali all'UL di 5% e 10%, rispettivamente sinistro e destro. Se qualcuno mi può illuminare

Grazie ancora,
Spina

[conraid]

Non ho di fronte tutto il codice, comunque il text-align:center; va negli attributi del blocco padre, mentre margin:0 auto; va nel blocco che vuoi centrato.

Se l'hai già fatto i'm sorry

[targzeta]

Ho messo text-align al DIV e margin all'UL, ma nada.

Spina

[danix]

credo che conraid si riferisca al body nel tuo caso parlando di elemento padre, in effetti il tuo div contenente il menu è posizionato direttamente nel body, io invece creo sempre un div contenitore (sitebox nell'esempio che ti avevo postato) in cui mettere i vari elementi che vanno poi a comporre la pagina... se fai così, sitebox lo puoi impostare con align:center e poi il div "menu_banner" lo imposti con margin:0 auto;... in questo modo i margini superiore e inferiore si annullano, e quelli destro e sinistro si impostano in modo tale da centrare il div... l'ul non deve avere impostazioni di posizione in quanto deve limitarsi ad occupare tutto lo spazio che le serve...