Hjelp til fotoalbum - css

[JonH]

Etter en pause fra webdesign har jeg begynt på et online fotoalbum. Galleriet fungerer fint i alle nettlesere jeg har prøvd (opera, firefox, chrome) bortsett fra explorer. Fant det som en tutorial for en tid tilbake der det tilsynelatende fungerte greit. Det er plassering av bilde og tekst jeg trenger litt hjelp til. I bildeeksemplet er explorer nederst.

 

 

 

HTML:

 

  <div class="gallerycontainer">

  <div class="gallery">

  <div style="display: table-cell; vertical-align: middle";>

  <a href="#"><img src="http://dummyimage.com/135x180" alt="A Dummy Image" width="135" height="180" /></a>

  </div>  

  </div>

  <div class="description">Kategori</div>

  </div>

 

 

CSS:

 

.gallerycontainer {

 

 display: table;

 padding: 7px;

 margin: 10px;

 border: 1px solid #333;

 float: left; }

 

.gallery {

 display: table;

 margin: 5px;

 width: 200px;

 height: 200px;

 float: left;

 overflow: hidden; }

 

.gallery img {

 border: 1px solid #000;

 margin: 5px; }

 

.gallery .description {

 margin: 5px;

 text-align: center; }

 

a:hover img {

 border: 1px dotted #333; }

 

 

 

 

 

[Vibeke S]

Kanskje det hjelper å legge til clear:left; på .description? IE støtter heller ikke display:table; og display:table-cell;, derfor blir ikke bildene midstilt vertikalt.

 

Forresten er det lettere å debuge hvis du legger ut en lenke til selve siden.

[JonH]

Fant galleriet som en tutorial og det så ut til å fungere greit der iallefall. Her er forresten adressen.

[JonH]

Det er forøvrig et bildegalleri lignende dette jeg ønsker å lage, gjerne uten å bruke tabeller.