Why does my scalebar appear to look different with the same CSS applied to another similar looking app?
4205
1
01-09-2015 07:29 AM
by
I have three apps that I am creating as templates side by side. In my gisWeb app, my scalebar looks like this:
In both my gisTemplate app and my gisMobile app they look like this: 
And I don't know how I got this look. All three apps use the same JavaScript and the same CSS. I have linked to the app versions that are on github. They are pretty small right now. Just to demo that the code is the same, here is the JavaScript and CSS for each:
gisWeb
// scalebar Begin
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
// scalebar End/* Scalebar */ /* Used CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/ */ .esriScalebarLine, .esriScalebarMetricLine { background: rgb(247,247,247); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border-width:thin; } .esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv { text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
gisMobile
// scalebar Begin
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
// scalebar End/* Scalebar */ /* Used CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/ */ .esriScalebarLine, .esriScalebarMetricLine { background: rgb(247,247,247); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border-width:thin; } .esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv { text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
gisTemplate
// scalebar Begin
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
// scalebar End/* Scalebar */ /* Used CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/ */ .esriScalebarLine, .esriScalebarMetricLine { background: rgb(247,247,247); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border-width:thin; } .esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv { text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
I'm stuck on this one. Any ideas?
by
