Kathirvel K

Posts Tagged ‘CSS hacks

We can write CSS hacks using media queries also,

/* IE6/7 uses media, */
@media, {
.dude { color: green; }
.gal { color: red; }
}

/* IE8 uses */
@media all {
.dude { color: brown; }
.gal { color: orange; }
}

/* IE9 uses \9 */
@media all and (monochrome:0) {
.dude { color: yellow\9; }
.gal { color: blue\9; }
}

Advertisements
Tags: ,

Default paragraphs in this page have yellow background. In any of the following test cases a blue background is set with a special (hack) rule. When the background is blue, the hack is applied.
Note: “All” == IE5+/Win, Op6+, Moz, Saf

IE6- (and IE7+ quirks) only
/*\*/ * html selector { property: value; } /**/

IE5.5- only
selector { property: value; p\roperty: normal-value; }

IE7 standard only
*:first-child+html selector { property: value; }

All except IE6- and IE7+ quirks
html>body selector { property: value; }

IE6+ quirks and IE5 (= all IE/Win quirks) only
* html selector { property /**/: value; }

All except IE6 standards
selector { property /**/: value; }

All except IE5.0
selector { property/**/: value; }

All except IE5.5
selector { property: /**/value; }

Internet Explorer conditionnal comments

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

You can also target only a certain version of IE:
<!--[if IE6]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer hacks

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

Targeting Opera only

@media all and (min-width: 0px){
    .classname {}
}

Targeting Safari only

html:lang(en)>body  .classname {}

Targeting Google Chrome only

body:nth-of-type(1) p{
   color: #333333;
}

IE6 crash

<style>*{position:relative}</style><table><input></table>

tr.traGraph {
background-image: url(departments/mis/web/trafficStats/images/traBkg.gif);
background-repeat: no-repeat;
background-position: left;
height: 400px;
}

td.traPgGraph {
background-position: 20% 0%;
}

Simply give the TR a “position: relative” attribute and then give the TD a “background-image: none” attribute.

http://snook.ca/archives/html_and_css/applying_a_back/

http://www.mynameisal.com/wordpress/?p=82

Tags: ,

IE 6 and below

* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Website:
http://eisabainyo.net/weblog/2007/04/18/css-hacks-for-ie-7-ie-6-opera-etc/

Simple Example

<html>
<head>
<style type="text/css" >
.style1{ background:green; } /* FF, Chrome */
.style1{ background/*\**/: blue\9 }
 *+html  .style1{ background:red; }  /* or *:first-child+html for IE 7 */

*html .style1{ background: yellow; } /* IE 6 */</style>
</head>
<body>
<div class="style1"><h3> Green in FF, Chrome </h3><br />
<h3> Blue in IE8 </h3><br />
<h3> Red in IE7 </h3><br />
<h3> Yellow in IE6 </h3><br /></div>
</body></html>

Conditional comments:

Positive
<!--[if condition]> HTML <![endif]-->
Negative
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

condition is one of the following:

IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version

version is the version of Internet Explorer, typically 55.56, or 7

Website:
http://www.webdevout.net/css-hacks

Tags: