Hi there,
I built a layout which looks great in preview mode and on my laptop’s cliënt which I use to test. On the display it really should work it doen’t look that good.
The problem is in the image I use. I set a dataset column to fill in an URL to show an image. In the layout I set a div with a background image (to be shown if there is no image found or no url set). If there is an image found the code will shrink or enlarge the image to fit width. Vertically it will align the image and hide all the parts of the image outside the box.
As said: works all fine on ‘modern’ windows clients.
But it does not work properly on the client on windows vista. (With IE9 and Chrome, guess there is a problem in IE9) The background image is not shown at all and the dataset image is aligned with a margin-top:50%.
Is this a compatibility-problem in Vista/IE9 or is it something else? Is there something I can do about this in my code? I haven’t been coding in a few years, so I built it google-ing pretty much everything
<div id="Afbeelding" style="
margin-right: 0px;
margin-top:170px;
margin-left:1158px;
padding: 2px;
position:absolute;
width:710px;
height:363px;
background-image: url(http://s16.postimg.org/3vg8hi0l1/No_Image.png);
overflow:hidden;
border-style: solid;
border-width:2px;
border-color:#fff;
">[Afbeelding|11]</div>
Optional Style sheet:
img {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 100%;
max-width:100%;
height: auto;
}
Thanks in advance,
Arnd