you are here: codestackercodes [RSS] → tag ie [RSS]

detecting ie version with jquery

var IE = $.browser.msie, IEv = $.browser.version;

if (IE) { //could be improved

    var IE6 = parseInt(IEv) == 6,
        IE7 = parseInt(IEv) == 7, 
        IE8 = parseInt(IEv) == 8, 
        IE9 = parseInt(IEv) == 9;
}

//Usage:


if (IE) {
    //Do something for all IE versions

}
if (IE7) {
    //Do stuff just for IE7

}
if (IE7 || IE8) {
    //Do stuff just for IE7 or IE8

}
if (!IE6) {
    //Do something if not IE6

}

placeholder attribute for inputs in IE

require jquery and modernizer

if(!Modernizr.input.placeholder){
	$("input").each(function(){
		if($(this).val()=="" && $(this).attr("placeholder")!=""){
			$(this).val($(this).attr("placeholder"));
			$(this).focus(function(){
				if($(this).val()==$(this).attr("placeholder")) $(this).val("");
			});
			$(this).blur(function(){
				if($(this).val()=="") $(this).val($(this).attr("placeholder"));
			});
		}
	});
}

color scrollbars for ie 5.5

body {
scrollbar-face-color: #hex; 
scrollbar-shadow-color: #hex; 
scrollbar-highlight-color: #hex; 
scrollbar-3dlight-color: #hex; 
scrollbar-darkshadow-color: #hex; 
scrollbar-track-color: #hex; 
scrollbar-arrow-color: #hex;
}

ie 6 and 7 selectors hack

* html #selector {property:value;} /* Only IE6 and lower will see this */
*+html #selector {property:value;} /* Only IE7 will see this */

paperclip ie validation

validates_attachment_content_type :image,
  :content_type => [
    'image/jpeg',
    'image/pjpeg', # for progressive jpeg (IE mine-type for regular jpeg) 

    'image/png',
    'image/x-png', # IE mine-type for PNG

    'image/gif'
]

hover for ie 6

/* IE6 - pseudo class :hover */ 
$(document).ready(function(){ 
	if(jQuery.browser.msie && jQuery.browser.version<7){ 
		$('[class*="bla"]').hover( 
		function () { 
			$(this).addClass('hover'); 
		}, 
		function () { 
			$(this).removeClass('hover'); 
		} 
		); 
	} 
});

fixing the ridiculous auto-padding in ie (win) submit buttons

ie sux!

input { overflow: visible; }

detect ie function

function isIE() {
  return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}

ie conditional hack

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

# Embedded CSS
<!--[if IE]>
  <style type="text/css">
    #container {font-family: arial,verdana,sans-serif,tahoma;}
  </style>
<![endif]-->

# The opposite technique, targeting only NON-IE browsers:
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

# Target specific versions of IE
# IE 7 ONLY:
<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

# IE 6 ONLY:
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

# IE 5 ONLY:
<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->

# IE 5.5 ONLY:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->

# VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)
<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

another ie 6 hack

p {			
	background: green !important; /* Major browsers other than IE 6 and below respect the importance immediately */
	background: red; /* IE 6 and below use this value instead, even though the above was marked as important */
}

another min-height hack

http://www.dustindiaz.com/min-height-fast-hack/

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}
Displaying all 11 Code