<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Tag Archive for ie7
IE7 only star html hack
/* the following rules apply only to IE7 */ *+html .foo{ }
IE fix for ugly padding on left and right of submit buttons
<!--[if lt IE 8]>
<style>
/* IE6 */
*html input.button{
overflow: visible; /* remove padding from left/right */
width:0; /*remove the remaining space in IE6*/
}
/* IE7 */
*:first-child+html input.button{
overflow: visible; /* remove padding from left/right */
width:auto !important;
}
</style>
<![endif]-->
<input class="button" type="submit" value="IE567 sux" />
Add http header to force IE8 to render in IE7 mode (PHP-Version)
if (strpos($_SERVER['HTTP_USER_AGENT'],"MSIE 8")) {header("X-UA-Compatible: IE=7");}
if (strpos($_SERVER['HTTP_USER_AGENT'],"MSIE 8")) {header("X-UA-Compatible: IE=EmulateIE7");}
Handle Preloaders in ie7
this.addEventListener("enterFrame",onEnterFrame);
function onEnterFrame(e:Event) {
loadbar.width = (this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal)*200;
if (this.loaderInfo.bytesLoaded == this.loaderInfo.bytesTotal) {
gotoAndPlay(2);
this.removeEventListener("enterFrame", onEnterFrame);
}
}
Detect IE6 in javascript
// Internet Explorer 6 var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/; // exactly Internet Explorer 7 var IE7 = false /*@cc_on || @_jscript_version == 5.7 @*/; // at least Internet Explorer 7 var gteIE7 = false /*@cc_on || @_jscript_version >= 5.7 @*/; // any Internet Explorer (thanks to Dean) var isMSIE = /*@cc_on!@*/false;
IE CSS – Conditional comments
<!--[if IE]> According to the conditional comment this is Internet Explorer<br /> <![endif]--> <!--[if IE 5]> According to the conditional comment this is Internet Explorer 5<br /> <![endif]--> <!--[if IE 5.0]> According to the conditional comment this is Internet Explorer 5.0<br /> <![endif]--> <!--[if IE 5.5]> According to the conditional comment this is Internet Explorer 5.5<br /> <![endif]--> <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6<br /> <![endif]--> <!--[if IE 7]> According to the conditional comment this is Internet Explorer 7<br /> <![endif]--> <!--[if gte IE 5]> According to the conditional comment this is Internet Explorer 5 and up<br /> <![endif]--> <!--[if lt IE 6]> According to the conditional comment this is Internet Explorer lower than 6<br /> <![endif]--> <!--[if lte IE 5.5]> According to the conditional comment this is Internet Explorer lower or equal to 5.5<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is Internet Explorer greater than 6<br /> <![endif]-->
Conditional HTML for IE6 and IE7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- IE 5, 5.5, 6 CSS --> <!--[if lte IE 6]> <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" charset="utf-8" /> <![endif]--> <!-- IE 7 CSS --> <!--[if gte IE 7]> <link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" charset="utf-8" /> <![endif]--> </head> <body> </body> </html>
Image-less Dropshadow
#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}
#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}
#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}
#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}
.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}
#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}
.o1 {opacity: .5;filter: alpha(opacity=50);}
.o2 {opacity: .4;filter: alpha(opacity=40);}
.o3 {opacity: .3;filter: alpha(opacity=30);}
.o4 {opacity: .20;filter: alpha(opacity=20);}
.o5 {opacity: .10;filter: alpha(opacity=10);}
/* For connecing the shadow in 2 corners */
.mv1 {margin-top: 0px;padding-bottom: 7px;}
.mv2 {margin-top: 1px;padding-bottom: 5px;}
.mv3 {margin-top: 2px;padding-bottom: 3px;}
.mv4 {margin-top: 3px;padding-bottom: 1px;}
.mv5 {margin-top: 4px;padding-bottom: 0px;}
.m1 {margin-left: 1px;padding-right: 8px;}
.m2 {margin-left: 2px;padding-right: 6px;}
.m3 {margin-left: 3px;padding-right: 4px;}
.m4 {margin-left: 4px;padding-right: 2px;}
.m5 {margin-left: 5px;padding-right: 0px;}
/*
ds = dropshadow
ch = child
pa = parent
o = opacity
m = margin
mv = margin vertical
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css" media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>
How to set IE8 in previous (IE7, IE5) rendering mode for backwards compatibility
/* -- send as http header too -- */
// in PHP
header('X-UA-Compatible:IE=7');
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=8" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<!-- Choose IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>