PlayN-canvas object not on top of page

Question

I don't find a solution for this issue: I want to show my playN-game in a html-iframe:

<iframe src="../playn-showcase-html/Showcase.html"
    width="640" height="480" name="Showcase" scrolling="no" marginwidth="0px" marginheigth="0px" frameborder="0" align="top">
</iframe>

I want to embedd it with no borders. But as you can see in the image below, there is a 15px black 'rectangle' on top of the iframe I don't want to have.

What one can see is the background of Showcase.html (which is black).

As i can see in Mozilla Firebug, the black 'rectangle' is part of the body-element. The canvas-object is located 15px below the top.

How can I change the code so that the canvas-object starts on top?

Below is the code for Showcase.html:

<!DOCTYPE html>
<html>
  <head>
    <title>PlayN Showcase</title>
    <style>
      @font-face {
        font-family: "Museo";
        src: url(showcase/text/Museo.ttf);
      }
    </style>
  </head>
  <body bgcolor="black">
    <script src="showcase/showcase.nocache.js"></script>
  </body>
</html>

enter image description here

Solution

Did you try adding style="margin:0; padding:0" to the body element?