Most of the developers might have faced so many problems with IE browser either it might be versions varying from IE5.0 to IE 8.0. If you would like to know more about evolution of browsers from IE to Google Chrome you can have a look at a website where each and every browser history has been explained in detail – The History of Web Browsers. As a developer from my end I have faced so many problems like z-index issue, PNG image issue, alignment issues when DOCTYPE’s are different, iFrame issues, Div Rounded Corner Issues, IE Overflow Problem, Avoiding CSS hacks using JavaScript etc.,
Below I have listed most of the issues which I have faced while working on some projects, hope these might help you in resolving those critical issues which we are facing with IE browsers, I think we all need to request Bill Gates, Ho sorry! Steve Ballmer to introduce a good browser which resolves all these stuff. Hope below list of plugins might help you in reducing you time to built anything from scratch to resolve those issues in IE browsers.
Z-Index issue, iFrame hack:
Website:http://brandonaaron.net/code/bgiframe/docs
Coming to Z-Index, when a form has got lots of dropdowns [Select Boxes] and if you want to display a ‘div’ over it. The div will go beyond the Select box, this is because Select box has got high Z-Index than any other form elements. Hope everybody might have faced this issue mostly in IE 6 browser. To overcome this issue we used to keep an iFrame beyond the div and we used to do some work around for this one to resolve, when jQuery was not there we used to adjust the iframe using JavaScript and we used to resolve this some how. Now we do have a plugin which solves this.
Below, is the plugin which I am talking about. With this awesome plugin we can overcome the above issue in seconds. This plugin is named as bgiframe plugin.
The bgiframe plugin is chainable and applies the iframe hack to get around zIndex issues in IE6. It will only apply itself in IE6 and adds a class to the iframe called ‘bgiframe’. The iframe is appended as the first child of the matched element(s) with a tabIndex and zIndex of -1.
Z-Index Issue
PNG Image Fix:
Website: http://jquery.andreaseberhard.de/pngFix/
Below mentioned plugin is most valuable plugin, since this solves most of the designer problem. When a designer crops an image and save that image as .png with transparency effect. This PNG transparency would look good in most of the latest browsers like IE 7, IE 8, Mozilla, Safari, Google Chrome etc., but this coming to IE 6, the image would look different. To overcome this effect we used to add alpha-transparency filters into our CSS to get rid of these issues. For this we do have one awesome plugin – jquery.pngFix.js. This plugin has got good features unobtrusive script, simple to setup, works now also with CSS-Backgrounds (but scaling backgrounds), works with PNG-Images within Links, TITLE, ALT, CLASS and STYLE-Attributes are considered.
PNG Fix in IE 6.0
IE Overflow Problem:
Website: http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/
As we all know IE has a different implementation of overflow compared to other modern browsers like Firefox and Safari.
In particular, Firefox et al, when overflowing an element, it puts the horizontal overflow scroll bar on the outside of the element.
You won’t notice this difference until you compare to IE, You’ll note that because the content overflows horizontally in IE, the new horizontal scroll bar means we can’t see all the content vertically, thus generating a vertical scroll bar.
IE Overflow Issue
Anti-aliased Rounded corners with JQuery
Websites: http://www.curvycorners.net/ and http://blue-anvil.com/jquerycurvycorners/test.html
A free JavaScript library for creating gorgeous rounded corners for HTML block elements i.e. DIVs. Supports anti-aliasing, borders and background images.
Rounded Corners
Articles which you would like to read:
Creating a Nifty Dynamic Shadow with jQuerySearch for all jQuery Plugins at one placeBest practice for declaring functions inside jQuery ready functionHow to get mouse coordinates inside a div container using jQueryHow to increase and decrease the font-size of content present in a div container using jQueryCongrats: jQTouch won the 14 Days of jQuery competition grand prize!How to select elements which are having multiple classes using jQueryjQuery rounded corner plugin for your web applicationsjQuery Tutorial: Simple Item Selector using jQueryExcellent Vertical Sliding Info Panel With jQuery
Written by devblogzoneI am a Blogger as well as a good JavaScript developer. I live in Hyderabad, INDIA. DeveloperSnippets is the zone where developers can learn and Share