Draw Border in the Game Area with CSS

Cian Games

unread,

Jun 14, 2012, 9:54:11 PM6/14/12

to mel...@googlegroups.com

Hi Olivier

I would like to draw an border in the game area, see the code below (the HTML background is white):

Code A: <div id="jsapp" style="border: 2px solid #000; width: 640px; height: 480px; ">

Code B: <div id="jsapp" style="border: 2px solid #000; ">

With the Code A, the border is drawn correctly. But with the Code B, has an "empty" space in the bottom of game area, between game area and border.

Inspecting with Firebug, the jsapp of Code B have an size of 640px X 485px (the height is 5px larger of the game area)

I would use the code B (without fixed dimensions) in case you need to scale the game does not changing the CSS;)

Any ideas?

Thanks again!

Orthonormal

unread,

Jun 15, 2012, 5:46:29 AM6/15/12

to mel...@googlegroups.com

When the dimensions are not specified, the div expands to fit whatever stuff it contains.

To keep track of all these, what I do is to define borders for all my divs just for debugging and delete them later when the site is done.

Its impossible to tell unless I have a link to your webpage for refernece, but I suspect the extra 5 px comes from the space allocated to the FPS counter.

Cian Games

unread,

Jun 17, 2012, 5:23:14 PM6/17/12

to mel...@googlegroups.com

Hi Orthonormal

I also define borders for my divs for debugging ;)

I sent to Olivier an code example, let's see what he says

Thanks for the return!

melonJS

unread,

Jun 25, 2012, 12:51:44 AM6/25/12

to mel...@googlegroups.com

Hi,

I have not yet checked your examples (I will soon now that I'm back) but in case you have not noticed, when I create the main canvas I do specify an empty (0px) border, and was wondering it this could be the cause of this ?

Extract from the me.video.init function :

canvas.setAttribute("border", "0px solid black");

Could you try to remove this line and see if it changes something? maybe this should not actually be there ?

Also please consider removing the FPS counter, this is supposed to be for debugging only (still I see everybody keeping it in their final page).

Cheers,

Olivier.

Cian Games

unread,

Jun 25, 2012, 8:04:11 PM6/25/12

to mel...@googlegroups.com

Hi Olivier

I commented the line indicated and the issue continues :(

And the FPS indicator is in code I sent you only to debug ;)

Thanks for return!

melonJS

unread,

Jun 25, 2012, 10:52:46 PM6/25/12

to mel...@googlegroups.com

then I honestly have no other idea, I mean the only thing I’m doing is to create a canvas where the DIV is located, (except if I’m missing something obvious) I don’t have any other impacts on the html page layout….

Note that when no div is specified melonJS will anyway create a canvas (this is for compatibility with directCanvas, coronaJS & Co), maybe you could try that in your page ?

Cian Games

unread,

Jun 26, 2012, 7:55:12 PM6/26/12

to mel...@googlegroups.com

Hi Olivier

I changed the "<div>" for an "<p>" in the html and has increased the "empty space".

Do not worry, if I find one solution I update here in the forum ;)

Thanks for the dedication!

Orthonormal

unread,

Jun 27, 2012, 9:33:07 AM6/27/12

to mel...@googlegroups.com

If you post just the empty HTML and CSS here we might be able to help.

One method that I use when I run into this kind of bug is to try removing everything except the basic HTML and CSS. Then see if the layout works as expected. If it does, I'll add in the code part by part and see at which step does it mess up.

Kinda like how you would troubleshoot a faulty computer: take out everything except the basic essentials, turn it on. Then put in the ram, hard drive, graphics cards, step by step and see which one is causing the problem.

Good luck! ^__^

P.S.

Based on just the two lines of codes you posted, all I can say is that "height 480 px" restricts the height to exactly 480. When you relax that condition, the height goes to 485 px, meaning there has to be something in the div that is taking up 5 px.

Cian Games

unread,

Jun 27, 2012, 7:22:26 PM6/27/12

to mel...@googlegroups.com

Hi Orthonormal

Below is the code, it's basic and with this you simulate the problem.

The div "jsapp" it's the melonJS canvas. And removing the "framecounter" section, the issue also occurs.

   <body bgcolor="white" style="margin:50px 0px; padding:0px;">
        <div id="fps" style="float: right;">
            <font color="#000", style="font-size: 10px; font-family: Courier New">
                <span id="framecounter">(0/0 fps)</span>
            </font>
        </div>
        <div id="jsapp" style="border: 2px solid #000; position:absolute;">
        </div>
    </body>

Thanks!

Message has been deleted

Orthonormal

unread,

Jun 28, 2012, 9:03:16 AM6/28/12

to mel...@googlegroups.com

Interesting...I did the same for my game (removed the height/width specification) and got the same extra pixels! :D

This turns out to be a problem with the canvas. Quite a few solutions here: http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below-canvas-video-audio-elements-in-html5

I supposed this is resolved. ^__^

Cian Games

unread,

Jun 28, 2012, 8:58:19 PM6/28/12

to mel...@googlegroups.com

Hi Orthonormal

This is really an issue of canvas ;)

I resolved this setting an css style for the element "canvas" with the code below (this can be done with an external css file):

   <head>
        <style type="text/css">
            canvas {
                vertical-align: top;
            }
        </style>
    </head>

Thanks you all for your help!

Reply all

Reply to author

Forward