Horizontal line is not positioned correctly
rhyous opened this issue · comments
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="https://github.com/pablof7z/chardin.js/issues/chardinjs.css" target="_blank" rel="nofollow" />
<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:operations@landesk.com" 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:LicensingPortal@landesk.com" data-intro="This tells you where to email website " data-position="right">feedback</a>.
</div>
<div>
<hr />
</div>
</div>
</div>
</body>
</html>
FYI, this is also happening in critical areas other than my footer. The 'critical areas' examples were more difficult to add to the single page example as it is all knockout driven and has tons of css layout.
interesting. In all three instances the style 'left' or 'right' needs to be -176px.
We have elements of sizes 32x32, 51x14, 46x14. Why do they all needs to -176. I thought maybe that was a minimum value, but it wasn't.
For the facebook image:
.chardinjs-tooltip
top: -2px; <-- Should be 6px.
left: -133px; <-- Should be -176px
Somewhere, we should add 8 to the top. But not always. So when?
Somewhere, we should subtract 43 from the left. But not always. So when? And it isn't always 43. So how is 43 calculated?
For the first link in the footer
For the facebook image:
.chardinjs-tooltip
top: -11px; <-- Correct this time
left: -153px; <-- Should be -176px
Somewhere, we should subtract 22 from the left. But not always. So when? And it isn't always 22. So how is 26 calculated?
If the width is 75 or greater, it doesn't have an issue. My image is 32. I need to subtract 43 more. 32 and 43 is 75.
For the link, 75 holds true as well.
However, if the text isn't max 200 (say it is only 195) then the 75 goes down to 70. I'm starting to find a pattern here.
I have branched the code. I changed the javascript and everything appears to be working now.
I guess I have to change the coffee file, though.