Just nu i M3-nätverket
Jump to content

vertical-align och internet explorer


BjörnOhlsson

Recommended Posts

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.

 

 

 

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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>

 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

BjörnOhlsson

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...