height:auto e problemi tra browser

[red zeppelin]

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.

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>

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%;
}

[izzusan]

fai css diversi e metti uno script in testa x scegliere il css adatto


<SCRIPT language="JavaScript">
<!-- www.web-link.it
ie = (navigator.appName == "Microsoft Internet Explorer");
if (ie) {document.write("<link href='stile_ie.css' rel='stylesheet' type='text/css' media='screen'/>");}
else {document.write("<link href='stile.css' rel='stylesheet' type='text/css' media='screen'/> ");}
// -->
</SCRIPT>

[red zeppelin]

...eh no, non mi risolverebbe niente..- anche facendo diversi css non saprei cosa dire a chrome e safari per fargli fare quello che voglio..
..e poi non vorrei utilizzare script visto che per io primo li tengo disabiliati.

[izzusan]

pero' se togli il 15% e metti auto?

io ho lo stesso problema che su ie8 si vede in un modo e in ff si vede in un altro lo risolta solo facendo 2 css

[red zeppelin]

...il problema non è sul width:15% ma su height.
Se lascio auto funziona tutto a parte nei browser incriminati. Se ad esempio imposto height:30%; funziona su tutti i browser MA ciò accadrebbe per ogni immagine.
Siccome ho immagini di proporzioni diverse (sono quadri, e quindi in cm 100x70,80x80,100x50...etc a seconda dell'ispirazione del pittore) per realizzare le "miniature" di ogni quadro ho impostato la larghezza fissa lasciando variare l'altezza a seconda delle proporzioni di ciascuna imagine.
Io non vorrei creare una classe per ogni formato di tela in commercio (cosa che dovrei fare con un css per ogni browser) ma trovare il modo di far capire anche ai browser dispettosi di comportarsi come si deve...

[red zeppelin]

up

[red zeppelin]

parzialmente risolto, ovvero mi sono accontentato.
Ho impostato height:30% e sui browser incriminati si vedranno le antemprime un po' male...sugli altri invece rimane tutto ok perchè seguono il concetto fondamentale espresso qui ovvero che l'altezza di un elemento è determinata dal suo contenuto.

E' un caso che i browser incriminati siano tutti basati su WebKit?
E' possibile che esista qualcosa da scrivere nel css tipo -webkit-qualcosa che potrebbe risolvere la situazione?
Sono incappato in un bug?