PDA

View Full Version : [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 (http://i39.tinypic.com/wlq0d2.png) 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


<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


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ì

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


<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 (http://msdn.microsoft.com/en-us/library/ms533876(v=vs.85).aspx)
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 (http://browsershots.org/)
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)

<a href="home.shtml"><img src="Immagini/logo.png" alt="Logo" title="Home" style="margin-left:70px; border-width: 0;"/></a>

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

a img {border:0;}

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