I’m constantly finding myself needing to reference this for colleagues or for myself so it’s only appropriate to add it to the blog. If you’re working with Internet Explorer on a regular basis and let’s be honest, if you’re in web design, you will be.
Here are the supported conditional mark ups for each version of IE:
height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */
We had an unusual error come up on one of our sites where a promotional ad group was only showing 2 ads when it should have been displaying 3. It only happened in IE 6 and took us a while to figure out so I figured I’d share the information we discovered. If you look at the code below and instantly know what is incorrect and why, well my hat is off to you. For those of you like me who didn’t readily see what was wrong and why, put on your Henschel Deerstalker hat and put some tobacco in your pipe. This is pretty cool.
function doSomething(){
...
for(i=1;i<somevalue ;i++) {
alert(arrayVar[i]);
}
...
}Internet Exploder 6 was reporting the variable “i” as going from 1, to 3 and then exiting the loop. No where in the code was there an i++ or any kind of increment that should have increased it’s value. However, there it was, being increased for no apparent reason. I found a missing “;” and a even tried redoing a few calls from $ mootool id calls to getByElementId with no luck. A co-worker and myself then had an idea that possibly the variable was being shared and because it wasn’t being declared that it was actually the same pointer in memory as another similar named variable “i”. We changed the code to include the declaration as below and tada, working code without shared memory:
function doSomething(){
...
for(var i=1;i<somevalue ;i++) {
alert(arrayVar[i]);
}
...
}As someone who’s constantly thinking about security, I wonder what kind of memory hacks you could put into place with this little tid-bit of knowledge. Obviously no-one should be using IE 6, but for those “wonderful people” who are, what kind of trouble can they get into?
After looking around the internet for a while I finally came across these 3 solutions. Since Blackberry doesn’t have jQuery (we currently use an older version of mootools) and I needed a quick fix I ended up going with the behavior option. However, users need to have their internet security settings on “medium-low” for IE 6 to render it properly. It’s not the perfect solution but then I suppose there really isn’t one for IE 6. I tried writing a solution within mootools for the problem but in the 5 minutes I spent on it, I noticed it would have overlapped other form elements and I wasn’t going to spend extra time messing with z-index.
Here’s my quick mock up code for mootools if anyone is curious:
for(var i=0;i< $$('select').length;i++) {
$$('select')[i].addEvent('mouseenter', function () {
this.setProperty('rel',this.getStyle('width'));
this.setStyle('width','auto');
});
$$('select')[i].addEvent('mouseleave', function () {
this.setStyle('width',this.getProperty('rel'));
});
}And here was the behavior solution:
<!--[if IE]>
<mce :style type="text/css">< !
select {
behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0);
}
-->
<script src="dropdown_menu_hack.js" type="text/javascript"><!--mce:0--></script>
< ![endif]-->
</mce>