Integration javascript

Hi everybody,

I try to integrate a module to display a checkers game in my page, but the board is offset:

<head>
	<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
	<link href='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/jquery.contextMenu.css' rel='stylesheet' type='text/css'>
	<link href='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/themes/hv.jquery.view.css' rel='stylesheet' type='text/css'>  
	
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
	<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' type='text/javascript'></script>
	<script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.easing.1.3_min.js' type='text/javascript'></script>
	<script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/ui/jquery.contextMenu_min_2.3.0.js' type='text/javascript'></script>
	<script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dcoerterp_view-2.3.8.js' type='text/javascript'> </script>
	<script src='http://toernooibase.kndb.nl/applet/oerterpapplet2.0/js/dambord.js' type='text/javascript'> </script>

	<script type='text/javascript'>
	$(function() {
		divs2applet();
	});
	</script>
	</head>

and

<body>
	<div class='applet'>
		[Event "Nationale Clubcompetitie KNDB 2013/2014"]
		[Site ""]
		[White "Dieter van Gortel"]
		[Black "Henk Kleinrensink"]
		[Result "0-2"]
		[GameType "20"]
		[Round "8"]
		[Date "2014.01.11"]
		[WhiteTime ""]
		[BlackTime ""]
		[WhiteUrl "http://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=1069"]
		[BlackUrl "http://toernooibase.kndb.nl/opvraag/liddetailp.php?SpId=3073"]
		[WhitePhotoUrl "http://toernooibase.kndb.nl/Afbeeldingen/Spelers/1069.jpg"]
		[BlackPhotoUrl "http://toernooibase.kndb.nl/Afbeeldingen/Spelers/3073.jpg"]
		[WhiteFlagUrl "http://toernooibase.kndb.nl/Clublogos/CEMA - De Vaste Zet Geleen.gif"]
		[BlackFlagUrl "http://toernooibase.kndb.nl/Clublogos/WSDV Wageningen.gif"]
		[WhiteRating "1026"]
		[BlackRating "1202"] 
		1. 34-30 20-25 
	</div>
	</body>

44

instead of

38

After research, it seems to me that comes from the main.css :

  • {
    -webkit-box-sizing: border-box;
    ** box-sizing: border-box;**
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    }

Can you help me :persevere: ?
I’m very novice, I’m don’t know how to fix this …

Thanks a lot.
Husko

As much as I can understand by looking at snapshots provided, it is due to offset/position property of container of element which hold checker board.

Try inspecting the CSS property in browser, and try giving it appropriate properties and values.
Most probably -

position: absolute !important;
top: 20px !important;
left: 20px !important;

You can ignore !important if not required.

Thanks a lot for your help !
I searched in the css of the checker board and I found what didn’t work !