Ho un problema di interpretazione diversa da parte di alcuni browser (chromium e midori in ubuntu ,safari su winxp; temo quindi anche chrome in generale e safari su mac) che invece non si verifica con explorer,firefox e opera.
Ho creato una gallery di immagini, per la precisione quadri che avendo ognuno proporzioni diverse (non come le fotografie) mi ha impedito di trovare qualcosa di già pronto e funzionante.
Ho inserito ogni immagine all'interno di due div per poter scegliere il colore del bordo (argomento già affrontato in un altro topic).
Ho assegnato al div class="bordoest" una larghezza predefinita (width:15%;) e altezza "libera" (height:auto;).
Con ff, IE ed opera l'altezza viene "calcolata" dal browser a seconda delle proporzioni di ciascuna immagine e visualizza quindi tutte le immagini con la larghezza fissata e altezze che variano correttamente a seconda delle dimensioni delle immagini stesse.
Con chromium e safari invece le immagini vengono visualizzate con la larghezza predefinita (width:15%;) e l'altezza che corisponde a circa il 100% del viewport.
Ho fatto delle prove sostituendo height:auto con es height:30% e i browser incriminati me le ridimensionano. Ma siccome ogni immagine ha proporzioni diverse non vorrei creare una classe per ogni immagine (+di200).
C'è qualche sistema per lasciare height:auto e risolvere questa differenza tra browser? Sono disposto a cedere anche ai commenti condizionali...

P.S.Ho validato il tutto sia con xhtml1.0 dtd strict sia con css 3.

codice:
HTML
<div class="quadri">

<div class="bordoest">
<div class="bordoint">
[img]xxx1.jpg[/img]
</div>
</div>

<div class="bordoest">
<div class="bordoint">
[img]xxx2.jpg[/img]
</div>
</div>
..............
</div>
codice:
CSS
div.quadri {
height:auto;
float:right;
width:90%; 
padding-left:0%;
padding-right:0%;
margin-left:5%;
margin-right:5%;
margin-top:0%;
margin-bottom:5%;
border:thin none #000000;
}
div.bordoest{
float:right;
clear:both;
height:auto;
width:15%; 
margin:1%;
border-top:thick solid #a00;
border-left:thick solid #a00;
border-bottom:thick solid #ff0000;
border-right:thick solid #ff0000;
background-color:#ffffff;
}
div.bordoest>div.bordoint{
height:auto;
width:auto; 
border-top:medium solid #ff0000;
border-left:medium solid #ff0000;
border-bottom:medium solid #a00;
border-right:medium solid #a00;
margin:0%;
background-color:#ffffff;
}
.bordoest a {
display:inline;
margin:0%;
}
.bordoest img {
display:block;
background-color:#ffffff;
border:thin none #000000;
margin:1.8%;
padding:2%;
}