Search code examples
javascriptvideoflipclock

Video not centered, JS causing it?

If you look at this page: http://www.groenesmoothiehandboek.nl/sp/ you will see that the video is slightly offcenter.

You will also see there is a counter (flipclock.js) above. To call the counter we use this code:

<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; height:140px; margin:0 auto; z-index:9999;">

If i delete this part, the video centers perfectly.

I am already trying to fix this little bug for over an hour without success.

Does anyone know how i can maybe fix this?

Thanks in advance!

Solution

  • If you wrap this div:

    <!-- notice no height attribute here -->
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; margin:0 auto; z-index:9999;">
  <!-- stuff from inside this div -->
</div>

    inside of this div:

    <div style="height: 140px;">
  <!-- Place the entire div from above here -->
</div>

    Your problem is fixed.

    Picture: https://i.sstatic.net/R6RcJ.png