[HTML/CSS] Differenti risultati in browser diversi

[cenarius_88]

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

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

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]

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

msdn: HTTP-EQUIV Attribute | httpEquiv Property

[cenarius_88]

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

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]

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]

Oppure puoi inserire nei css

a img {border:0;}

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