Printable View
:incazzat: Ciao amici, mi hanno fatto accorgere che il mio sito ha dei problemi di visualizzazione con Ie6 riguardo al menù laterale, dopo una correzione nel tag < Doctype> il problema persiste, alcuni mi hanno indicato che potrebbe essere un errore nei css. Cè un modo per poter testare sia i css che il sito stesso su divesi browser senza che li installi tutti nel pc? cè qualcuno che saprebbe dirmi la causa di questo difetto di funzionamento?
Eh... perchè hai messo un sondaggio?
è risaputo che ogni broswer legge la grafica della pagina un po diversa rispetto a quella di un altro broswer, ma potrebbe essere benissimo che nel tuo sito ci sia un errore che un broswer riesce a risolvere e un altro invece no, oppure usi qualche aributo, regola nei css che non funziona su ie6.
per non dover installare tutti i broswer esistono dei programmi che che ti fanno sapere se c'è qualcosa che un determinato broswer non riesce a visualizare correttamente.tra questi io ti consiglio dreamweaver che esegue il debug della pagina perfettamente.
spero di esserti stato utile
ciao
Per lavorare come gli altri, se tutti lavorano per IE per esempio, io che ci perdo a fare del tempo per farlo funzionare su opera se tutti i siti vengono fatti per IE fanno prima loro a cambiare il browser che io ad adattare il sito :wink: .
Esistono altri programmi oltre a Dreamweaver, vorrei evitarlo perchè sò che è pesante come programma, dato che non lo uso per programmare mi servirebbe solo come tester
Puoi appoggiarti a servizi come:Citazione:
Originalmente inviato da EmoArt
http://browsershots.org/
http://ipinfo.info/netrenderer/
inoltre, diversi browser hanno la rispettiva versione portable(ie6, chrome, opera, firefox, safari, avant...)
Per il sondaggio: essendo un webdeveloper, debbo far sì, che il sito o l'applicazione sia fruibile allo stesso modo, su più browser possibili.
:) allora: per il sondaggio voto i primi 2 poichè a loro pongo la maggiore attenzione (agli altri pongo sempre una grande attenzione, ma diciamo... minore per siti web di normale routine)
Io ho votato Firefox, ma con altri browser il mio sito viene visualizzato correttamente apparte Chrome(maledetto!!)
un sito oggi si vede al 95% uguale su Firefox, Opera, IE8 e Safari. L'unico motivo per cui si soffre è IE6 ed in parte IE7, per i quali puoi aggiungere commenti condizionali ed aggiustare il css.
Non c'è quindi alcun senso a scrivere siti per browser vecchi che col tempo andranno in disuso. Poi se scrivi un sito in modo corretto, evitando astrusi rigiri di tag e css per effetti che possono essere ottenuti più facilmente in modi standard, e questo necessiterà di pochissimi aggiustamenti :wink:
Quindi il vostro consiglio è di lasciarlo così com'è e di aspettare che gli utenti passino ad una versione più recente di IE6?Citazione:
Originalmente inviato da dreadnaut
Più che preoccuparmi della compatibilità con IE6, io mi preoccuperei (in prospettiva), della compatibilità con IE8, che a quanto pare, includerà un cambio radicale rispetto a IE7, e a quel che si dice, con il "rispetto degli standard WEB". Ovviamente, finchè è in fase beta, è inutile cercare una "presunta compatibilità". A quanto leggo (parlo per sentito dire), IE8 è così diverso, che include un'opzione "Visualizza pagina in modalità IE7", ma ripeto, parlo per sentito dire...
vedi, uno deve preoccuparsi della "compatibilità con IE8" solo se fino ad ora si è preoccupato della compatibilità con IE6. Se il tuo sito invece segue gli standard, ed ha un foglio alternativo solo per IE6/7, non deve neanche provarlo su IE8, perché questo sta venendo sviluppato per seguire correttamente gli stessi standard implementati in Firefox/Opera/Safari.
Il mio consiglio: scrivi per Firefox, correggi per Opera, chiedi a qualcuno se su Safari si comporta stranamente, ma non te ne preoccupar troppo. A questo punto, senza più modificare il css originale, aggiungi commenti condizionali per IE6 e IE7, che caricano due fogli che "aggiustano" il layout per i due browser - che puoi usare in locale installando qualcosa di simile a Multiple IE.
IE8 al momento è in beta (e lo usano in pochi assai), ma la direzione sembra decisa. Non vale secondo me la pena di sbattersi oltremodo, perché si finirebbe per adattare il proprio sito a bug presenti in esso, ancora da correggere e che verranno corretti --e quindi bisognerebbe modificare nuovamente il sito.
Citazione:
Originalmente inviato da EmoArt
Se per errore di visualizzazione intendi lo spazio che IExplorer 6.0 lascia tra elementi del tuo menù, puoi risolvere in questo modo:
Quando scrivi il codice HTML, ovunque c'è </li> e <li> non dovresti lasciare alcun spazio vuoto fra i due tag perché IE a volte interpreta lo spazio come se fosse un nuovo paragrafo o un <br />...
Quindi al posto di </li> . . . <li>, scrivi </li><li> tutto attaccato; questo è un accorgimento importante per poter domare quel particolare browser.
Ho votato Firefox, anche se poi controllo se un sito viene visualizzato correttamente su tutti gli altri browser.
no, intendo che normalmente dovrebbe apparire un menù con un effetto grafico dovuto al css, invece con IE6 appaiono solo dei link in elenco puntato :???:Citazione:
Originalmente inviato da dialogocosmico
Per rispondere a Dreadnaut ho già capito che in altri browser ci sono delle differenze, come posso fare per sapere quale codice non mi viene accettato in uno o nell'altro browser?
cerchi? :mrgreen:
esiste un elenco completo di tutti i bug di IE6, ma il più importante è certamente il box model bug, cioè "mai assegnare ad un elemento width e padding allo stesso tempo. Il resto si corregge o evita con piccoli accorgimenti. Cose come le dimensioni dei font, le png trasparenti, la gestione dei colori (anche IE7) etc...
In generale, quando leggi in giro spiegazioni di tecniche css ben fatte (i.e. non su html.it), ci saranno sempre i caveat per IE6 e spesso modi per aggirare il problema. Se implicano sbattersi troppo, puoi sempre mostrare una versione più semplice del sito per chi usa il suddetto problematico browser.
Io voto per più browser possibili anche perché dovete sapere che oltre a IE, FF, Opera e Safari, c'è anche quello (almeno per me buono) rilasciato da Google, che però in queste cose è anche più pignolo degli altri...
Posso fare una domanda?
Di che mi dà inserire in ogni pagina il <!DOCTYPE>?
Io inizio la pagina con
e non ho avuto mai problemi...Codice HTML:<html>
<head>
...
Fatemi sapere,
foreach
mi raccomando fate tutti quanti il minuto di silenzio per l'olocausto...
Opera, anche se si vede più o meno bene con tutti (tranne IE6 :E).
Se hai scelto il "4.01 Transitional", dovresti scrivere sempre:Citazione:
Originalmente inviato da foreach
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Altrimenti la visualizzazione cambia su alcuni browser, a volte anche drasticamente perché entra in azione modalità Quirk (BackCompat)...
A volte si è costretti a usare doctype errato appositamente (ad esempio questo):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/www.w3.org/TR/html4/loose.dtd">
oppure: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Perché non si riesce a far funzionare alcuni script complessi nella modalità Standard (con doctype corretto), ma è piuttosto raro.
Io il doctype non l'ho mai usato e ripeto, non ho mai avuto problemi con gli script, perché la maggior parte degli script è fatta con php. Javascript lo uso solo in casi eccezionali, quando durante la visualizzazione della pagina deve cambiare qualcosa... ma non sono super funzioni, per esempio un <img onclick="this.src='imm.png'"> ma non credo che senza doctype dia problemi, no?Citazione:
Originalmente inviato da dialogocosmico
Poi, nel mio sito prima avevo molte cose fatte con javascript che ora le sto sostituendo con php (solo quelle che si possono fare) che sono il oltre il 95%, poi certe cose le faccio con swf, che non dà problemi, almeno che tu non hai installato la plugin di adobe.
In conclusione, uso il doctype solo nella pagine in cui javascript mi frega, niente di più... hai capito? Non so se mi sono spiegato bene...
Fatemi sapere,
foreach
per chi non vuole rimanere nell'ignoranza, ci sono diversi articoli su come e perche' usare un doctype. Ad esempio su A List Apart (anche in italiano), o direttamente mozilla.org, per chi e' interessato ai dettagli.
Il discorso sta comunque divagando troppo nell OT qua, occhio.
rieccomi quì, ho fatto le dovute ricerche che mi avete consigliato (era meglio che non le facevo mi sono confuso di più).
Analizzando un discorso alla volta, per quel che riguarda il menù laterale della mia homepag, a quanto pare funziona solo su IE7 :cry: , il problema che ho riscontrato facendo uso dei vari link per testare il sito su diversi browser è che tra un link e l'altro appare uno spazio che non dovrebbe esserci, infatti i pulsanti dovrebbero essere tutti uniti tra loro verticalmente (alcuni mi hanno fatto vedere che su IE6 non appare completamente l'effetto css, ma io non l'ho riscontrato nei vari tester :?: ).
Riferendomi a Dreadnaut, scusami, ho visto i siti che hai consigliato, quello riferente al mio problema è in inglese e non sono riuscito a capire cosa rorreggere nel mio codice, dato che sono scarso d'inglese, per quanto riguarda i Doctype, quali tra questi dovrei usare? non sò che tipo di sito stò facendo, se è html4.01 o xhtml ecc.:
mentre questo è il codice css che dà i problemi, mi potreste aiutare a capire dove correggere?Citazione:
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Codice:/*gestione menù*/
div{
width: 10em;
font: 83% Arial, Helvetica, sans-serif;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
a:link, a:visited{
display: block;
background: #FFE6BF;
color:#993333;
margin:0.06em 0;
padding: 0.3em 0.6em;
text-decoration: none;
border: 1px solid #ffffff;
}
a:hover, a:focus, a:active{
background:#ffffff;
}
/*fine gestione menù*/
Doctype: hai copiato un sacco di righe di codice, ma le hai lette? da una parte devi scegliere fra Transitional, Strict o Frameset, dall'altra fra HTML, XHTML1.0 e XHTML1.1. Se pensi a come hai scritto il sito, la scelta del doctype dovrebbe venirti naturale...
In che formato hai scritto il sito? perfettamente standard? allora Strict. Così così? Transitional. E' un contenitore di Frame? Frameset. Quale versione del linguaggio hai seguito? scegli il doctype corrispondente. Non ne hai idea? fattela leggendo in giro :mrgreen:
Css: a me sembra corretto, e su Firefox lo vedo a posto. Prova ad eliminare gli spazi vuoti fra gli <li>...</li> che compongono i menu, che a volte disturbano IE.
ho provato ad eliminare degli spazi nel menù in html, dopo <li>.. e si è spasciato tutto:shock:
non sò che dire....:crycry:, riproverò a fare tutto il codice del menù e del cssCodice HTML:<div>
<img src="images/menu.jpg" width="60" height="30">
<ul>
<li>
<a href="index.php?pagina=homepag" font=">Home</a>
</li>
<li>
<a href="index.php?pagina=gallery">Foto</a>
</li>
<li>
<a href="index.php?pagina=form-mail">Contattami</a>
</li>
<li>
<a href="guestbook.htm" target="_blank">Guestbook</a>
</li>
<li>
<a href="index.php?pagina=mappa">Mappa del sito</a>
</li>
<script type="text/javascript">
//<![CDATA[
var l='it';
document.write('<s'+'cript type="text/javascript" src="http://'+l+'.altervista.org/members_inc/cat.av?'+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>
<img src="images/articoli.jpg" width="60" height="30"><br>
<li>
<a href="index.php?pagina=cultosanti">Il culto dei santi </a>
</li>
<li>
<a href="index.php?pagina=poesia">Poesia dei cuchi</a>
</li>
<li>
<a href="index.php?pagina=colorazione">La colorazione</a>
</li>
<li>
<a href="index.php?pagina=storia">Storia dei fischietti</a>
</li>
<li>
<a href="index.php?pagina=simbologie">Simbologie</a>
</li>
<li>
<a href="index.php?pagina=leggende">Leggende e magie</a>
</li>
<li>
<a href="index.php?pagina=gallo">Il fischio del gallo</a>
</li>
<li>
<a href="index.php?pagina=gualtiero">Gualtiero da Caltagirone</a>
</li>
<li>
<a href="index.php?pagina=presepi">Presepi</a>
</li>
<li>
<a href="index.php?pagina=fischietto religioso">Fischietto religioso</a>
</li>
<li>
<a href="index.php?pagina=madonnamiracoli">Madonna dei Miracoli</a>
</li>
<img src="images/linkpartners.jpg" width="80" height="70">
<p >
Se vuoi scambiare i link
contattami
</p>
</div>
Non hai eliminato gli spazi, ci sono ancora i ritorni a capo. Quello che vuoi ottenere e' </li><li> attaccati. In compenso nel tag del link Home c'e' un font=" aperto e mai chiuso.
Forse ti conviene usare un editor che mostri la colorazione della sintassi? ( Notepad2, Vim, mille altri discussi in precedenza sul forum? )
Gli editor con colorazione della sintassi sono esageratamente utili e risparmiano tempo.
Quanto al sondaggio: io cerco di testare le mie pagine su più browser possibili perchè qualciasi utente non visualizzi correttamente le mie pagine può essere un visitatore perso.
Solitamente quando scrivo il codice controllo che la visualizzazione sia corretta su Firefox (che rispetta gli standard) e IE6 (che non li rispetta molto). Se la visualizzazione è corretta su questi 2 noto che è praticamente corretta su tutti i browser
hai questa parte:Citazione:
Originalmente inviato da EmoArt
scritta male, font="" è aperto ma non chiuso :wink:Codice HTML:<a href="index.php?pagina=homepag" font=">Home</a>
mi sà che ho anche staccato il riferimento al css ma ora non riesco più a farlo funzionare, non dovrebbe essere così?
ho portato tutto accapo per togliere gli spazi, spero che intendevi in questo modo...Dread..
css:Codice HTML:<div id="menu">
<img src="http://forum.it.altervista.org/images/menu.jpg" width="60" height="30">
<ul>
<li><a href="index.php?pagina=homepag">Home</a></li>
<li><a href="index.php?pagina=gallery">Foto</a></li>
<li><a href="index.php?pagina=form-mail">Contattami</a></li>
<li><a href="guestbook.htm" target="_blank">Guestbook</a></li>
<li><a href="index.php?pagina=mappa">Mappa del sito</a></li>
</div>
Codice:body{
background-color:#ffd57d;
}
h4{
color: #0033cc;
}
p{
color: #00248f; font:12px Verdana, arial;
}
/*gestione menù*/
#menu{
width: 10em;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a.menu:link, a.menu:visited{
display: block;
background: #FFE6BF;
color:#993333;
margin:0.06em 0;
padding: 0.3em 0.6em;
text-decoration: none;
border: 1px solid #ffffff;
font: 83% Arial, Helvetica, sans-serif;
}
a.menu:hover, a.menu:focus, a.menu:active{
background:#ffffff;
}
/*fine gestione menù*/
il tag <ul> dove lo chiudi?
Stai più attento e rileggiti il sorgente :wink:
ho corretto <ul> ma il problema esiste ancora..posto il codice del menù per intero
Codice HTML:<div id="menu" >
<img src="images/menu.jpg" width="60" height="30">
<ul>
<li><a href="index.php?pagina=homepag">Home</a></li>
<li><a href="index.php?pagina=gallery">Foto</a></li>
<li><a href="index.php?pagina=form-mail">Contattami</a></li>
<li><a href="guestbook.htm" target="_blank">Guestbook</a></li>
<li><a href="index.php?pagina=mappa">Mappa del sito</a></li>
<script type="text/javascript">
//<![CDATA[
var l='it';
document.write('<s'+'cript type="text/javascript" src="http://'+l+'.altervista.org/members_inc/cat.av?'+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>
<img src="images/articoli.jpg" width="60" height="30"><br>
<li>
<a href="index.php?pagina=cultosanti">Il culto dei santi </a>
</li>
<li>
<a href="index.php?pagina=poesia">Poesia dei cuchi</a>
</li>
<li>
<a href="index.php?pagina=colorazione">La colorazione</a>
</li>
<li>
<a href="index.php?pagina=storia">Storia dei fischietti</a>
</li>
<li>
<a href="index.php?pagina=simbologie">Simbologie</a>
</li>
<li>
<a href="index.php?pagina=leggende">Leggende e magie</a>
</li>
<li>
<a href="index.php?pagina=gallo">Il fischio del gallo</a>
</li>
<li>
<a href="index.php?pagina=gualtiero">Gualtiero da Caltagirone</a>
</li>
<li>
<a href="index.php?pagina=presepi">Presepi</a>
</li>
<li>
<a href="index.php?pagina=fischietto religioso">Fischietto religioso</a>
</li>
<li>
<a href="index.php?pagina=madonnamiracoli">Madonna dei Miracoli</a>
</li>
</ul>
<img src="images/linkpartners.jpg" width="80" height="70">
<p >
Se vuoi scambiare i link
contattami
</p>
</div>
prova a togliere gli spazi fra gli <li>, come ho scritto mille post sopra:Codice HTML:...
</li><li>
<a href="index.php?pagina=fischietto religioso">Fischietto religioso</a>
</li><li>
<a href="index.php?pagina=madonnamiracoli">Madonna dei Miracoli</a>
</li><li>
...
ho ripreso tutto il codice daccapo, adesso funziona! :lol: questo è il css:
e questo è il menù:Codice:body{
background-color:#ffd57d;
}
h4{
color: #0033cc;
}
p{
color: #00248f; font:12px Verdana, arial;
}
/*gestione menù*/
#menu{
width: 10em;
font: 80% Arial, Helvetica, sans-serif;
}
#menu ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu a:link, #menu a:visited{
display: block;
background: #FFE6BF;
color: #993333;
margin:0.06em 0;
padding: 0.3em 0.6em;
text-decoration: none;
border: 1px solid #666;
}
#menu a:hover, #menu a:focus, #menu a:active{
background: #FFF;
color: #993333;
border-color: #41545F;
padding-left: 0.95em;
text-transform: uppercase
}
/*fine gestione menù*/
#menu02{
width: 10em;
}
#menu02 ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu02 a.menu:link, #menu02 a.menu:visited{
display: block;
background: #FFE6BF;
color:#993333;
margin:0.06em 0;
padding: 0.3em 0.6em;
text-decoration: none;
border: 1px solid #ffffff;
font: 83% Arial, Helvetica, sans-serif;
}
#menu02 a.menu:hover,#menu02 a.menu:focus,#menu02 a.menu:active{
background:#ffffff;
}
spero che non ci siano errori, comunque che funziona è già una cosa, e l'ho provato pure su altri browser! tutto ok finalmente:ciucchi:Codice HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div id="menu">
<img src="images/menu.jpg" width="60" height="30">
<ul>
<li><a href="index.php?pagina=homepag">Home</a></li>
<li><a href="index.php?pagina=gallery">Foto</a></li>
<li><a href="index.php?pagina=form-mail">Contattami</a></li>
<li><a href="guestbook.htm" target="_blank">Guestbook</a></li>
<li><a href="index.php?pagina=mappa">Mappa del sito</a></li>
<br>
<script type="text/javascript">
//<![CDATA[
var l='it';
document.write('<s'+'cript type="text/javascript" src="http://'+l+'.altervista.org/members_inc/cat.av?'+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script><br>
<img src="images/articoli.jpg" width="60" height="30"><br>
<li><a href="index.php?pagina=cultosanti">Il culto dei santi </a></li>
<li><a href="index.php?pagina=poesia">Poesia dei cuchi</a></li>
<li><a href="index.php?pagina=colorazione">La colorazione</a></li>
<li><a href="index.php?pagina=storia">Storia dei fischietti</a></li>
<li><a href="index.php?pagina=simbologie">Simbologie</a></li>
<li><a href="index.php?pagina=leggende">Leggende e magie</a></li>
<li><a href="index.php?pagina=gallo">Il fischio del gallo</a></li>
<li><a href="index.php?pagina=gualtiero">Gualtiero da Caltagirone</a></li>
<li><a href="index.php?pagina=presepi">Presepi</a></li>
<li><a href="index.php?pagina=fischietto religioso">Fischietto religioso</a></li>
<li><a href="index.php?pagina=madonnamiracoli">Madonna dei Miracoli</a></li>
</ul>
</div>
<img src="images/linkpartners.jpg" width="80" height="70">
<p >
Se vuoi scambiare i link
contattami
</p>
</div>