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

**danicotra** · 12-12-2007, 22:19

Un saluto a tutta la community di html.it,
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>
  [img]images/style1.gif[/img]
  </body>
</html>

Grazie!!!

**H5N1_Aviaria** · 13-12-2007, 07:57

Questo accade perchè l'elemento a è un elemento inline (tranne che per IE che, notoriamente, interpreta a suo modo le direttive) e non si adatta alle dimensioni dell'oggetto contenuto, ma al testo (quindi al font-size, al line-height etc...).
Di soluzioni ce ne sono diverse.
Quella che preferisco (anche se solleva altri problemi) è quella di assegnare all'elemento a contenente l'immagine un display:table che Internet Explorer ignora:

codice:

a.prova{
    color: #999;
    border: 1px solid #ccc;
    display : table;
}

**danicotra** · 13-12-2007, 16:22

Ciao H5N1...
ho provato a seguire il suggerimento applicando display ad <a> ma non cambia nulla (ho provato anche table-cell, inline-table, compact ma stesso risultato; block e list-item invece peggiorano molto le cose)... puoi suggerirmi un'altra soluzione per favore?

Ciao, grazie!

**danicotra** · 15-12-2007, 02:33

Originariamente inviato da H5N1_Aviaria
Di soluzioni ce ne sono diverse.

H5N1, se ci sei ti prego di farti sentire... quale altra soluzione potresti suggerirmi?

**H5N1_Aviaria** · 15-12-2007, 02:42

Con il codice che mi hai dato funziona:

Codice PHP:


<html>

  <head>

  <title></title>

    <style type="text/css" id="internalStyle">

    a{

    display : table;

    }

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>

  [url="link.htm"][img]images/style1.gif[/img][/url]

  </body>

</html>

Poi se c'è dell'altro non so.

**danicotra** · 16-12-2007, 01:11

Ti ringrazio per l'aiuto che mi stai dando.
Si', be'...
in realtà invece di un semplice tag <html> l'intestazione è maggiormente esaustiva (doctype, ecc.) ecco il codice "vero" (compreso il display che mi hai suggerito):

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xml:lang="it">
  <head>
  <title></title>
    <style type="text/css" id="internalStyle">
a.prova{
    color: #999;
    border: 1px solid #ccc;
    display : table;
}

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

img {
    border:0;
    margin: 0;
    padding: 0;
}
    </style>
  </head>
  <body>
  <div>[img]images/style1.gif[/img]</div>
  </body>
</html>

Non immaginavo, ma... è prorio per via del doctype, ecc. che ancora lo spazio si vede, col tuo codice senza doctype e il resto in effetti si vede giusto...
Che si fa adesso?

Grazie ancora per l'aiuto che mi stai dando!

**H5N1_Aviaria** · 16-12-2007, 02:26

Della serie "come il DOCTYPE e la dichiarazione XML possono condizionare alcuni browser e indurne alcuni ad entrare in quirks mode etc...".
Mi sa che devi studiare un po' di più...
Comunque cosa si fà?
Si aggiunge un bel line-height : 0
E passa la paura!

Ricordiamoci sempre che le immagini e altri elementi ereditano molti attributi e sono spesso influenzati da font-size e line-height.
Un po' di gioco con questi attributi porta ad effetti sorprendenti!

**danicotra** · 16-12-2007, 13:38

Perfetto, sei un mito!

Ricordiamoci sempre che le immagini e altri elementi ereditano molti attributi e sono spesso influenzati da font-size e line-height.
Un po' di gioco con questi attributi porta ad effetti sorprendenti!

E' proprio vero! Ma è un po' un casino, specie quando vuoi ottenere lo stesso identico aspetto su piu' browser differenti (o anche per versioni differenti dello stesso browser)...

Ad esempio pensavo la modalità Quirks fosse relativa solo ad IE e non anche a FF...

Ad ogni modo la curiosità di imparare non mi manca di certo e infatti volevo domandarti

Di soluzioni ce ne sono diverse.
Quella che preferisco (anche se solleva altri problemi)

Posso sapere quali sono i problemi a cui accennavi?
Grazie, ciao!!!

**H5N1_Aviaria** · 16-12-2007, 13:54

Uno dei problemi è che alterare il documento anche solo attraverso il DOM lo rende sintatticamente errato se il principio è errato.
Ad esempio: se uso un XHTML Strict non posso aprire popup: l'uso di target è invalido e scorretto.
Alcuni pensano che utilizzando javacsript con window.open, siccome il validatore non se ne accorge, il tutto diventa corretto.
Niente di più stupido.
Il concetto che sta alla base viene violato: l'utente deve avere il controllo.
Così forzare la visualizzazione stile tabella senza che l'elemeento sia effettivamente una tabella risulta errato formalmente e concettualmente.
Ma il problema è a monte.
Molti pensano che Firefox sia un W3C Compliant Browser, ma il che non è affatto vero, sebbeno lo sia molto più di IE.
Firefox ha ancora molti problemi, non ultimo un uso errato del display:inline-block.
Fino ad un paio di subversion fa, tale codice veniva addirittura interpretato come errore: Firefox non lo riconosceva e bisognava utilizzare (contro ogni standard) -moz-inline-block che, tra l'altro, funzionava male

**danicotra** · 16-12-2007, 21:48

:OT: E' un vero piacere quando in un forum hai la fortuna di incontrare persone che, per la loro esperienza e conoscenza, ti danno la possibilità di crescere imparando qualcosa di nuovo e di venire a capo di problemi che, per quanto possano avere una soluzione relativamente semplice, per loro natura necessitano di un background di conoscenze piuttosto ampio e specifico per poterne individuare l'origine e quindi la risoluzione che non appare affatto immediata (ho provato a chiedere anche in un altro forum abbastanza popolato e valido, credo, ma senza una soluzione)... Quindi grazie H5N1 perchè ti sei dimostrato una di queste persone :fine OT:

Il concetto che sta alla base viene violato: l'utente deve avere il controllo.
Così forzare la visualizzazione stile tabella senza che l'elemeento sia effettivamente una tabella risulta errato formalmente e concettualmente.

E' vero, anche a me da un po di "fastidio" (per lo meno mentalmente) sapere di avere applicato un display table ad un elemento che non è una tabella (ne' tantomeno vi è contenuto), immagino che soprattutto a livello di accesibilità questo non sia una buona cosa...
Di solito cerco di mantenere le cose quanto piu' semplici possibile e seguendo gli schemi perchè cio' va di pari passo con una buona accessibilità ma... in circostanze come queste che si puo' fare? Forse non sempre si riesce a trovare una soluzione che ti permetta di ottenere un risultato visivo analogo fra browser diversi senza violare uno schema semantico dei contenuti almeno fin quando non si avranno tutti i browser W3C Compliant (ma avverrà mai? e quando? forse non è poi così interessante questo per i produttori di browser perchè poi ogni sviluppatore potrà scegliere davvero liberamente quale adoperare)... mi sbaglio? Ad esempio, nel caso specifico, sarebbe possibile H5N1?

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

Strumenti discussione

Ricerca discussione

Visualizza

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

Uffi

Permessi di invio