Bordo delle immagini e problemi IE

sergej

Bordo delle immagini e problemi IE

Salve! ho un problema: vorrei sapere come correggere gli errori delle immagini in IE. Se guardate questo articolo prima con FF e poi con IE noterete che che:

con FF, i bordi ci sono e sono posizionati ad una distanza tot dall'immagine stessa.
con IE i borsi sono attaccati all'immagine stessa, senza che vi sia spazio fra l'immagine ed il bordo.Mi sono scervellato per trovare una soluzione ma non ci riesco.cry::bho:

Per favore aiutatemi!!!:(:(:(

karedas

Non sono a lavoro e non ho gli strumenti necessari per controllarlo.
Però a occhio vedo che hai attribuito due volte il bordo alla classe "alignleft".
In una scrivi

img.alignleft{border:1px solid #CCCCCC;}
```e subito dopo scrivi

.alignleft{border:0 none;}

O sennò provi a scrivere ```
a .alignleft{ border:1px solid !important;}
```Non so ancora dirti se è una soluzione però per ora posso darti solo questa
ciao! :o

sergej

Nel mio CSS c'è scritto al riguardo:

[html]img.alignleft{
padding:4px;
margin:0 7px 2px 0;
display:inline;
border-color:#ccc;
border-width:1px;
border-style:solid;
}[/html][html].alignleft{
float:left;
}[/html]dunque non c'è ripetizione di bordo...

karedas

Prova a mettere il valore alfanumerico per intero nel bordo: #CCCCCC;

sergej

La mia risposta è questa:
:(:?()::bho:

...ma perchè IE fa come gli pare e non adotta le direttive W3c?!?!!??

laburno

Controlla di non avere definito il bordo alle immagini in una regola più specifica, non necessariamente successiva a questa.

Una cosa del tipo
div#main div.contenuto p.roba img { border:... }

sergej

Trovato quello che fa al caso mio. E' una soluzione talmente bella che penso che sarebbe opportuno inserirla da qualche parte in evidenza in questo forum. Ma non saprei dove perchè son nuovo.

Eccola:
[html]<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>[/html]Per vedere il risultato andate qui.

Dicevo che come soluzione è bellissima perchè penso che in molti blog e siti internet vi sono immagini senza fonti. E la soluzione trovata da', tra l'altro un aspetto giornalistico alla cosa.

Devo dire che comunque il sito W3Schools Online Web Tutorials è una miniera di informazioni!