Question

Sometimes I open my page the iPad doenst show it right. Mostly it is when I reload the page. the problem also is in the safari. I’ve created a jsFiddle to show you how I have done it.

<a href="#">         
  <div class="item">                
    <div class="text">Text1</div>         
    <div class="text2"><b>Text2</b></div>         
    <img class="logo" src="http://dummyimage.com/100x50/09f/fff.png" alt="logo"width="100">  
    <div class="balken2">Text3</div>
  </div>
</a>

In Firefox its all right, the Text3 Bar is at the end and the other 2 are centered after the image which is dynamic and not everytime the same size as you see.on ipad it shows it sometimes like this http://www.imagebanana.com/view/ynvggcu8/ipad.jpg. How can i fix this? Thanks for your help!

Answer 1

Working Fiddle: http://jsfiddle.net/parkerwyoung/PkCPR/9/

Put this on .item

position: relative;

Put this on .balken2

position: absolute;
bottom: 0;
width: 150px;
padding-right: 0;
padding-left: 0;

The problem is when the image doesn’t load, the .balken2 class has nothing to guide off of in the layout. This code positions it so it doesn’t have to rely on the image being there. Hope this helps!