Un immagine, due bordi

**Federix** · 25-09-2006, 10:58

Dovrei mettere due bordi ad un immagine, uno di 2 pixel bianco e uno di 10 pixel nero.
Dato che lo sfondo del box dove è contenuta l'immagine è bianco, ho pensato che (dato che due bordi non si possono assegnare allo stesso elemento) potevo mettere il bordo di 10 pixel nero e scostarlo di 2 pixel dall'elemento immagine ed ho provato così:

codice:

.bordo { border:10px solid #000; padding:2px; }

però su IE non funziona per niente, mentre su FireFox, prima funzionava, ma dalle versione 1.5.0.4 ha smesso di fungere

Avete qualche soluzione alternativa??

Per capire meglio, vorrei fare una cosa del genere solamente in CSS, senza immagini alternative:

**Mich_** · 25-09-2006, 11:30

Per avere la compatibilita` con i browser standard e con IE, che io sappia ci sono tre soluzioni:
1- passare ad XHTML Strict
2- usare un codice specifico per IE
3- innestare l'immagine dentro due <div>

Infatti e` noto che il box-model di IE non rispecchia quello degli altri, e questo comporta di dover trattare IE come browser specifico.

1. E` la soluzione migliore (piu` moderna), ma non sempre e` applicabile (i CMS di solito non supportano XHTML Strict).
2. Ci sono vari trucchi e hack, ma il consiglio e` usare i commenti condizionali (puoi vedere i "link utili" o fare una ricerca nel forum).
3. Con una serie di "scatole cinesi" si riesce a mettere tutti d'accordo (si devono evitare bordi e padding, ed usare solo sfondi e margin).

**Federix** · 25-09-2006, 12:01

1) L'XHTML è in versione Strict

2) Guardo cosa trovo

3) Soluzione forse troppo complessa e difficile da far quadrare per tutti i browser.

**Mich_** · 25-09-2006, 12:18

1) sei sicuro? Non e` che c'e` qualche carattere prima del <DOCTYPE> (che fa perdere ad IE la capacita` di interpretare il DOCTYPE stesso. Anche il prologo XML va eliminato per IE.

2) si tratta semplicemente di "correggere" le dimensioni del box model per IE.

3) non credo sia particolarmente difficile: e` sufficiente non usare border e padding (chiaramente e` necessario un <div> in piu`, che semanticamente non ha senso).

**Federix** · 25-09-2006, 12:24

Il DOCTYPE è questo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">

Se vuoi vedere, la pagina dove deve andare la cornice è questa: http://www.federix.it/portfolio_photo/

Ancora non ho avuto modo di provare l'opzione 2, appena ho tempo vedo cosa tiro fuori

**Mich_** · 25-09-2006, 12:41

Non ho IE per provare: resta come esempio di bug di IE (che credevo fosse superato dalla DTD Strict).

Discussione: Un immagine, due bordi

Strumenti discussione

Ricerca discussione

Visualizza

Un immagine, due bordi

Permessi di invio