Scale Bar Height difference between Mozilla & Internet Explorer

[AaronConnolly]

I've noticed the size of the scale bar in both IE and Firefox is different. Any ideas why?

In the attached images notice how ie-9-scale-bar.png is much  taller than ffx-scale-bar.png. The same code sets the scale bar up in both cases:

esriConfig.defaults.map.slider = { right: "20px", top: "70px", height: "200px" };

I think this might be deprecated, but even the most recent sample still demonstrates this inconsistency. If you open this sample in Firefox and Internet Explorer, the scale bar is taller in size than the one in Firefox. Why is this happening and can we correct it?

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_scalebar.html

[Anonymous User]

Original User: Jian

Do you mean scalebar or zoom slider?

[AaronConnolly]

Zoom Slider ....

[AaronConnolly]

Anyone got any ideas on this? Is this an IE rendering issue? CSS layout issue?

[Anonymous User]

Original User: swingley

Likely CSS. What have you tried?

[AaronConnolly]

Just this:

esriConfig.defaults.map.slider = { right: "20px", top: "70px", height: "200px" };

Also, I style the + and - buttons differently, but I don't scale the zoom slider level notches at all. There's an ESRI sample post somewhere that illustrates how to change the + / - buttons.

[Anonymous User]

Original User: swingley

You'll probably want to dig into styling the slider correctly, and perhaps conditionally depending on whether or not your in IE.

For future reference, use esri.config, not esriConfig.

[JatinPatel]

Has anyone found solution to this yet? I am having the same issue.

[Anonymous User]

Original User: Schnoerkel

I think the IE interpret the height wrong ...if I give the FF,Chrome etc. a height of 150px the IE needs 100px...the sollution i've done is a simple browser check:

if you want to use dojo:

if(dojo.isIE)
{
 esri.config.defaults.map.slider = { left:"45px", top:"100px", width:null, height:"100px" };
}else{
 esri.config.defaults.map.slider = { left:"45px", top:"100px", width:null, height:"150px" };
}

if you want to use jquery:

if($.browser.msie) 
{
 esri.config.defaults.map.slider = { left:"45px", top:"100px", width:null, height:"100px" };
}else{
 esri.config.defaults.map.slider = { left:"45px", top:"100px", width:null, height:"150px" };
}