Problema con link testuale e immagine

**Elisa_73** · 30-03-2007, 23:09

Ciao,
ho una pagina del tipo

<div class="article">
<h1>Titolo</h1>

Testo articolo, con testo link e immagine link
[img]immagine.gif[/img]
</p>
</div>

Nel relativo foglio di stile ho le seguenti regole

.article a {
color:#689BAC;
text-decoration:none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #689BAC;
}

che mi permette di colorare e sottolineare il link testuale, e

.img {
border: 1px dotted #666666;
padding: 2px;
margin-top: 2px;
margin-right: 10px;
margin-bottom: 2px;
margin-left: 10px;
}

che mi permette di visualizzare l'immagine in un riquadro con padding e margine.
Il problema che non riesco a risolvere è che mentre in IE (7) funziona tutto bene, in Firefox (2) l'immagine si presenta con il riquadro voluto + una sottolineatura di 1px dotted #689BAC presente nella classe .article a.
Cosa sto sbagliando secondo voi?

**fcaldera** · 30-03-2007, 23:26

è normale che si presenti quel bordo... gliel'hai detto tu con la prima regola
e la seconda regola non sovrascrive la prima

per fare ciò la seconda regola va scritta come

.articolo a.img

Ciao

**Elisa_73** · 31-03-2007, 11:50

Grazie per la risposta aldera,
ho seguito il tuo consiglio

.article a.img {
border: 1px dotted #666666;
padding: 2px;
margin-top: 2px;
margin-right: 10px;
margin-bottom: 2px;
margin-left: 10px;
}

ma il risultato è che l'immagine non ha più bordi, margini e padding (cioè ignora la regola appena modificata), ed inoltre ha ancora il bordo inferiore della prima regola.
Secondo te?

**fcaldera** · 31-03-2007, 12:08

volevi ottenere questo?

codice:

<style>
.article a {
    color:#689BAC;
    text-decoration:none;
    border-bottom: 1px #689bac dotted;
}

.article a.imglink {
    border : none;
    padding: 2px;
    margin: 2px 10px;
} 

.article a.imglink img {
    border: 1px #666666 dotted;
}
</style

<body>
<div class="article">
<h1>Titolo</h1>



Testo articolo, con testo link e immagine link
[img]immagine.gif[/img]
</p>
</div>
</body>

Nota, ho spostato la classe dall'immagine al link che la contiene (e l'ho rinominata in imglink)

Ciao

**Elisa_73** · 31-03-2007, 12:47

Grazie fcaldera, è proprio quello che volevo!
Non ci sarei mai arrivata da sola, ma ora ho capito la logica che mi hai suggerito, grazie ancora.
Ciao!

Discussione: Problema con link testuale e immagine

Strumenti discussione

Ricerca discussione

Visualizza

Problema con link testuale e immagine

Permessi di invio