skip to content

StormDetector.com

Mitch Stokely | http://www.stormdetector.com | mitchstokely@gmail.com | phone: on request

---

---

StormDetector Mobile

---

<< Back Home

---

LitePacific CSS Hack

(Affects Internet Explorer 6 and 7 and Safari!)

You may have looked at my website and seen my Stokely Safari Hack which affects all Safari browsers, including versions 1.2, 1.3 and now 2.0!. The powerful thing about that hack is that it not only remains a powerful and reliable hack for fixing Safari Mac browser issues in your website style sheets, but also has some built in fixes for other browsers as well, like IE5 and 6, or older Mozilla Gecko browsers like older Firefox browsers or Netscape 6.

This week (08/11/06) I downloaded the Internet Explorer 7 Beta 3 browser for testing purposes for the first time. I had read that the browser had not only fixed some issues inInternet Explorer 6 which had been problems in the browser, but also removed many of the hacks developers had been used to using. The amazing thing was, upon testing the browser in my websites, I noticed that the expanding box model, as well as the min-height issues seemd to have been addressed in this release, which was exciting news, to say the least. Along with that they had supposedly fixed the "Star Hack" (* html #rule {...}) and some others which web people had used to fix those issues in IE 6, which meant to me, any remaining errors in the browser any web developer may have targeted using that hack, were now going to reappear in IE 7! Not good :o(

After weeding through allot of "misinformation" online, I decided to see what the facts were visually in the browser. When I ran a test of the Stokely Safari Hack in Internet Explorer 7, I was amazed to see that suddenly my footers in my sites had floated up to the content areaand the content was "overflowing" under the footers and down the page. Interesting effect, as it meant that the height expanding box model MUST have bneen fixed and even though the error was bothersome, to me, it was a good sign. Did Microsoft get the box model fixed? I think so. But the funny thing to me was, if they were not reading the old Star Hacks I was using, but showing an error in height usage, what rule was IE 7 reading in my websites? Why wasnt it reading the standard rules shared by Mozilla, Netscape, Opera, and others in my style sheets? It turns out it was STILL READING THE STOKELY SAFARI HACK I had added. Wow!!! Cool. What did this mean? It meant that I now had a hack that STILL WORKED in Internet Explorer 7!

So, to get to the point...if....and I say....if....you still have a bug that plagues the IE 7, 6 or 5 series browsers as a group, Ive developed a new hack for you that will not only allow you to target IE 5 and 6, but also 7, and each individually as you need. If you need to trigger a rule for IE 7 and not 6, this will do it, Or if you need to affect 6 but not 7 or 5, this will do it!. Its up to you to use the code creatively in your sites! Good Luck! - Mitchell Stokely (Texas Software Engineer - USA)

A simple summary of the hack for reference is as follows:
Create a single style which uses misplaced attribute selector as shown below. Wrap a series of "Mac IE only hidden" comments characters around this rule to protect it from old IE 5 for Macintosh, to be safe. The format for the style selector is as follows: html*#name {...}
Inside you will wrap a misplaced attribute selector inside and around three style sheet properties. Add your first property on the first line after the "[". The first one that falls after the "[" applies only to older Mozilla Gecko engine agents (< 1.01) when you are done with the whole rule, but initially should be read by most IE browsers as well. You will have to test to see which ones. That will affect older Netscape browser like versions 5 and 6. See my "Blue Rider" CSS hack in this website for more details. Skip a line for the next property, and that is the property that affects Safari for MAC. Using tests recently done on tha agent, it still holds up in the newest Safari 2.0, which is great! Skip another line, then add in the closing attribute selector character "]" and then put a rule that follows this character. That should affect IE 5-7, but is actually used here for Internet Explorer 7 ONLY! One wrod of caution....if you add more rules in any of the above lines, could cause unpredictable results, as in early testing, IE 7 was able to see additional properties in this strcuture added AFTER the Safari property, but before the ending "]". Whats really interesting is when you do that, IE 7 was the only IE browser to read those rules, which are shared with safari only, but didnt read the first safari property in the list.
Finally, close out this style by creating a dummy class and then comments, which makes sure IE for Mac and some others dont keep reading rules after it, and attribute selectors are correctly closed. Test this to make sure no browsers are reading additional styles inside the next set in your CSS page. Finally add a traditional Star Hack rule for IE 5-6, but hidden from IE 5 for Mac. This is NOT read by IE 7 as they removed the Star Hack specifically in the browser. This is great news as it means that IE 7 can be targeted with my hack, but the old Star Hack can work for the next several years fixing display issues for old IE 6, which will be around for some time! Thats it!

Now for the visual browser test...(please send me your findings if you see results that adversly affect other browsers. Thanks!)

LitePacific Hack Test : What color text do you see below?

THE LITEPACIFIC CSS HACK - The Style Sheet Hack:
#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:black;
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}

/*\*/
* html #test1 {
color:green;
}
/*end*/


THE LITEPACIFIC CSS HACK - EXPLAINED BELOW:

#test1 {
font-weight:bold;
font-size:14px;
color:orange;/*IE 5 for PC only*/
voice-family:"\"}\"";
voice-family:inherit;
color:black;/*all non-IE 5 browsers*/
}
/*end*/

/*\*/
html*#test1 {
[color:red;/*required by Safari so that [] is correctly begun. associated
with the property, yet hiding it. seen by IE6*/
color:blue;/*these are seen by IE6 and Safari but hidden from Netscape6-7*/
]color:green;/*Reset IE7 properties and hide from Safari. required by Safari
so that [] is correctly ended. associated with the property, yet hiding it.
seen by IE7*/
}/**/
.dummyend[id]{clear:both/*end hack using dummy attribute selector for IE5 mac*/}

/*The above rule is hidden from IE for MAC, and read only by Netscape 6-7 and
IE6 for PC, and Safari on MAC, in general.*/
/*Netscape reads rule but does not read any properties set within [], probably
because it sees these as part of an attribute selector. Those will be hidden*/
/*IE 7 on PC will correctly read all rules as it will ignore many characters
before a property*/
/*Safari for MAC sees the each [] as a character and not part of a selector,
if one falls one falls before a property. These cause the property name
following the character to not be read, but next line with property is*/
/*use of [] will break all css selectors following the rule, if all are not
closed, as Mozilla-Netscape read the [] as part of a selector rule, so make
sure they are all closed*/

/*\*/
* html #test1 {
color:green;/*reapply fix that affects IE 5-6 only here. IE for Mac and IE 7
for PC are not affected here, which means purple above should work only in
IE 7 above!*/
}
/**/