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

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"));
			});
		}
	});
}

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 */

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; }

[prototype] adding input:focus functionality to ie

Event.observe(window, 'load', function() { 
var fields = $$("input"); 
for (var i = 0; i fields[i].onfocus = function() {this.className += ' focused';} 
fields[i].onblur = function() {this.className = this.className.replace('focused', '');} 
} 
}); 

// in css, paste

// input:focus, /* works in FF without javascript */ 

// input.focused /* used by js */ 

// { background-color: #f7cd72; } 

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 */
}

1kb ie 6 png fix hack

create a 1x1 'clear.gif' image

var clear="images/clear.gif" //path to clear.gif


pngfix=function(){var els=document.getElementsByTagName('*');var i_p=/\.png/i;var i=els.length;while (i-- >0){var el=els[i];var es=el.style;if(el.src&&el.src.match(i_p)&&es.filter==''){el.height = el.height;el.width = el.width;es.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";el.src = clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(i_p)){var path=elb.split('"');var rep=(el.currentStyle.backgroundRepeat=='no-repeat')?'crop':'scale';es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage="none";}}if (el.currentStyle.position!='absolute' && !es.filter && !el.tagName.match(/(body|html|script)/gi)) es.position="relative";if (es.filter&&el.currentStyle.position=="relative") es.position="static";}}
window.attachEvent('onload',pngfix);

another min-height hack

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

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