[HTML/CSS] Differenti risultati in browser diversi

cenarius_88 · 21-02-2012, 17:12

Salve, sto costruendo un sito semplice per un gruppo di amici.
La base c'è (grazie a consigli già avuti qui).

Ovviamente sto testando con vari browser la visualizzazione:
con firefox e google chrome non ho avuto particolari problemi...
saranno intelligenti loro, boh

con internet explorer si, posto un immagine per capire

Ho oscurato alcune parti, per motivi personali...

Dunque:
1) In alto, sull header va il logo, ancora da settare bene margine ecc ecc... il logo ha un riferimento alla pagina Home stessa, quindi è come dire un LINK... su internet explorer si vede quel quadrato "blu" di contorno. Come lo tolgo?

ho provato a fare una cosa del genere (vista in altri esempi):
assegno al tag <a> la classe nodecor

Codice:

<a class="nodecor" href="home.shtml"><img src="Immagini/logo.png" alt="Logo" title="HomePage" style="margin-left:70px"/></a>

e definisco la classe così sul file CSS

Codice:

a.nodecor
{
    padding: 0px;
    border-style: none;
} 
a.nodecor:hover
{ 
    padding: 0px;
    border-style: none;
}

ma il risultato non cambia :/

2) Tra l'header e il corpo c'è una fessura bianca... voluta si, ma su chrome ha un ampiezza molto fine, li è esagerata...

facendola giocando sul padding dell header non ero riuscito a sistemarla, allora ho sostituito la cosa, azzerando il padding bottom sull'header e aggiungendo un <div> </div> con immagine di background una immagine 20x2 px bianca che si estende lateralmente
In pratica così

Codice:

div#headspacer
{
    clear:both;
    background: #FFF url(../Immagini/spacer.png) repeat-x;
    height:1px;
}

Consigli?

Gimli[2BV!2B] · 21-02-2012, 20:40

Internet Explorer... quale? Se è il 6, mi dispiace molto, se è più recente hai provato a spiegargli che non deve fare il brillante cercando di visualizzarlo nel miglior modo peggiore?

Codice:

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=8;IE=9">
<title>Titolo_olotiT</title>
</head>
<body>


</body>
</html>

Se devi inserirlo specifica nella lista solo le versioni che puoi testare.

cenarius_88 · 21-02-2012, 21:07

Internet Explorer 9

non ho messo queste 2 stringhe nell'head

Codice:

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=8;IE=9">

Perchè non le ho mai trovato in nessun tutorial... non so cosa significhino e metterle così a caso non è nel mio interesse...

Saresti gentile da spiegarmi cosa significano?

Gimli[2BV!2B] · 21-02-2012, 21:11

msdn: HTTP-EQUIV Attribute | httpEquiv Property

cenarius_88 · 21-02-2012, 21:16

Leggendo il link da te proposto ho più o meno capito cosa vuol dire...

Non mi è chiaro se questa intestazione modifica la visualizzazione dell'intero documento, o solo della sezione in cui è posto?

Gimli[2BV!2B] · 21-02-2012, 21:27

Facendo parte dell'header agisce sull'intera pagina/documento in cui è inserito.

Se puoi testare solo la nove e dovesse funzionare bene potresti comunque specificare le versioni precedenti; però è sempre preferibile testare direttamente che sia visualizzato come si desidera in tutte le versioni dei browser che si desidera supportare.
Esempio: browsershots

cenarius_88 · 22-02-2012, 02:18

Facendo come mi hai consigliato, non ho ottenuto alcun miglioramento, diciamo solo 2 righe in più di html (non che voglia mettere in discussione l'utilità o le tue conoscenze).

Momentaneamente ho tolto queste due righe, e girovagando in rete ho trovato un esempio in cui c'era un immagine / link, ho aperto con internet explorer, ho visto che non accadeva cosa succede a me.. per cui ho aperto il codice sorgente e sono andato alla ricerca della soluzione utilizzata... e ho trovato la soluzione (anche per me funzionante)

Quote:

border-width: 0; annulla i bordi dell'immagine...

E' una soluzione banale funzionante... è correttamente HTML/CSS_osa?

espanico · 23-02-2012, 11:03

Oppure puoi inserire nei css

Codice:

a img {border:0;}

In questo modo risolvi il problema per qualsiasi immagine del tuo sito

21-02-2012, 17:12	#1
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	[HTML/CSS] Differenti risultati in browser diversi Salve, sto costruendo un sito semplice per un gruppo di amici. La base c'è (grazie a consigli già avuti qui). Ovviamente sto testando con vari browser la visualizzazione: con firefox e google chrome non ho avuto particolari problemi... saranno intelligenti loro, boh con internet explorer si, posto un immagine per capire Ho oscurato alcune parti, per motivi personali... Dunque: 1) In alto, sull header va il logo, ancora da settare bene margine ecc ecc... il logo ha un riferimento alla pagina Home stessa, quindi è come dire un LINK... su internet explorer si vede quel quadrato "blu" di contorno. Come lo tolgo? ho provato a fare una cosa del genere (vista in altri esempi): assegno al tag <a> la classe nodecor Codice: <a class="nodecor" href="home.shtml"><img src="Immagini/logo.png" alt="Logo" title="HomePage" style="margin-left:70px"/></a> e definisco la classe così sul file CSS Codice: a.nodecor { padding: 0px; border-style: none; } a.nodecor:hover { padding: 0px; border-style: none; } ma il risultato non cambia :/ 2) Tra l'header e il corpo c'è una fessura bianca... voluta si, ma su chrome ha un ampiezza molto fine, li è esagerata... facendola giocando sul padding dell header non ero riuscito a sistemarla, allora ho sostituito la cosa, azzerando il padding bottom sull'header e aggiungendo un <div> </div> con immagine di background una immagine 20x2 px bianca che si estende lateralmente In pratica così Codice: div#headspacer { clear:both; background: #FFF url(../Immagini/spacer.png) repeat-x; height:1px; } Consigli?

21-02-2012, 20:40	#2
Gimli[2BV!2B] Senior Member Iscritto dal: Feb 2006 Città: Parma Messaggi: 3010	Internet Explorer... quale? Se è il 6, mi dispiace molto, se è più recente hai provato a spiegargli che non deve fare il brillante cercando di visualizzarlo nel miglior modo peggiore? Codice: <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=7;IE=8;IE=9"> <title>Titolo_olotiT</title> </head> <body> </body> </html> Se devi inserirlo specifica nella lista solo le versioni che puoi testare. __________________ ~Breve riferimento ai comandi GNU/Linux (ormai non molto breve...)

21-02-2012, 21:07	#3
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	Internet Explorer 9 non ho messo queste 2 stringhe nell'head Codice: <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=7;IE=8;IE=9"> Perchè non le ho mai trovato in nessun tutorial... non so cosa significhino e metterle così a caso non è nel mio interesse... Saresti gentile da spiegarmi cosa significano?

21-02-2012, 21:11	#4
Gimli[2BV!2B] Senior Member Iscritto dal: Feb 2006 Città: Parma Messaggi: 3010	msdn: HTTP-EQUIV Attribute \| httpEquiv Property __________________ ~Breve riferimento ai comandi GNU/Linux (ormai non molto breve...)

21-02-2012, 21:27	#6
Gimli[2BV!2B] Senior Member Iscritto dal: Feb 2006 Città: Parma Messaggi: 3010	Facendo parte dell'header agisce sull'intera pagina/documento in cui è inserito. Se puoi testare solo la nove e dovesse funzionare bene potresti comunque specificare le versioni precedenti; però è sempre preferibile testare direttamente che sia visualizzato come si desidera in tutte le versioni dei browser che si desidera supportare. Esempio: browsershots __________________ ~Breve riferimento ai comandi GNU/Linux (ormai non molto breve...)

21-02-2012, 21:16	#5
cenarius_88 Member Iscritto dal: Nov 2007 Città: Alcamo Messaggi: 103	Leggendo il link da te proposto ho più o meno capito cosa vuol dire... Non mi è chiaro se questa intestazione modifica la visualizzazione dell'intero documento, o solo della sezione in cui è posto?

23-02-2012, 11:03	#8
espanico Senior Member Iscritto dal: May 2007 Messaggi: 4305	Oppure puoi inserire nei css Codice: a img {border:0;} In questo modo risolvi il problema per qualsiasi immagine del tuo sito __________________ Feedback Mercatino

Strumenti
Mostra una versione stampabile Invia questa pagina per email