CSS difformità visualizzazione FF/IE per immagine all'interno di un link con bordo

12-12-2007, 21.59.32

Salve AViani,
ho bisogno di una mano:

ho un banale documento html in cui ho una immagine dentro un link che visualizzato in FF(2) mi lascia uno spazio sotto l'immagine che io ovviamente NON voglio, mentre in IE è tutto ok... ???

Qualcuno mi spiega perchè e come risolvere in modo che si veda senza lo spazio anche in FF?

Ecco il codice:

Codice:

<html>
  <head>
  <title></title>
    <style type="text/css" id="internalStyle">
a.prova{
    color: #999;
    border: 1px solid #ccc;
}

a.prova:hover {
    color: #333;
    border: 1px solid #999;
}

img {
    border:0;
    margin: 0;
    padding: 0;
}
    </style>
  </head>
  <body>
  <a href="link.htm" class="prova"><img src="images/style1.gif" alt="style_1" /></a>
  </body>
</html>

Grazie!

**SolitaryExplorer** · 12-12-2007, 23.14.45

Intanto prova a mettere quel link + immagine dentro ad un contenitore (div o p).
A img basta solo indicare il border, poiché non hanno margin o padding di default le immagini.
Inoltre non capisco cosa intendi per spazio sotto l'immagine...

EDIT
Ho capito, scusami.
Proviamo allora a scrivere un codice pulito.

Codice HTML:

<html>
  <head>
  <title></title>
    <style type="text/css" id="internalStyle">
a.prova img{
    color: #999;
    border: 1px solid #ccc;
}

a:hover.prova img {
    color: #333;
    border: 1px solid #999;
}
    </style>
  </head>
  <body>
    <p>
      <a href="link.htm" class="prova"><img src="images/style1.gif" alt="style_1" /></a>
    </p>
  </body>
</html>

12-12-2007, 23.35.51

modificato il codice e provato sia con div che con p, il risultato non cambia (purtroppo)...
ecco uno screenshot di quello che vedo:

l'immagine è un quadrato nero per comodità mia
quello spazio bianco è cio' di cui parlo...
mi sono accorto anche che il bordo superiore non si vede... immagino che l'immagine si sovrapponga e lo copra (con IE invece tutto ok)...

**SolitaryExplorer** · 12-12-2007, 23.41.05

Originalmente inviato da sanpioxct

provato sia con div che con p, il risultato non cambia...
ecco uno screenshot di quello che vedo:

l'immagine è un quadrato nero per comodità mia
quello spazio bianco è cio' di cui parlo...
mi sono accorto anche che il bordo superiore non si vede (immagino che l'immagine si sovrapponga e lo copra)...

Hai provato la mia modifica al CSS?

13-12-2007, 00.07.19

Originalmente inviato da sanpioxct

modificato il codice

Si'...
ah, scusa, evidentemente ho editato poco dopo che tu rispondessi... :D

edit:
ah, no, aspetta pensavo avessi semplicemente tolto lo stile a img ma mi sono accorto che hai invece hai proprio cambiato l'elemento che ottiene il bordo (non piu' il link ma l'immagine)...
ok, adesso funziona su FF ma in IE l'effetto rollover non si vede piu'... (il bordo non cambia colore)

13-12-2007, 00.21.31

ho editato (scrivo questo solo per fartene accorgere...)

**SolitaryExplorer** · 13-12-2007, 00.33.41

Che versione usi di Internet Explorer? La versione 7 a me ha funzionato...

13-12-2007, 00.36.52

la 6.0 quella che m'hanno dato con Windows XP (mi pare sia maggiormente diffusa e faccio le prove su questa...)
se si risolvesse questo hover su IE adesso saremmo a cavallo,
anche se non mi spiego come mai non si riesce a togliere quello spazio bianco con FF lasciando il bordo al link invece che all'immagine...
ci dovrà essere un modo, sono convinto che FF è meglio di IE... quindi ci deve essere un modo per farlo comportare come si deve... o no? in fondo è il link che contiene l'immagine, non c'è un modo di farlo aderire perfettamente ad essa?

**SolitaryExplorer** · 13-12-2007, 00.38.31

Prova a dare un doctype alla pagina.

13-12-2007, 00.50.30

fatto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

in IE non cambia nulla, in FF invece, ho notato che l'immagine scende di qualche pixel (assieme al bordo in ogni caso)...

edit:
ho pensato una cosa: forse applicando un vertical-align: middle all'immagine si riesce a centrarla nel link in modo che il bordo la contorni?
lo so', starai pensando che mi sono fissato... be', un po' è vero... non mi puo' pace che quel maledetto bordo "faccia di testa sua" :D
cmq forse (per lo meno con FF) il bordo del link è meno malleabile di quello dell'immagine (che per forza di cose la contorna perfettamente) se si riesce a ottenere il rollover con IE6 va bene (anzi ottimo, siamo sicuri che funziona!)
Ad ogni modo domani provo se 'sta cosa funziona o no... poi ti faccio sapere...

Grazie SolitaryExplorer, a domani!

**powser** · 13-12-2007, 11.43.36

nel tuo stesso codice, modifica il margin in margin-bottom: -5px così dovrebbe funzionare.
con ie7 funziona, non so col 6

13-12-2007, 16.09.31

Originalmente inviato da powser

nel tuo stesso codice, modifica il margin in margin-bottom: -5px così dovrebbe funzionare.
con ie7 funziona, non so col 6

Il problema in origine col mio codice era di FF non di IE... ho provato comunque ma nulla, lo spazio in FF resta, semplicemente si sposta in alto...
Ho provato anche ad aggiungere un vertical-align all'immagine e a provare tutte i valori possibili (positivi, negativi, middle, bottom...) ma niente, lo spazio resta, si sposta o in alto o in basso ma resta...
ho provato ad applicare anche al link anzichè all'immagine ma sempre la stessa cosa...
ho provato anche a dare un position: relative all'immagine e un top: 1px ma con l'unico risultato che il bordo superiore finalmente si vede anche in FF ma resta sempre quel maledetto spazio...
A questo punto l'ipotesi di trovare la soluzione col mio codice iniziale la scarto proprio...

Qualcuno mi aiuta a fare vedere, partendo dal codice di SolitaryExplorer, l'effetto :hover sul bordo dell'immagine anche con IE6, please?
Ciao...

**SolitaryExplorer** · 16-12-2007, 15.56.46

Ancora qui?!

Ti sono mancato?

Purtroppo non ho la possibilità di ricreare l'esatto motore di rendering di IE 6, però dovrei essere riuscito a scrivere comunque un hack funzionante.

Codice HTML:

<html>
  <head>
  <title></title>
    <style type="text/css" id="internalStyle">
a.prova img{
    color: #999;
    border: 1px solid #ccc;
}

a:hover.prova img {
    color: #333;
    border: 1px solid #999;
}

<!--[if lte IE 6]>
a:hover.prova {
border-color: #999;
}
<![endif]-->
    </style>
  </head>
  <body>
    <p>
      <a href="link.htm" class="prova"><img src="images/style1.gif" alt="style_1" /></a>
    </p>
  </body>
</html>

Provando a utilizzare l'istruzione contenuta nell'hack al posto di quelle standard, sono riuscito a far funzionare l'hover su un IE 6 standalone.
Però non mi riconosceva i commenti condizionali.
Così ho provato a fondere il codice compatibile con IE 6 con quello standard e a usare la conoscenza delle regole dei commenti condizionali senza poterle testare effettivamente.
Il risultato (spero) funzionante ottenuto lo trovi scritto in questo post.
Fammi sapere.

P.S. Scusa per il ritardo nel postare la soluzione.

17-12-2007, 09.26.06

Originalmente inviato da SolitaryExplorer

Ancora qui?!

Ti sono mancato?

CIAO!!!

Originalmente inviato da SolitaryExplorer

non mi riconosceva i commenti condizionali.

Neanche a me, infatti non funzionava in quel modo... che non sia possibile utilizzarli cosi' nudi e crudi (senza un ulteriore hack intendo) all'interno del tag <style>... (magari possono essere interpretati come dichiarazioni, ho pensato...) ?

Ad ogni modo, poi ho risolto da un idea che mi è venuta della situazione iniziale che tu hai descritto

Originalmente inviato da SolitaryExplorer

utilizzare l'istruzione contenuta nell'hack al posto di quelle standard, sono riuscito a far funzionare l'hover su un IE 6

ho aggiunto:

Codice:

a:hover.prova {
border-color: #999;
}

dopo le altre dichiarazioni in <style> e... funziona!!!
Evidentemente, in questo modo, l'immagine in IE eredita il colore del bordo dal link contenitore, mentre, in FF, dal momento che non ho impostato realmente un bordo per il link (o comunque questo ha dimensione 0) non si ravvisa introduzione di differenze, per cui ottimo!

Originalmente inviato da SolitaryExplorer

P.S. Scusa per il ritardo nel postare la soluzione.

Ma, dico, stai scherzando spero!? Sono io che ti ringrazio: grazie mille!!!

Discussione: CSS difformità visualizzazione FF/IE per immagine all'interno di un link con bordo

LinkBack

Strumenti discussione

Display

CSS difformità visualizzazione FF/IE per immagine all'interno di un link con bordo

Regole di scrittura