Horizontal line is not positioned correctly #87
Description
I have a simple footer. Some text with some links. If I have help pointing at these links, however the horizontal white line is failing.
It is also failing if placed on an div that wraps an image.
See the issue:
Here is my simple html.
Note: I tried to apply https://github.com/heelhook/chardin.js/pull/65 (which I guess is the same as https://github.com/heelhook/chardin.js/pull/68 too). It helped the vertical position but not the horizontal position.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="chardinjs.css" />
<script>
$(function() {
$("body").chardinJs("toggle");
});
</script>
<script src="./chardin.js"></script>
</head>
<body>
<div>
<div style="width: 99%; text-align: center;">
<div style="display: inline-block" data-intro="The div around a 32x32 image" data-position="left"><img src="http://www.rhyous.com/wp-content/plugins/social-media-widget/images/default/32/facebook.png" /></div>
</div>
</div>
<div id="footer" style="text-align: center">
<div>
<div><hr /></div>
<div style="width: 800px; margin: 0 auto;">
<p style="font-size: .8em;">For license issues, contact <a href="mailto:[email protected]" data-intro="The tells you who to contact for license issues." data-position="left">Licensing</a>.
For support issues contact <a href="http://www.landesk.com/support/contact" data-intro="The tells you who to contact for support issues." data-position="bottom">Support</a>.
Send website feedback to <a href="mailto:[email protected]" data-intro="This tells you where to email website " data-position="right">feedback</a>.
</div>
<div>
<hr />
</div>
</div>
</div>
</body>
</html>