Going further into browser hacking just to make sure that everything displays as they should be in every browser that we are targeting.
Lately, I came to face this 1 pixel difference between IE8 and firefox displays - padding-top in particular.
I keep on trying to come up with a hack for IE 8 as I have done the IE 7/6 hack and they seem to work fine even if I changes the values for the padding.
Since I wasn't really able to come up with the correct formula to have a code that could fix the issue in IE8 and still works fine in firefox, I decided to come up with a firefox hack then IE 8, 7, and 6 hacks. Maybe the next time I could find a shorter way to do things.
By the way, here is the sample code that I had for the given scenario.
div#loginstatus a {
float:right;
padding-right:5px;
padding-top:3px; /*IE 8 will use this hack */
color: #fff;
text-decoration:none;
}
/*try to fix firefox - failsafe
html>body div#loginstatus a {
padding-top:2px;
}*/
/* firefox will use the hack below */
html>/**/body div#loginstatus a, x:-moz-any-link, x:default { padding-top:2px; }
/* IE 7 hack */
*+html #loginstatus a{
padding-top:2px;
}
/*IE6 hack only*/
* html #loginstatus a{
padding-top:2px;
}
Wednesday, July 21, 2010
CSS Fix for Browsers
I copied the following article from http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx
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 additions, 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. It is sometimes necessary to develop certain "fixes" that allow specific browser parsers and rendering engines to display CSS style rules in certain ways. We have developed such a fix for your benefit, which we call the "GiantIsland CSS Fix". 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 fixes, or the user of these types of "css hacks". 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 in addressing various browser rendering differences shown in our website software products.
The GiantIsland CSS Fix
The New GiantIsland CSS Fix is based on a prior CSS fix called the Stokely Safari Fix, 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 fix was originally posted at www.stormdetector.com, one of our developer's websites). The powerful thing about this fix is that it not only remains a powerful and reliable fix for correcting 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 also addresses newer IE7 AND IE8, and can be combined with the popular Star Fix 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 Fix 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 fix 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 fix for reference is as follows:
The fix is based on the inability for all the major browsers to interpret attribute selectors ("[]") consistently in CSS. Placing or rather misplacing these is what creates the fix and allows us to control which browsers see which rules in the CSS fix. To use the fix, 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 Fix rule for IE 5-6 after this fix, 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 Fix 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 Fix can then be applied after the fix 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:
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.
(For reference, I've added the information below to help you
understand how the CSS fix 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 fix 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!
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 additions, 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. It is sometimes necessary to develop certain "fixes" that allow specific browser parsers and rendering engines to display CSS style rules in certain ways. We have developed such a fix for your benefit, which we call the "GiantIsland CSS Fix". 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 fixes, or the user of these types of "css hacks". 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 in addressing various browser rendering differences shown in our website software products.
The GiantIsland CSS Fix
The New GiantIsland CSS Fix is based on a prior CSS fix called the Stokely Safari Fix, 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 fix was originally posted at www.stormdetector.com, one of our developer's websites). The powerful thing about this fix is that it not only remains a powerful and reliable fix for correcting 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 also addresses newer IE7 AND IE8, and can be combined with the popular Star Fix 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 Fix 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 fix 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 fix for reference is as follows:
The fix is based on the inability for all the major browsers to interpret attribute selectors ("[]") consistently in CSS. Placing or rather misplacing these is what creates the fix and allows us to control which browsers see which rules in the CSS fix. To use the fix, 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 Fix rule for IE 5-6 after this fix, 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 Fix 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 Fix can then be applied after the fix 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:
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.
(For reference, I've added the information below to help you
understand how the CSS fix 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 fix 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!
Tuesday, July 20, 2010
Fixing Compatibility problems for IE6 and IE 7
Had a client today who gave me this task to fix some issues on CSS in IE6 an IE7.
Here is how I go with the Fixing of compatibility problems for IE6 and IE 7:
1. The * HTML tag or something
- i learned from my friend google that * HTML can be used to apply fix css codes to IE 6 and 7 as it will be ignored in modern browsers.
Sample code:
#feedbacktop {
/*background:url("#") no-repeat scroll 0 0 transparent;*/
min-height:225px;
margin-top:15px;
margin-left:0px;
margin-bottom:10px;
}
/* convert min height values for IE6*/
* html #feedbacktop {
background:url(#);
height:225px;
margin-top:15px;
margin-left:25px;
margin-right:25px;
width:350px;}
2. Conditional Comments - havent tried it though..LOL...
Or for IE7:
I have tried the first one and it worked really great for me.
Here is how I go with the Fixing of compatibility problems for IE6 and IE 7:
1. The * HTML tag or something
- i learned from my friend google that * HTML can be used to apply fix css codes to IE 6 and 7 as it will be ignored in modern browsers.
Sample code:
#feedbacktop {
/*background:url("#") no-repeat scroll 0 0 transparent;*/
min-height:225px;
margin-top:15px;
margin-left:0px;
margin-bottom:10px;
}
/* convert min height values for IE6*/
* html #feedbacktop {
background:url(#);
height:225px;
margin-top:15px;
margin-left:25px;
margin-right:25px;
width:350px;}
2. Conditional Comments - havent tried it though..LOL...
Or for IE7:
I have tried the first one and it worked really great for me.
Thursday, January 14, 2010
Running Multiple Instances of Yahoo Messenger in one PC
Simply launch the registry editor (type regedit at Run command), and navigate to the following registry branch:
HKEY_CURRENT_USER\Software\yahoo\pager\Test
Then, on the right pane, right click on the registry editor and select “New”, then create a new DWORD registry value. Name the new registry key as Plural, and assign it the value of 1 (decimal). If some case, the value of 2 should also works. To disable or disallow multiple instance of Yahoo Messengers, simply change and set the “Plural” registry key’s value to 0, or delete the “Plural” key.
HKEY_CURRENT_USER\Software\yahoo\pager\Test
Then, on the right pane, right click on the registry editor and select “New”, then create a new DWORD registry value. Name the new registry key as Plural, and assign it the value of 1 (decimal). If some case, the value of 2 should also works. To disable or disallow multiple instance of Yahoo Messengers, simply change and set the “Plural” registry key’s value to 0, or delete the “Plural” key.
Monday, January 4, 2010
Friday, January 1, 2010
How to view banned ImageShack images!!
Mozilla, Firefox, Netscape Users:
1) Open the URL about:config.
2) Scroll down to network.http.sendRefererHeader.
3) Set value to 0.
OR
1) Browse to
http://www.stardrifter.org/refcontrol/2) Download the RefControl extension
3) Restart Firefox in order to install the extension
4) Go to "Tools" and select "RefControl Options..."
5) Click on "add site" and insert imageshack.us
6) Choose "Block - send no refferer"
note: If you still can't see the images, clear your Firefox cache:
1) Go to "Tools"
2) Select "Options"
3) Click on "Privacy"
4) Click on "Cache"
5) Press "Clear Cache Now"
Opera Users:
1) Go to "Tools"
2) Select "Quick Preferences"
3) Untick the "Enable refer logging" option
OR
1) Press F12
2) Untick the "Enable refer logging" option
Internet Explorer Users:
1) Go to:
http://www.mozilla.org/products/firefox/
2) Download FireFox
3) Install FireFox
4) Follow FireFox instructions above
Sunday, November 29, 2009
Images Not showing in IE
I was working for a client's website. Everything was working fine, when suddenly my client complained for images not showing.
I check the site in Firefox, Chrome, it was fine. Then I checked on Internet Explorer (IE). I was a nightmare. Images weren't showing in IE. Oh com'on. How come this is happening. I search google. Checked my html. Reviewed about doctype. Nothing to be of much help.
Then, i found a very simple advice: "Change the settings of your images from CMYK to RGB, and it will be sorted".
To my amazement, it worked. Woooohhh... How I hate IE...
Subscribe to:
Posts (Atom)