Mar 02, 2010
Internet Explorer Tricks You May Not Know About
By far the most difficult thing to master when learning to code with web standards is browser optimization. It seems like every layout presents a different challenge than the last one. It's taken me years to figure out pretty much every bug Internet Explorer can throw my way, but I still struggle from time to time.
Part of coping with Internet Explorer (versions 6 and 7 in particular) means having some nifty tricks that can help you in a pinch. Some of my tricks aren't very well publicized, so I'm posting them here in hopes of saving at least one person from taking their frustration out on their innocent laptop, wife or dog.
Target IE6 or IE7 with a single character
A quick way to set a specific style that applies only to IE6 or IE7 without the use of conditional comments or javascript is to try the following simple syntax in your stylesheet. Just add a simple asterisk or underscore before the property:
#someElement {
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: yellow; /* IE6 exclusively */
} Credit: NetTuts.com- http://bit.ly/8TIJSs
Using text-indent on an input in IE6
If you use image sprites (which I highly recommend), you are likely to run into this problem. The text-indent property does not work on an input. So you may get an image that looks like this:
Instead of hiding the text and replacing it with an image, both show up in IE6. The following three lines must be added to your IE stylesheet for the input in question to fix the problem:
display:block;
font-size: 0px;
line-height: 0px;
Usually the display:block property is unnecessary if you are using a sprite or image replacement technique to replace the text (because it's already a block level element).
Credit: ProductiveDreams.com- http://bit.ly/12YKXi
IE8 Rendering Modes
In typical Microsoft fashion, they actually present you with a bunch of rendering mode options in Internet Explorer 8 instead of just doing it the right way all of the time. So if you write code properly and it validates, you will want to add the following meta tag to the <head> ALL of your layouts moving forward:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This tag enables the IE8 standards compliance mode on your website, which you would think should be active all the time.
Credit: Zurb.com- http://bit.ly/4RGzk
CSS Browser Selector
When all else fails, I use an amazing 1.1k javascript file called CSS browser selector. This script lets you code styles for tons of different technical configurations. You can set attributes by operating system, browser and browser version. It also cleverly adds a "js" class when javascript is enabled so that you can set styles up for when it is disabled. Pure awesomeness ...
Credit: http://rafael.adm.br/css_browser_selector/
The Alpha-transparent PNG Paradox
One super-annoying issue with IE6 is that it doesn't know how to read alpha-transparent images properly. So if you have an image with a shadow over a transparent background or something with an opacity less than 100%, chances are it won't look so hot in IE6.
This isn't an easy fix. There are a number of recipes that cover different situations. Frankly, we try to avoid all of them if we can and simply use different images in IE6 that don't have alpha-transparency. It doesn't look as cool, but that's what they get for using a crappy browser. Here are the best solutions I know about:
- Unit PNG Fix (lightweight, my favorite right now)
- Supersleight (doesn't work for background images)
- DD_belatedPNG (I haven't used before, but it seems very solid)
Posted in Code - Join the Discussion
