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>