Slight mis-alignment at bl.ocks.org
9 views
Skip to first unread message
John Delacour
May 22, 2013, 8:05:52 PM5/22/13
to d3...@googlegroups.com
On this page:
<http://bl.ocks.org/JohnDelacour/5629989>
the degrees read-out is not aligned with the knob on the slider,
but if I view it raw (‘Open in a new window’) it is aligned
as it should be.
JD
Jason Davies
May 23, 2013, 4:49:39 AM5/23/13
to d3...@googlegroups.com
container, which is the <body> element. By default, most browsers give
<body> a margin (8px in Chrome at the moment).
However, bl.ocks.org sets these margins to zero (via marginwidth and
marginheight attributes on the <iframe>), which has the effect of moving
everything up and to the left by 8px, when compared with the "raw"
non-iframe version. The absolutely positioned div does not move, which
means it is 8px too low.
One fix would be to set a body margin of zero in your Gist via CSS:
body { margin: 0; }
And change 103 to 95 for your degrees text offset.
You could also add a wrapper <div> and position relative to that
instead.
Personally I would prefer to keep everything in SVG where possible, so
you could use an SVG <text> element and position this relative to the
other SVG elements comprising the slider. This is better because the
degrees text is closely coupled to the slider, so it makes sense for
them to appear close together in the DOM so that they can all be
positioned simultaneously.
--
Jason Davies, http://www.jasondavies.com/
Reply all
Reply to author
Forward
0 new messages