Problema con interpretazione CSS

**guinness86** · 19-01-2011, 11:34

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:

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!!

**Mich_** · 19-01-2011, 13:24

Potrebbe essere un problema di DTD?

Posta il DOCTYPE che usi nella pagina

**guinness86** · 19-01-2011, 13:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**Mich_** · 19-01-2011, 13:36

E` tipico di questa DTD che alcuni browser interpretino diversamente (in particoare i brwoser di IE interpretano in modo retrocompatibile).

Se usi XHTML 1.0 Strict, dovrebbe succedere che tutti i browser si comportano uguale (come adesso vedi con FF); pero` non conosco Safari per questi dettagli (e ci sono pochi interventi nel forum al riguardo).

Poi potresti avere qualche altro problema, ma da quanto dici non e` facile capirlo. Dovresti postare il link e/o gli screenshot (o gli schemi grafici) di come dovrebbe diventare.

**guinness86** · 19-01-2011, 13:39

Il sito é:
http://www.giovaneitaliacireale.it
Vorrei che al passaggio del mouse sui vari pulsanti del menu il colore da blu divenisse rosso, e ciò già funziona su Safari e IExplorer.

Su Firefox e Chrome invece non si vede il rosso e rimane blu.

Vorrei che invece ci fosse il cambio di colore visibile da tutti i browser...

**ResianTaxidrive** · 19-01-2011, 13:49

LA SCRITTA background: #red;
non se se sia corretta; cmq non capisco perchè dovrebbe colorarsi di rosso, non c'è uno stile al riguardo.
manca di sicuro un #pagebar li a:hover{background:#f00} L'unico hover che si attiva attualmente non prevede la colorazione di rosso.

(nemmeno su IE8 funziona)

**Mich_** · 19-01-2011, 15:42

Mi par di vedere errori nella logica dell'HTML del menu.

Riscrivo (riformattando in maniera umana) il codice HTML:

codice:

<ul id="page-bar" class="left clearfloat">[*]Home
  <ul>
    <li class="page_item page-item-5">Chi Siamo
    <li class="page_item page-item-8">Dove Siamo
    <li class="page_item page-item-10">Foto &#038; Video
      <ul class='children'>
        <li class="page_item page-item-12">Foto
          <ul class='children'>
            <li class="page_item page-item-14">Video[/list]
        [/list]
    
    <li class="page_item page-item-16">Iniziative
    <li class="page_item page-item-20">Contatti[/list][/list]

In effetti ci sono errori di innestamento dei tag.
Probabilmente quello che intendevi e`:

codice:

<ul id="page-bar" class="left clearfloat">[*]Home
  <li class="page_item page-item-5">Chi Siamo
  <li class="page_item page-item-8">Dove Siamo
  <li class="page_item page-item-10">Foto &#038; Video
    <ul class='children'>
      <li class="page_item page-item-12">Foto
      <li class="page_item page-item-14">Video[/list]
  
  <li class="page_item page-item-16">Iniziative
  <li class="page_item page-item-20">Contatti[/list]

Poi occorrera` vedere se il CSS e` gia` in relazione con il nuovo codice HTML o se e` necessario modificarlo.

**guinness86** · 19-01-2011, 17:45

Questo è il codice dell'header della mia pagina, richiama le varie funzioni di wordpress:

codice:

<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">[*]Home
<ul><?php wp_list_pages('sort_column=menu_order&title_li=');     /* per escludere exclude=61& */ ?>[/list][/list]
</div>

**Mich_** · 19-01-2011, 18:12

Quello e` il sorgente del programma PHP (senza le routine richiamate).
Ma qui non ce ne facciamo niente.
In questo forum possiamo aiutarti a capire come inserire/modificare il CSS dato l'HTML.

Nel mio post facevo notare che l'HTML e` sbagliato, per cui non ha neppure senso sistemare il CSS (non si puo` sistemare il CSS su un HTML che non funziona).

Se non conosci il PHP o non sai come sistemare il tuo CMS, puoi provare a chiedere in altri forum (PHP o CMS a seconda dei casi).

Discussione: Problema con interpretazione CSS

Strumenti discussione

Ricerca discussione

Visualizza

Problema con interpretazione CSS

Permessi di invio