CSS onderschrift bij afbeeldingen

[Timmmy]

Ik ben aan het proberen om een onderschrift onder de afbeeldingen te krijgen. Nu is het mij gedeeltelijk gelukt. Op firefox ziet het er prima uit, precies zoals ik het wil hebben. Maar I.E doet het anders interpreteren. De pagina die ik bedoel: De pagina.
Zoals te zien is hebben een aantal afbeeldingen een groene border. In de border onder de afbeelding (in firefox) staat een link naar de eigenaar van de afbeelding.

Ik heb dit op deze manier gerealiseerd:
Ik heb twee verschillende div's, één voor afbeeldingen naar links en één naar rechts gefloat:
CSS:

p.illustratie-r {
	float: right;
	margin-top:4px;
	margin-left:15px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}

p.illustratie-l {
	float: left;
	margin-top:4px;
	margin-right:15px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}

De HTML code:

<p class="illustratie-l"><img src="http://www.eenspeciaalmoment.nl/images/366.jpg " height="100" width="100" align="left" border="1"><br/><a href=" http://www.flickr.com/photos/dok1/62520777/ ">Flickr/dok1</a></p>

Ik heb geen idee hoe ik het goed in I.E (en opera) kan krijgen, heeft iemand misschien tips?

(btw: in chrome en firefox werkt het wel goed)

Alvast bedankt!

 

[csshunter]

Ja, IE heeft altijd al zo'n ongebreidelde uitbreidingsdrang gehad.

Je kunt dit binnen de perken houden door niet alleen het image zijn breedte te geven, maar de <p> eromheen diezelfde breedte te geven.
Het makkelijkst gaat dat met een inline style, bv.:

<p class="illustratie-l" style="width: 150px;">
	<img src="http://www.eenspeciaalmoment.nl/images/370.jpg" 
	height="230" width="150" alt=""><br />
	<a href="http://www.weddingbells-company.com/">weddingbells-company</a>
</p>

De padding die om het img heen zat, komt nu te vervallen; en de padding van de <p> wordt in de css wat uitgebreid:

p.illustratie-l,
p.illustratie-r {
   ...
   padding: 20px;
   }

.illustratie-l img,
.illustratie-r img {
   border: 0;
   padding: 0;
   }

Voor de overige .illustratie-l en .illustratie-r styles kan de css hetzelfde blijven.
Daarmee zou het goed moeten komen.

• Testpagina met diverse img-breedtes: img-bijschrift-4.htm
• Met ingang van IE6!

Met vriendelijke groet,
CSShunter

 

[Timmmy]

Hartstikke bedankt, het is gelukt!