I have a website up and running for years and I was about to make some changes when I realised that the pictures are out of the pods. they used to sit perfectly within them. first I thought it must have been windows8.1, but I checked with other browsers too and they are out of place. I cannot figure out what's wrong, here is the code:
or alternatively the website:www.evila.hu
Code:
.pod { background: #fff; padding: 10px; width: 244px; float:left; margin-right: 13px; } .podContent { width: 244px; height:181px; overflow:hidden; margin-top: 10px; } .pod h1 { background: #F90; color: #000; padding:5px; background-image:url(../images/icon_chevron.png); background-repeat:no-repeat; background-position:95%; font-size:16px; font-weight:normal; margin: 0 0 10px 0; } a.block { text-decoration:none; display:block; } and this is the rule for the pic: <section class="pod" id="Karcsúsítás négyszeres hatékonysággal"> <a href="http://bytes.com/wiener.html"><h1 class="block" id="Karcsúsítás négyszeres hatékonysággal">Wiener tekercselés</h1> </a> <figure><a href="http://bytes.com/wiener.html"><img src="http://bytes.com/images/wiener.jpg" alt="kapszula" width="225" height="200" class="podContent"></a> </figure> </section>