Salve a tutti, ho un problema abbastanza antipatico di interpretazione dei CSS da parte dei vari browser.
Mi spiego meglio:
Ho una navbar di Wordpress con il tema Arthemia.
L'ho personalizzata per cambiarne colori e conformazione.
L'unico problema è che su Safari (su mac) funziona bene, mentre su Firefox (Mac e Win) e su Chrome (Mac e Win) non funziona,non si vedono i colori.
Vi mostro gli screenshot e il codice:
Uploaded with ImageShack.us
Uploaded with ImageShack.us
é un menu a drop down che al passaggio del mouse sul pulsante diventa rosso.
Questo sistema su Safarei e IExplorer funziona regolarmente, su gli altri browser no.
Vi allego il codice CSS:
Secondo voi quale potrebbe essere il problema?
Cosa modificare?!
Grazie in anticipo!!
Mi spiego meglio:
Ho una navbar di Wordpress con il tema Arthemia.
L'ho personalizzata per cambiarne colori e conformazione.
L'unico problema è che su Safari (su mac) funziona bene, mentre su Firefox (Mac e Win) e su Chrome (Mac e Win) non funziona,non si vedono i colori.
Vi mostro gli screenshot e il codice:
Uploaded with ImageShack.us
Uploaded with ImageShack.us
é un menu a drop down che al passaggio del mouse sul pulsante diventa rosso.
Questo sistema su Safarei e IExplorer funziona regolarmente, su gli altri browser no.
Vi allego il codice CSS:
Codice:
/* Navigation Bar*/
#navbar {
margin:0 auto;
margin-top:0px;
margin-bottom:2px;
padding:0px 180px;
font-family: Verdana;
text-transform:uppercase;
background:#20398c url(images/navbar.png);
}
#page-bar {
width:722px;
}
#page-bar ul {
list-style: none;
}
#page-bar li {
float:left;
list-style:none;
cursor: pointer;
display:block;
}
#page-bar li:hover {
background:#red;
}
#page-bar a, #page-bar a:visited {
margin: 0px;
padding:10px 16px;
font-weight:bold;
color:#FFF;
display:block;
}
#page-bar a:hover {
text-decoration:none;
display:block;
}
#searchform {
width:194px;
text-align:right;
padding-top:0px;
margin-right:0px;
margin-left: 63px;
margin-bottom: 10px;
}
/* Dropdown Menus */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}
#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:capitalized;
}
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
background: #20398c;
filter: alpha(opacity=85);
opacity: 0.85;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 0px solid transparent;
}
#page-bar li li a:hover, #page-bar li li a:active {
background: #red;
padding: 5px 10px 5px 18px;
}
#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}
#page-bar li:hover ul {
left: auto;
display: block;
}
#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}Secondo voi quale potrebbe essere il problema?
Cosa modificare?!
Grazie in anticipo!!