Problema Firefox e IE IMG CLASS

**carlo75bb** · 06-03-2008, 21:58

Ciao a tutti,
sto provando a creare una cornice su alcune immagini, utilizzando un css di questo tipo:

.frame {
background-image:url(frame.jpg);
background-position:right bottom;
background-repeat:no-repeat;
margin:10px 0pt 0pt;
padding:11px 20px 20px 10px;
}

.down {
background:#FFFFFF url(down.jpg) no-repeat scroll center bottom;
margin:15px 0pt 0pt;
padding:11px 15px 24px;
text-align:center;
}

Quando lo provo con Firefox, utilizzando il tag <img class="frame" src....> funziona perfettamente, mentre in IE 6/7 non vedo niente tranne che la foto, che dovrebbe essere incorniciata...

Mettendo invece <span class="frame"><img src....></span> tutto funziona perfettamente su IE 6/7 mentre su Firefox, vedo solo il bordo finale dell'immagine di sfondo sia in .frame che in .down....

In allegato lo screen esplicativodi Firefox: a SX tutto ok con <IMG CLASS="...> a DX invece la cornice interrotta con l'utilizzo <SPAN CLASS="...> prima del tag IMG (sempre in Firefox)

Qualcuno mi può delucidare in merito e farmi capire dove sto sbagliando?
Grazie in anticipo.

**gabar-el** · 06-03-2008, 23:43

ciao,
direi che ci sono grossi errori a livello di semantica e sintassi.
dando la classe frame a un'immagine, visto il css, dai un backgound di un'immagine (non puoi dire che un'immagine deve avere un'immagine in background).

cmq, generalmente se metti un'immagine in background lo fai mettendola nel background di un contenitore e per questo non puoi dargli un bordo, ma puoi darlo al suo contenitore. puoi dargli un bordo solo se non è in background al max....

mi sembra ci sia un pò di confusione, magari con anche il codice html si capirebbe meglio.

quando posti il codice usa i tag appositi, così è più leggibile....
e magari se hai dei problemi prova a convalidare sia l'html che il css (prima uno poi l'altro), il che dovrebbe renderti certo che non ci siano errori...

**carlo75bb** · 07-03-2008, 13:25

Ciao gabar e grazie del tuo consiglio...

purtroppo sono davvero novizio in questa materia: come contenitore intendi il <div> ?

Ho provato, ma poichè la foto è centrata, il DIV, mi crea uno spazio bianco per tutta la sua altezza... non so se mi sono spiegato, dovrei invece creare 3 <DIV> contigui verticali, ed in quello in mezzo applicare il css... ma non so ne se è possibile ne come fare...

è possibile innanzitutto? avresti dei siti dove potrei guardare la sintassi e la semantica corretta...

grazie nuovamente!

**gabar-el** · 07-03-2008, 14:01

faccio un pò fatica a capire ciò che vuoi ottenere, cmq si, un contenitore in questo caso è un div, che puoi personalizzare dandogli un id (identificatore) tramite css, che sarà univoco (ovvero solo quell'elemento può avere quel id), altrimenti puoi applicare una classe (che ti permette di applicarla a più elementi o tag).

magari prova a spiegarti meglio e se riesci posta il codice html, magari solo della problematica in questione...

**carlo75bb** · 08-03-2008, 00:58

Si hai ragione, vorrei ottenere una cosa di questo tipo

http://www.html.it/articoli/2118/CorniciEsempio1.html

solo cercare di adattare la cornice sulle dimensioni della fot, infatti se utilizzo un'immagine più piccola viene troncata in basso...

<style type="text/css">
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222}
img.pic{padding:10px; background: url(bk.png) no-repeat}
</style>
</head>
<body>
<div>[img]sea.jpg[/img]</div>
</body>
</html>

altrimenti, cosa che mi piacerebbe moltissimo è infilare un background dietro ad un'immagine come si vede in questo sito:

http://www.4mj.it/

dove ogni foto centrale, sembra avere una cornice in background, che si adatta all'altezza della foto che è variabile, mentre la larghezza rimane fissa.

Purtroppo non riesco a ricreare un effetto simile... spero di essere stato un pò più chiaro questa volta...

Ciao e grazie ancora di tutto!

**mucu** · 08-03-2008, 13:06

Codice PHP:


<img class="quellochevuoi"

va benissimo sia su explorer che firefox, io lo uso da tanto senza problemi

**gabar-el** · 08-03-2008, 13:44

mettendo un bordo e non inserendola in background non riesci a risolvere?

codice:

img.pic{padding:10px; border: 1px solid #000;}

mucu non ho capito ciò che hai scritto.... :master:

**mucu** · 08-03-2008, 17:51

quello che volevo dire è che dando semplicemente un padding all'immagine e avendo uno sfondo, ottiene facilmente l'effetto cornice
esempio che ho controllato su vari browsers

**gabar-el** · 08-03-2008, 21:11

già, è vero. anche se più che un bordo appunto è una cornice....

Discussione: Problema Firefox e IE IMG CLASS

Strumenti discussione

Ricerca discussione

Visualizza

Problema Firefox e IE IMG CLASS

Permessi di invio