vertical-align och internet explorer

[BjörnOhlsson]

Hej!

 

Jag vill kunna lägga in bilder som skall centreras i botten på varje rad. Har bestämt hur bred varje bild blir och därmed hur många som visas per rad. Däremot vet jag inte vilken höjd det renderar(!) i eftersom jag inte känner bildstorlekarna i förväg. Dessutom vet jag inte på förhand hur många bilder det är som skall visas.

 

Jag vet inte om det finns någon annan "container" än en tabell där radhöjden anpassas automatiskt efter det högsta element i containern.

 

Så jag har kommit så långt att jag har en programsnutt som bygger en tabell dynamiskt med vertical-align i td-taggen. Fungerar utmärkt i FF men däremot inte i IE. Där blir inte bilderna centrerade i underkant.

 

De workarounds som jag hittat för IE på detta problem utgår ifrån en bestämd höjd på containern. Men jag har som sagt ingen förutbestämd radhöjd så jag är lite rådvill just nu.

 

Detta är en ren html sida.

 

 

 

 

 

[Anjuna Moon]

Fungerar utmärkt i FF men däremot inte i IE. Där blir inte bilderna centrerade i underkant.

Vad använder du för metod för att centrera den horisontellt då? Använd text-align:center på cellen så skall det fungera.

 

[BjörnOhlsson]

Alltså horisontell centrering har jag också och den fungerar. Så här ser det ut:

 

<table>

<tr>

<td vertical-align:bottom; width:_px;>

<div text-align:center; width:_px;>

.......

<img width:_px />

.......

</div>

</td>

<td vertical-align:bottom; width:_px;>

<div text-align:center; width:_px;>

.......

<img width:_px />

.......

</div>

</td>

<td vertical-align:bottom; width:_px;>

<div text-align:center; width:_px;>

.......

<img width:_px />

.......

</div>

</td>

</tr>

<tr>

.....

</tr>

</table>

 

 

[BjörnOhlsson]

Oj vad svenska är svårt. Med centrera i underkant menar jag att nedre kanten på bilderna skall börja på samma y-koordinat.

 

[Jonas__B]

Skall du ha något mer än just bilder i cellerna/divvarna?

 

Har du testat style="display:table-cell; vertical-align:bottom;" i endast flytande divvar?

 

[BjörnOhlsson]

Njaa, display:table-cell funkar väl inte i IE.

 

[BjörnOhlsson]

Problemet var inte att IE inte gör vertical-align bottom utan att den lägger till extra utrymme efter form element.

 

[Jonas__B]

Hur kommer form-elementet in i bilden?! Det har du inte skrivit något om innan i diskussionen.

 

Utrymme runt om element fixar man lätt med css:

form{margin:0; padding:0;}

 

[BjörnOhlsson]

Ursäkta, men jag trodde inte form elementet var problemet. Har dock fortfarande problem att få till det när jag just försöker med margin:0 och padding:0. I nedanstående tabell så kommer inte första radens buttons på samma nivå i IE. På andra raden däremot, som är identisk med den första gör de det. Förklara det!

 

<table>
 <tr>
   <td style="vertical-align: bottom;">
     <div style="width:100px; text-align:center; ">
       <form style="margin: 0px; padding:0px;" action="">
         <input type="button" value="Download" />
       </form> 
     </div>
   </td>	
   <td style="vertical-align: bottom;">
     <div style="width:100px; text-align:center; ">
       <form style="margin: 0px; padding:0px;" action="">
  <input type="button" value="Download" />
       </form> 
     </div>
   </td>
 </tr> 
 <tr>
   <td style="vertical-align: bottom;">
     <div style="width:100px; text-align:center; ">
       <form style="margin: 0px; padding:0px;" action="">
         <input type="button" value="Download" />
       </form> 
     </div>
   </td>	
   <td style="vertical-align: bottom;">
     <div style="width:100px; text-align:center; ">
       <form style="margin: 0px; padding:0px;" action="">
  <input type="button" value="Download" />
       </form> 
     </div>
   </td>
 </tr>
</table>

 

[Jonas__B]

Hur det ser ut är rätt mycket beroende på cssen.

 

Varför har formulären i en tabell i detta fall?

Är det beroende av detta?

 

Diven har ingen funktion i detta fallet heller, style/class kan du likaväl sätta på form-elementet.

 

Hur får tr sina höjder? Nu är de inte speciellt höga, precis.

Skicka med en skärmdump och den markup du kör.