CSS IE7 IE6 FF Hacks and trics
Posted by admin on January 03 2008 13:36:22

Targeting Internet Explorer 7

There are at least 6 ways to target IE7 only.


To see all these Hacks in action, open up IE7 Only CSS Hacks: Examples in your browser. The text will appear purple in IE7 and black/shades of grey in all other browsers

The Star (*) Hack

html>body .myClass { *color: #ff0033; } where color could be any attribute

Method:

The conditional IE comment

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

Method:

The LANG filter

<body lang="en"> . . . </body>
(In XHTML, body should have the language attribute to make this work )

(then, you declare the IE7 and old browser value)

#item {background: red;} html>body {background: blue;}   *:lang(en) #item{background: green;}

This is read by FF & Opera. remember pseudo classes hold no value in the
cascade, so either put ';!important", or declare this value second…. declare the value second since you shouldn’t use important!

#item:empty {background: green !important} 

This is read by Safari supposedly, but i have yet to test.

Triple X Hack

From Brothercake, this hack takes advantage of IE7 support for the substring matching attribute selector, which is an improvement over IE6, and it’s continued lack of lack of support for the negation pseudo-class. And, since Opera 9 doesn’t support the negation pseudo-class, there’s an added CSS3 media query to negate the style for Opera 9.

p.test { color:red; } p[id$="test"] { color:green; } p[id$="test"]:not([class="xxx"]) { color:red; } @media all and (min-width:0px) { p[id$="test"] { color:red; } } 

<p id="text" class="test">This paragraph needs to have both a class and id to be targeted by this filter.</p>

Note

The Case Sensitive Attribute Hack

The quirk in IE7’s support of substring matching attribute selectors can be exploited.  IE7 employs some case-sensitivity to the value of an attribute whether or not the attribute type requires case sensitivity. While it makes sense to compare id values in a case senstive manner, attribute values for HTML are case insensitive. The XHTML specifications state that element and attribute names must be lower case, but it does not say anything about attribute values.  In this case, img[align~=LEFT] will match align="LEFT" but not match align="left" but img[align~=left] will match align="left" and align="LEFT".

Code:

p[align~=left]{color: #0000ff;} p[align~=LEFT]{color: #ff0000;}  <p align="left">This will blue in IE7, red in Firefox and black in IE6</p> 

This will blue in IE7, red in Firefox and black in IE6

Method:

Rationale:

Notes

Aimsterloo Hack

The :first-child pseudo-element works in most cases in IE7 except when the first child is a comment. IE7 treats the comment as the first child, even though CSS specifications state that :first-child should apply to elements, and comments are not elements. Note that there is a space between the selector and the colon. 

div :first-child {font-weight: bold;} will not match the paragraph in:
<div class="happy">
<!–comment –>
<p>Hi</p>
</div>

The trick to making this hack useful site wide is to add a useless comment immediately following the opening <body> tag.

p.fchild {color: #000000;}
html>body p.fchild {
color: #cc33cc;}
body :first-child p.fchild {color: #666666;}

<body><!– useless comment –><div><p class="fchild">The div should be the first child of the body, but in IE it isn’t…

Notes

Notes:


In ecommerce web hosting is much more important that what layman knows about internet marketing. Small things, like having wireless internet setup in your office can make a difference. Having computers is not just enough. There is more to domain names than free backup facilities.