Thursday, November 10, 2011

Friends don't let friends use Internet Explorer

How I lost an hour yesterday...

I have a slider widget.  It's made up of several divs, and looks like this:

slider

The slider “thumb” – the part you can drag to adjust the value, is in its own div:


<div style="width: 16px; height: 16px; top: -4px; left: 20px" id="sliderThumb" class="thumb" onmousedown="dragStart(event);"></div>

I used a combination of CSSDesk and CSS3 Generator to build the CSS for the control.

The CSS for the thumb looks like this:

.sliderThumb 
{    
 position: relative;     
 -moz-border-radius: 5px;     
 -webkit-border-radius: 5px;     
 border-radius: 5px;         
 background-image: -moz-linear-gradient(top, #4677AC, #223A54);
 background-image: -webkit-gradient(linear, center top, center bottom, from(#4677AC), to(#223A54));
 background-image: -o-linear-gradient(top, #4677AC, #223A54);
 background-image: linear-gradient(top, #4677AC, #223A54);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4677AC', endColorstr='#223A54');
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4677AC', endColorstr='#223A54')"; 
 -moz-background-clip: padding-box; 
 -webkit-background-clip: padding-box; 
 background-clip: padding-box; 
}

The problem I ran into is that Internet Explorer wasn't catching the onmousedown.  So I couldn't drag the slider thumb.  Everything worked great in Firefox 8, Chrome 15 and Safari 5.

After an hour on The Google, I found a tip.  Setting the background image to none for IE would allow the mouse event through.  For IE, I added:

background-image:url(/none);

and everything worked as expected.

Please, if you have the choice, don't use Internet Explorer.

2 comments:

  1. If FireFox 8 is more stable than 6.5-7.1 then I will try to accommodate your request.

    ReplyDelete
  2. I found Firefox 8 to be pretty quick, but it crashed on me a few times when debugging in Firebug. I'll be debugging in Chrome for a while now...

    ReplyDelete