Forcing Internet Explorer to obey css using Javascript, CSS hacks and specific style sheets
I know all of this has been written before, but this post has the best of the best in combating the ie6 and ie7 css issues.
Hate IE6?
I found an article that explains that this line of code can crash ie6:
< style >*{position:relative}< /style >< table >< input >< /table >
I have not tried this out. But I have one question: What in the hell was this guy doing to discover this? Either some really bad code or his page was fragmented some how.
How can I make IE6 behave like a normal Browser?
Enter Dean Edward’s IE7.js
This lightweight javascript library forces internet explorer 6 to accept a number of css selectors that standards-compliant browser allow.
Here is a list of what it can do: http://dean.edwards.name/IE7/
IE6 makes it really hard to make use of css’s full potential. With this we can use css the way it will be used when ie6 is no longer a requirement. And best part is that once ie6 is no longer supported we can remove that js code completely. We simply call the script from google’s repository. Find the code here
Download it here
Troubleshooting IE CSS bugs with Firefox & Firefug
Tip for finding ie6 & ie7 css problems
A great way to figure out what’s causing css issues in ie6 or ie7 is by reproducing the issue in firefox.
Of course you need to have some experience and knowledge of css to start. I use firebug to change the css on the fly. Once I have a few ideas of what may be causing the error, I adjust the css.
Knowing the css fix
Knowing what some common issues with IE are helps. Here are some helpful links to fight this:
- Most Common Bugs:http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
- IE CSS Bugs that were fixed in IE7http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
Transparent PNG Fixes
There are many fixes to get ie6 to display pngs properly. On that I like in particular is the twin helix png fix.
Download it here: http://www.twinhelix.com/css/iepngfix/
<!–[if lt IE 7]>
<style type=”text/css”>
div#box { behavior: url(iepngfix.htc); }
</style>
< ![endif]–>
The beauty with this one, is that you can target specific elements so the png fix doesn’t have to be applied to the whole page.
Up with IE Hacks:
Targeting and filtering Internet Explorer 7
(http://perishablepress.com/press/2008/07/15/css-hackz-series-targeting-and-filtering-internet-explorer-7/)
A list of valid and invalid selector hacks and conditional rules for targeting css ie7.
IE7 only css hacks explained
(http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/)
Down with IE Hacks!:
Dave Shea writes a nice article in the advent of IE7 about using separate style sheets.
(http://www.thinkvitamin.com/features/css/stop-css-hacking)
We also have Nick La author of Web Designer Wall calling to trash all ie hacks: http://www.webdesignerwall.com/general/trash-all-ie-hacks/
In his article he addresses the problem that is IE6 support. But the reality is we just have to wait it out. We can fight back using ie7.js if we really have to. It’s difficult to convince a client to display a message for IE6 users to update their browser. This can be an annoyance for users. Don’t get me wrong I have no sympathy for anyone using IE6.
Related posts: