Problema sidebar , explorer versus firefox

[Vinegar_tom]

Salve a tutti , sto usando wordpress per sviluppare un sito di una squadra di calcio dilettantistica e ho avuto un problema con la visualizzazione del menu nella barra laterale in explorer.

Io uso da sempre firefox e il problema non si presenta in questo browser . I explorer le voci del menu laterale vengono distanziate eccessivamente , mentre in firefox mantengono la giusta distanza che io ho settato nei css tramite margin e padding .
Vi faccio notare che invece le voci del menu' "ultime news", ovvero il modulo degli articoli piu' recenti , sono impostate correttamente anche in explorer .
Aggiungo che il tema utilizza le widget nella sidebar , ma non so quanto questo possa essere legato al problema .
Vi allego una foto per farvi capire meglio :




se volete visualizzare il sito , ancora in costruzione , potete vederlo a questo indirizzo :

http://romagnanocalcio.altervista.org

Ho postato il problema in css perchè suppongo che il problema sia nel codice .
Lo style-sheet lo potete visualizzare a questo link
Qualcuno sa dirmi dove devo sbattere la testa ? non sono davvero riuscito a trovare una soluzione .

P:S: Sia dannato Explorer!!!

[Vinegar_tom]

UP

[Mich_]

Non e` fatta male la pagina, ma proprio per questo potrebbe bastare cambiare la DTD da XHTML Transtional a XHTML 1.0 Strict.
Poi potrebbe esserci qualche imperfezione nella marcatura, ma la correggi facilmenmte tramite i validatori.

In alternativa, devi verificare con i siti di hack di IE quali proprieta` danno fastidio a tale browser (ad esempio il raddoppio dei margini, o i padding) e "correggere" per mezzo di commenti condizionali.



Nota: la "citta`" di Romagnano non e` capoluogo di provincia e neppure e` un comune italiano. Non e` quindi possibile sapere di dove e` la squadra. Dovresti quindi scrivere (eventualmente in piccolo sotto "Romagnano Calcio" o in fondo alla pagina) il comune.

[Vinegar_tom]

Grazie per il suggerimento , ho provato, ma purtroppo anche cambiando il tipo di dtd non risolve il problema.
Provo a cercare qualche hack , magari uso lo star hack e do un margine minore o un margine negativo superiore ...

Per quanto riguarda il tuo consiglio . Hai ragione devo inserie un riferimento geografico ( che comunque nei contatti è già presente ) sto aspettando di avere gli sponsor da inserire nel footer , lasciato enorme apposta per quello , dopodichè aggiungerò sul fondo le informazioni di questo tipo, il sito è del resto ancora in costruzione .

Cosa ne pensi del sito in generale ? Le opinioni e le critiche costruttive fanno sempre piacere !

grazie della tua risposta.

[Mich_]

Il sito mi pare pulito e fatto bene.
Chiaramente non e` un "sito ad alto impatto" (non vuole esserlo e non avrebbe senso che lo fosse).
E` un sito di informazione per un pubblico selezionato (atleti e fan della squadra).

Poi per un giudizio completo occorrerebbe che ci fosse del contenuto vero ...
Per quanto riguarda l'estetica la trovo pulita e chiara.

Sul codice: ci sono alcune cose che andrebbero sistemate: ad esempio
align="center"
e` una direttiva che non deve stare nell'HTML, ma nel CSS (pena il possibile conflitto tra CSS e HTML che browser diversi risolvono in modo diverso).
Per quello dicevo di passare a Strict e validare

[Vinegar_tom]

Ho in parte risolto con lo star hack e l' utilizzo della proprietà display con valore inline-block . Il problema non è risolto del tutto perchè succede quello che si vede qua





In pratica alcuni elementi prendono tutta la propria riga e altri , non so secondo quale criterio , si bloccano a metà come se andassero a capo . Ho l' impressione che siano come degli oggetti inline mandati a capo . Questo potrebbe essere determinato dal valore inline-block , ma tutti gli altri valori del display non danno nemmeno un risultato parziale come questo .

Gestendo i margini invece non ottengo il risultato voluto dato che vengono spostati anche quegli elementi che originariamente erano già posizionati correttamente . E' l' eterogeneità di comportamento di elementi che dovrebbero essere tutti dello stesso tipo ( ovvero tutti ul.li ) a lasciarmi perplesso .

Copio il codice css relativo alla sidebar comprensivo degli ultimi hack che ho provato a scrivere:






/*;;;;;;;;:::::::::SIDEBAR::::::::::::::::::::*/


#sidebar{width:230px;float:right;margin:0px;paddin g:0;}
.rsidebar{width:210px;color:#666;margin:0 auto;padding:0 5px;}
.rsidebar h2{font-size:14px ;color: #890000; border-bottom:dashed 1px #000000 ;margin:0 2px 3px;padding:3px 0;}
.rsidebar ul{list-style-type:none;margin:0;padding:0;}
.rsidebar ul li{list-style-type:none;margin: 0 0 10px 0;padding:0 0 0 0 ;}

/* IE hacks per la barra laterale */

*html .rsidebar ul li{display: block;list-style-type:none;margin: 0 0 0px 0;padding:0 0 0 0 ;}
*:first-child+html .rsidebar ul li a , a:visited{
display: inline-block;
color: #000000;
text-decoration: none;
margin: 0px ;
padding: 3px 0px 3px 0px;
border-bottom: 1px dashed #C0C0C0 ;
}
*:first-child+html .rsidebar ul li a:hover {
font-weight: bold;
background: #e5ffbb;
color: #000000;
}
*html .rsidebar ul li a , a:visited{
display: inline-block; /* valore ibrido */
color: #000000;
text-decoration: none;
margin: 0px ;
padding: 3px 0px 3px 0px;
border-bottom: 1px dashed #C0C0C0 ;
}
*html .rsidebar ul li a:hover {
font-weight: bold;
background: #e5ffbb;
color: #000000;
}
.rsidebar ul li a , a:visited{
display: block;
color: #000000;
text-decoration: none;
margin: 0px ;
padding: 3px 0px 3px 0px;
border-bottom: 1px dashed #C0C0C0 ;
}
.rsidebar ul li a:hover {
font-weight: bold;
background: #e5ffbb;
color: #000000;
}
.rsidebar ul li ul{list-style-type:square;margin:0;padding: 0px;}
.rsidebar ul li ul li{list-style-type:none;font-color:#000000; background:transparent no-repeat 0 4px;border:0;margin:0;padding:0 5px 0px 5px;}

[Mich_]

questo non ha molto senso:

*html .rsidebar ul li a , a:visited{

formatti il tag a che sta dentro tutta quella serie di blocchi in un modo e TUTTI gli a:visited (compresi quelli fuori da quei blocchi.

Probabilmente intendevi scrivere questo:

*html .rsidebar ul li a , *html .rsidebar ul li a:visited{

(la cosa e` ripetuta piu` volte)

Per quanto riguarda il tuo problema, ho l'impressione che hai dimenticato qualche width: 100%: ma non avendo il codice HTML ed essendo il tuo CSS non correttamente formattato mi risulta impossibile capire esattamante cosa non va.
Per quanto riguarda gli hack per IE, stai attento che sono un'arma a doppio taglio: ti conviene usare invece i commenti condizionali.


PS: quando inserisci codice, usa gli appositi tag: [ code ] oppure [ php ] (senza gli spazi) eventualmente servendoti dei rispettivi bottoni # e php che trovi sopra il form di inserimento testo.

[Vinegar_tom]

GRAZIE MILLE !!

Ho risolto ! il problema era quello . Purtoppo essendo ancora un po' alle prime armi con i CSS avevo proprio sbagliato la sintassi .
Mi è bastato aggiungere il valore width al 100% e tutto ora è a posto.

Scusa per il codice ma non sapevo ci fosse il tag [code] altrimenti l' avrei usato !

In ogni caso tutto questo mi ha fatto capire ancora meglio quanto firefox sia uno dei migliori browser esistenti ... riesce addirittura a capire e correggere i miei errori !

ti ringrazio per il tuo utile aiuto ! Alla prossima !