GiantIsland Logo

ImageIsland Logo ImageIsland Website Software Screenshot

Try ImageIsland Professional 3.0! It's Website Photo Gallery Software for your Personal Website.

  • Cross-browser compatible product
  • Manage photos from your website!
  • Supports GIF, PNG, JPEG, and more
  • Creates thumbnails automatically
  • Upload 10 photos at a time
  • Secure login feature, plus user logins
  • Rotate/resize images in your browser
  • Share photos using web page galleries
  • 10 cool photo album templates
  • Drag-and-drop web server installation
  • No database to install ever!
  • Much, much more!

Or, view our  Live Demo IconOnline Live Demo.

CSS Hack for Chrome, Safari, and Internet Explorer

GiantIsland CSS Hack (Affects Internet Explorer 5-8, Google Chrome, and Safari 1-4!)

*** Update (08/25/2009) Safari 4.0+/Google Chrome 2.0+ They have updated and improved the WebKit engine, so our fix now shows those versions as yellow in the test below!
*** Update (05/16/2009) Internet Explorer 8 can now be fixed with this CSS hack, completely separate from versions 5-7!
*** Update (09/02/2008) Google Chrome can now be fixed with this CSS hack, same as Safari!
*** Update (03/28/2008) This fix still works well in the newest Safari version 3.1!

Are you looking for a way to apply Cascading Style Sheet rules to certain browsers, like Google Chrome, Safari for Macintosh, and Internet Explorer 8, 7, 6 and 5? Well, we may have found some relief for you. Read on...

CSS is commonly used to control designs and layouts in modern websites. Because of the growing popularity of "Web Standards" and XHTML/XML markup languages, many sites have begun to migrate older "tag soup" HTML to cleaner CSS-driven web page layouts. With the advantages have come many disadvantages. The main problem seems to be the browsers.

Part of the issue with designing websites around style sheets and Web Standards involves web browsers and how each of them interprets CSS. Trying to get your web pages to display consistently across a number of agents and browsers has turned out to be a daunting task for some. Often times, issues arise between one or more of the more popular browsers in how they interpret rendering of certain styles. This is further complicated by proprietary features, like "quirksmode" and various browser-based "shenanigans", like conditional comments, non-validating parsers, poor XHTML support, JavaScript circus-tricks, patent violation plugin fixes, etc. Because of this fact, your carefully constructed style sheets and html, often times, do not always guarantee consistent display of CSS-based web designs across different browsers. Without reflecting on the various flaws and short-comings in many of these agents, it is sometimes necessary to develop certain "hacks" or fixes that "trick" specific browser parsers and rendering engines into displaying CSS style rules in certain ways. We have developed such a "fix" for your benefit, which we call the "GiantIsland CSS Hack". It is unique in that in can, for now, allow you to target a large variety of modern browsers with certain CSS affects. So you know, we do not favor nor encourage CSS hacks, or the user of hacks. We see them as a neccesary evil, you might say. So use them sparingly, if at all. Again, use this fix at your own risk. In our case, we have used this solution only a few times, but in each case it was truly helpful, and a real lifesaver.

The GiantIsland CSS Hack

The following CSS hack is based on a prior CSS fix called the Stokely Safari Hack, which affected all Safari (v1-3) browsers, including versions 1.2, 1.3, 2.0, 3.0(and even 4 now!). Our developers innovated this fix to address issues in the various browsers related to CSS and layout differences found among Internet Explorer, Safari for Mac, Chrome, and Firefox. (This hack was originally posted at www.stormdetector.com, one of our developer's websites). The powerful thing about this 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, IE6, IE7, IE8 and older Mozilla Gecko browsers like older Firefox browsers or Netscape 6.

It turns out, that this fix or hack also addresses newer IE7 AND IE8, and can be combined with the popular Star Hack for Internet Explorer 5 and 6, to control styles, not only in IE 5 and 6, as well as Safari, but isolate IE 7 and 8 styles as well. What this means, is that the GiantIsland CSS Hack can control styles in 6 different browsers and versions using one style fix!

So, if you still have a bug that plagues the IE7, IE6 or IE5 series browsers as a group, as well as Macintosh Safari and Google Chrome browser, we have developed a new style sheet hack for you that will not only allow you to target IE 5 and 6, but also 7 and 8, as well as Safari as needed in your CSS style sheets. If you need to trigger a rule for IE 7 and not 6, this will do it! Or if you need to affect IE6 but not IE7, IE8, or IE5, this will do it! If you need to fix Safari/Chrome from all Internet Explorer and Firefox agents, this will also work for you! Because Webkit is the engine behind Safari and Chrome, they seem to share much of the same rendering issues, that separate them from FF and IE. So, its up to you to use the code creatively in your sites!

A simple summary of the hack for reference is as follows:

The hack is based on the inability for all the major browsers to interpret attribute selectors ("[]") correctly in CSS. Placing or rather misplacing these is what creates the hack and allows us to control which browsers see which rules in the CSS hack. To use the hack, first 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 IE5 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. Skip down to the next 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-8, but is actually used here for Internet Explorer 7 ONLY! One word of caution....if you add more rules in any of the above lines, it could cause unpredictable results, as in early testing, IE7 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, IE7 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 after this hack, so IE 6 is provided with its style, but yet is hidden from IE5 for Mac. This is NOT read by IE7 or IE8 as they removed the Star Hack specifically in the browser.

In summary, this CSS fix is great news for web developrs, as it means that Internet Explorer 7 and 8 can now be targeted with custom CSS styles, but Safari as well, can be styled separate from all other agents. Using the old Star Hack can then be applied after the hack to futher isolate IE5 and IE6, which together need special CSS considerations.

Ok, so here is the browser test : What color text do you see below? The color you see determines what browser you are using, proving the validity of the CSS fix. Following the test below is the CSS Fix for you to try. It is a little complicated and unstable, but powerful if you have that one layout bug you need to address reliably and quickly in Safari and Chrome, IE, and Firefox using separate style rules.

If you see black, you are using a newer Standarized browser like Mozilla.
If you see red, you are using an older version of Mozilla (< version 1.01).
If you see yellow, you are using newer Google Chrome (2.01+), Opera, and Safari (4.0+).
If you see blue, you are using Google Chrome (1.0 - 2.01), and Safari (1 - 3).
If you see gray, you are using Internet Explorer 8.
If you see purple, you are using Internet Explorer 7.
If you see green, you are using Internet Explorer 6.
If you see orange, you are using a Internet Explorer 5.
THE GIANTISLAND LLC CSS HACK (The style sheet fix is shown below, in the raw):
#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:grey;\
color:black;
[color:black;
color:yellow;]
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}

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


Now, add this HTML to show the result in your web page:

<div id="test1">
If you see black, you are using a newer Standarized browser like Mozilla.
If you see red, you are using an older version of Mozilla (< version 1.01).
If you see yellow, you are using newer Google Chrome (2.01+), Opera, and Safari (4.0+).
If you see blue, you are using Google Chrome (1.0 - 2.01), and Safari (1 - 3).
If you see gray, you are using Internet Explorer 8.
If you see purple, you are using Internet Explorer 7.
If you see green, you are using Internet Explorer 6.
If you see orange, you are using a Internet Explorer 5.
</div> (For reference, I've added the information below to help you understand how the CSS hack affects all of the current web browsers listed for this fix) THE GIANTISLAND LLC CSS HACK - EXPLAINED BELOW IN FULL: #test1 { font-weight:bold; font-size:14px; color:orange;/*IE 5 for PC only*/ voice-family:"\"}\""; voice-family:inherit; color:grey;\/*IE8 only*/ color:black;/*Mozilla - Firefox only*/ [color:black; color:yellow;]/*Opera and newer Safary 4+*/ } /*end*/ /*\*/ html*#test1 { [color:red;/*Affects older Firefox and Netscape browsers only. Seen also by IE5-6 and Safari for Macintosh, which is addressed below.*/ color:blue;/*Affects Google Chrome (v1-2) and Safari for Macintosh (v1-3). Seen also by IE5-6, but that's addressed below. Also hidden from older Firefox and Netscape browsers.*/ ]color:green;/*Affects IE 7 only. Seen by IE5-6 but thats addressed below. Hidden from Safari and all Firefox and Netscape browsers.*/ }/**/ .dummyend[id]{clear:both/*end hack using dummy attribute selector for IE5 mac, else error in CSS occurs!*/} /*The above rule is hidden from IE for MAC, and read only by older Firefox and Netscape 6-7 and IE5-7 for PC, and Chrome/Safari, in general.*/ /*Newer Firefox and Netscape agents reads rule, but does not read any properties set within [], so is unaffected by it, 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, as well as Chrome, see each [] as a character and not part of a selector, if one falls before a property. These cause the property name following the character to not be read, but next line without "[]" property is parsed.*/ /*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, using dummy selector.*/ /*\*/ * html #test1 { color:green;/*Finally, be sure to reapply a fix that affects IE 5-6 only here. IE for Mac and IE 7-8 for PC are not affected here, which means purple above should work only in IE 7 above and gray for IE8!*/ } /**/

In the end, you have a CSS fix that you can use to target special styles in certain browsers, as needed!


We hope you found this information helpful. If you did, would you be willing to review one of our website products? We may have the perfect software tool for your website. Read More >>>