Strange + and - characters on zoom controls

[csmale]

Don't know if it is just me, but on the "+" and "-" zoom controls there seems to be a small "+"/"-" text character overlaid on the graphic, which (if you look closely) gains an underline on a mouseover.

[tomhughes]

You're quite right - it is because the zoom controls are generated as links with +/- as the text which are then supposed to be styled to generate the actual buttons.

But @jfirebaugh used a different style that uses images instead, but the text is still there, and I don't see any way of getting rid of it just with styling...

[tomhughes]

So it was OK until I updated zoomslider to fix IE8 which also pulled in kartena/Leaflet.zoomslider@40adeee which assigns the text to those links and causes this breakage.

What I'm unclear about is how zoomslider was generating it's default icons before that...

[jfirebaugh]

One possible fix is:

.leaflet-control-zoomslider-in,
.leaflet-control-zoomslider-out {
  text-indent: -9999px;
}

[tomhughes]

I've pushed 5edb4bf as a workaround for now.

[jfirebaugh]

Prior to kartena/Leaflet.zoomslider@fcd9662 the zoomslider was using pngs for +/-.

[tomhughes]

Pushed 4a26107 based on @jfirebaugh's text-indent idea.

[smsm1]

Actually there is a better method than using the -9999px hack, which causes performance issues as the browser has to draw a box that far off screen.

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

take from:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ which has the explanation of why you should avoid the -9999px hack.

[smsm1]

http://37signals.com/svn/posts/3126-another-9999px is another explanation and slight variation.

[ghost]

Hi all! I'm the maintainer of Leaflet.zoomslider at Kartena.
Because of some awesome patches from Bryan Shelton I've started to update the zoomslider for the coming 0.5 release, these changes are all happening in master. I'd recommend to follow the new 0.4 branch for now, which is tracking Leaflet 0.4.x.
This hasn't really been announced in any serious way, sorry about that. I'll add a note about this in README.md.

[tomhughes]

The extra complication is that the version of leaflet we're using isn't really 0.4 or 0.5 at the moment, but rather some random commit from the master branch ;-)

[ghost]

:) I see. Been there.
But ok, I think either adding an option to not set the +/- as chars or to do something like this:

if(link.style.background.match("url(") == null) { // or null, undefined or whatever
link.innerHtml = plusOrMinus;
} 

...would be the correct fix.

[tyrasd]

The modified workaround introduced in 3d40181 doesn't seem to fix this properly (Opera, Chrome still render the +/- icons). This is because it doesn't really make sense to use text-indent with a percentage value when the containing block does have a width of 0 (see specs).

But, as we already know the width of the object in question, one could simply use that fixed value text-indent: 26px. Also, white-space: nowrap is not needed, when the text to hide doesn't contain any whitespace.

[mattiasb]

I'll probably implement the option later today, meanwhile if you have a suggestion for a name... :)

[ghost]

Merged a fix for this now that moves the +/- symbols into the CSS instead (where it is more easily overridable).