wordpress - differenza visualizzazione firefox e IE

**88prototipo** · 02-11-2010, 17:30

ciao a tutti,
praticamente il mio sito in firma, su firefox si vede come voglio io, mentre in IE 6 no, l'imagine della testata non si carica e rimane bianca, la barra dei menu è decisamente alta rispetto a quanto la voglio io e il pulsante cerca della ricerca viene visualizzato in bianco anzichè blu e senza scritta sopra... come posso risolvere queto problema??
Penso sia dovuto a qualche cavolata nel .css ... ma non ne capisco molto

Vi ringrazio

**Mich_** · 02-11-2010, 18:02

Dovresti anzitutto provare a mettere un DOCTYPE corretto (non quella cosa che hai messo nella pagina).
Per far funzionare anche IE come gli altri (quasi), ti consiglio XHTML 1.0 Strict (senza prologo XML).

Vedi ad esempio questo manuale: DOCTYPE

Poi potresti avere ancora differenze, che puoi "curare" con i "commenti condizionali" (un riferimento tra i "link utili", altri mediante ricerca nel forum o in rete)

**88prototipo** · 03-11-2010, 00:31

grazie mille per i consigli, ora l'immagine si vede pechè ho inserito :

codice:

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

però la barra dei menù è troppo grossa, praticamente mi manda a capo il cerca e quindi me la fa su due linee...
mi resta ancora il problema che il pulsante cerca è bianco e non c'è scritto niente... come posso risolverlo?

Ho fatto dei test con i validatori html e css , ma ho un sacco di errori e sinceramente non so dove mettere le mani

**88prototipo** · 03-11-2010, 00:42

il problema della ricerca che va sulla 2 linea penso che sia qua dentro

codice:

<div id="access" role="navigation">
			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text">"><?php _e( 'Skip to content', 'thirdstyle' ); ?></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> 

<div id="pao_search"><?php get_search_form(); ?></div>

			</div>

**88prototipo** · 03-11-2010, 01:18

penso che il fatto che il pulsante rimanga bianco sia dovuto al fatto che IE 6 non supporta la trasparenza delle png! devo fixare il problema...

**88prototipo** · 03-11-2010, 01:33

anche la barra dei menu in ff è trasparente, in ie6 no, ciò vuol dire che non supporta la traparenza

e nel mio file style.css leggo un bel shadow:

codice:

div#pao_search{float:right;margin-right:18px;}
input[type=submit]{color:#eee;font-family:sans-serif;text-shadow: 0px 1px 1px #000;}
input[type=submit]{font-size:13px;padding:5px 12px;cursor:pointer;}
input[type=submit]{background:url(images/input_bg.png);font-weight:bold;}
input[type=submit]:hover{background-position:0px -50px;}
input[type=submit]:active{background-position:0px -100px;text-shadow: 0px 0px 1px #000;}
input[type="submit"]::-moz-focus-inner{border: none;}
input[type=submit]{margin-left:10px;}
input[type=submit]{border:1px solid #3f2f83;outline:none;}
input[type=submit]{-moz-border-radius: 4px;}
input[type=submit]{-webkit-border-radius: 4px;}
input[type=submit]{border-radius: 4px;}
input#submit{color:#eee;}
input#searchsubmit{color:#eee;font-size:13px;}
input#s{font-size:13px;padding:5px 5px;padding-left:30px;}
input#s{background:url(images/search.png) no-repeat 8px center #fff;}
input#s{-moz-border-radius: 4px;}
input#s{-webkit-border-radius: 4px;}
input#s{
    border:0px;
    border-radius: 4px;
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);
}

come lo sistemo?

**Mich_** · 03-11-2010, 09:43

Il problema trasparenza delle png e` vecchio, e risolvibile con un filtro (non ricordo la sintassi: ma se fai una ricerca nel forum con le chiavi trasparenza png IE6 trovi centinaia di thread sull'argomento)

Per quanto riguarda la sintassi ed i validatori, XHTML ha introdotto una sintassi molto piu` rigida, paragonabile a quella di quasi tutti i linguaggi di programmazione: se la segui hai la quasi-certezza che la tua pagina sia visbilie allo stesso modo anche nei browser futuri (che si prevede saranno molto piu` strict di quelli attuali). Le differenze maggiori sono nella mancanza di tutti gli attributi di formattazione (che vanno invece inseriti nel CSS): comunque ci sono ottime guide: A) il tutorial XHTML di HTML.it; B) per la sintassi i reference che trovi in rete, ad esempio http://www.w3schools.com/tags/default.asp

Per quanto riguara le dimensioni dei caratteri, queste sono molto varie: cambiano anche da computer a computer nello stesso browser. Il trucco e` lasciare un po' di spazio in piu`, ed usare misure in em per i blocchi che contengono il menu.

Poi avrai altri problemi minori, che forse non conviene correggere: se il contenuto si vede tutto, le ombre e gli arrotondamenti sono finezze che chi usa browser obsoleti puo` anche perdersi: e` la cosiddetta "graceful degradation" (oppure "progressive enhancement"): trovi info mediante ricerca in rete e tra gli articoli di HTML.it.

**88prototipo** · 03-11-2010, 12:28

i codici di validazione per ora li lascio perdere, mi interessa far vedere il pulsante cerca... anche mettendo una gif al posto della png non vedo nulla, quindi può non dipendere dal solo fatto che è una png...
Usando firebug, ho notato che c'è un transparent prima dell'url dell'immagine, può centrare qualcosa?

codice:

input[type="submit"] {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/input_bg.png) repeat scroll 0 0;
font-weight:bold;
}

**88prototipo** · 03-11-2010, 22:50

up

**Mich_** · 04-11-2010, 09:31

Il transparent non c'entra. Non e` strettamente necessario ma chiarisce che i pezzi trasparenti dell'immagine di sfondo devono lasciar vedere quello che sta sotto al blocco.

Il pezzo che hai postato fa riferimento ad una immagine png: ho gia` scritto che IE6 non interpreta direttamente queste immagini, ed ha bisogno di un filtro.

Pero` IE non interpreta neppure il selettore
input[type="submit"]
che devi quindi cambiare con una classe (oppure id, se preferisci).

Discussione: wordpress - differenza visualizzazione firefox e IE

Strumenti discussione

Ricerca discussione

Visualizza

wordpress - differenza visualizzazione firefox e IE

Permessi di invio