Happy Birthday To You Gangadhar

Happy Birthday To You Gangadhar.......

Internet Explorer In A Web Designer’s Life – Problems And Solutions

Internet Explorer, this current pain in the… code for designers nowadays, had its days of glory a long time ago, when IE6 was launched, cause at that time, believe it or not, IE6 was a top notch browser. With time, things have changed and changed dramatically, Internet Explorer having to face an incredible load of hate directed to itself, especially coming from web designers and developers.

Not even the release of IE7, IE8 or even IE9 didn’t make much of a difference cause every time a new version came, it was still behind with the existing web technology. Other browsers have problems too with certain features, but Internet Explorer bites the dust when it’s compared with any other serious browser, you just have to name it Firefox, Safari, Chrome or Opera.

Fortunately for web designers and developers, there are tools and snippets to make their life easier when facing this application For the problems that IE causes, there are also solutions that make the web designer’s life easier.

Tools

Google Chrome Frame

Google Chrome Frame is a free plug-in for Internet Explorer. Some advanced web apps use Google Chrome Frame to provide you with additional features and better performance.

Download Google Chrome Frame to:
Speed up your web experience: Sites that utilize Google Chrome Frame become more responsive.
Enjoy more advanced features: With Google Chrome Frame, sites offer you new features based on open technologies.

Surf the web the way you are used to: Google Chrome Frame works under the hood with your current browser.


DebugBar

DebugBar Development features:

1. - View HTML DOM Tree
2. - View original ad interpreted source code
3. - View tab attributes
4. - Edit tab attributes
5. - View HTTP and HTTPS headers
6. - View page cookies
7. - Validate html code for main page and frames/iframes
8. - List all javascript functions
9. - View javascript function code
10. - Execute javascript code in the currently loaded page
11. - Get information about currently loaded page

CompanionJS
Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE. The current version is 0.5.5.
Companion.JS adds the following features to IE :

1. - Detailled javascript error reporting (call stack and real file name where the error occured).
2. - “Firebug”-like Console API feature.
3. - Javascript console feature useful to inspect javascript objects at runtime.
4. - A toolbar icon to open the Companion.JS panel.

Internet Explorer Developer Toolbar

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages. These features enable you to:

1. - Explore and modify the document object model (DOM) of a Web page.
2. - Locate and select specific elements on a Web page through a variety of techniques.
3. - Selectively disable Internet Explorer settings.
4. - View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
5. - Outline tables, table cells, images, or selected tags.
6. - Validate HTML, CSS, WAI, and RSS web feed links.
7. - Display image dimensions, file sizes, path information, and alternate (ALT) text.
8. - Immediately resize the browser window to a new resolution.
9. - Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
10. - Display a fully featured design ruler to help accurately align and measure objects on your pages.
11. - Find the style rules used to set specific style values on an element.
12. - View the formatted and syntax colored source of HTML and CSS.

The Developer Toolbar can be pinned to the Internet Explorer browser window or floated separately.

Fiddler

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

HttpWatch

HttpWatch is an integrated HTTP sniffer for IE and Firefox that provides new insights into how your website loads and performs.

Web Accessibility Toolbar
The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

1. - identify components of a web page
2. - facilitate the use of 3rd party online applications
3. - simulate user experiences
4. - provide links to references and additional resources

TamperIE

TamperIE is a simple Internet Explorer Browser Helper Object which allows lightweight tampering of HTTP requests from Internet Explorer 5 and above.

TamperIE is a useful tool for security testing your web applications, in order to ensure you don’t make foolish assumptions about the data sent by client browsers. Since the tool exposes and allows tampering with otherwise inconvenient input, many user-input security flaws immediately become apparent.

TamperIE works inside IE itself, before data is placed on the wire; this means that it works fine even against HTTPS-secured sites.

Snippets

IE7.js Javascript library
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Selectivizr

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations.

Selectivizr works automatically so you don’t need any JavaScript knowledge to use it — you won’t even have to modify your style sheets. Just start writing CSS3 selectors and they will work in IE.

Selectivizr requires a JavaScript library to work. If your website already uses one of the 7 supported libraries you just need to add the selectivizr script to your pages. If not, you will need to pick a library too.

Rounded corner HTML elements using CSS3
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css
.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }
Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc)

CSS3 support for Internet Explorer 6, 7, and 8
IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.

If you’re viewing this page in Internet Explorer, some of the elements have been rebuilt by the script in Vector Markup Language (VML), an IE-specific vector drawing language. VML supports things that are missing from IE’s CSS implementation like rounded corners and blur effects.

CSS3 Solutions for Internet Explorer

CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the majority of the properties and features introduced in CSS3.

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.

But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).

CSS hacks for specific versions of IE
IE 7

1 2	*+html .box {background:#fff;} *:first-child+html .box {background:#fff;}

IE 6

1	*html .box {background:#fff;}

CSS3Pie

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
transformIE

Transformie is a javascript plugin that comes in less than 5k that you embed into web pages and that brings you CSS Transforms by mapping the native IE Filter API to CSS transitions as proposed by Webkit.
Transformie supports the following functions from Webkit’s syntax (in degrees, radians or grads):
- rotate
- scale, scaleX, scaleY
- skew, skewX, skewY
- matrix (with the exception of the last two modifiers, tx and ty)

html5shiv
Public repo for the latest HTML5 JavaScript shiv for IE to recognise and style the HTML5 elements.
Also include’s @jon_neal’s latest printable HTML5 elements.
To use, include the following script in your element above your CSS:

1 2 3

IE Print Protector
IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer.
IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print.
Internet Explorer 6, 7, and 8 do not recognize new HTML5 elements. IE treats unknown element start

and end

tags as void elements. This means unknown elements no longer wrap their contents, making them impossible to style and spilling their contents into the DOM.

Internet Explorer User Agent Style Sheets
A UA Style Sheet is a simple set of css styles that each web browser uses before any other css styles are applied.

This chart lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

Modernizr
Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

1 2 3 4 5 6 7 8

.multiplebgs div p {   /* properties for browsers that      support multiple backgrounds */ } .no-multiplebgs div p {   /* optional fallback properties      for browsers that don't */ }

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
MySpace’s Performance Tracker

MySpace’s Performance Tracker is a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages.
MySpace’s Performance Tracker Features:
- Measure the CPU hit and memory footprint of your pages as they render on the client’s browser
- Review screen shots of the page while it renders
- Review the rendered HTML on each point of the page’s lifecycle
- Measure and show estimates of the time it takes to render each section of the page in different connection speeds
- Validate the content of your page against a set of proven “best practice” rules of web development
- Review downloaded files and show download time estimation on different bandwidths

Unit PNG Fix
That’s IE6 whining about how you should be using an obtuse “filter” attribute, causing all those nice, pretty pngs on your page to go whacky. Fortunately for you, we got just the thing to shut it up. Give it just the tiniest dose of our Unit PNG Fix and bask in the the glorious phosphoresence of your png images once again! While this is not the only png fix out there (in fact, it was inspired by Drew McLellan’s supersleight), here’s why it will be the last one you need to download:
- Very compact javascript: Just over 1kb!
- Fixes most interactivity problems caused by IE’s filter attribute.
- Works on img objects and background-image attributes.
- Runs automatically before page load on all, or just specific elements.
- Allows for auto width and auto height elements.
- Super simple to deploy.

ExplorerCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.

Cross browser testing

IETester

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

IE NetRenderer
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany.
Unlike other screenshot services, we are able to process a large number of capturing jobs in parallel and in realtime, making it the fastest service that we know of.
This web rendering tool is ideally suited for web designers working on Apple Mac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.

Browsershots

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated servers for your review.

Articles and discussions

Why People Still Use IE 6
The conversation is heating up a little hotter than usual lately, as major companies are starting to pull support for it. Apple’s new MobileMe service doesn’t support it. 37 signals is phasing out support for it. Matt Mullenweg says WordPress.com is still seeing about 25% of visits from IE 6 but will consider phasing out when it drops below 10%.

Is IE9 a modern browser?
IE9 is definitely better than IE8 and a step in the right direction, but I don’t believe it to be a truly modern browser, and let me tell you why.

IE CSS Bugs That’ll Get You Every Time

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6.

IE6 – CSS Bugs and Fixes Explained
I hear about designers and developers pulling their hair out all the time saying that Internet Explorer 6 doesn’t do what they expect or that it’s adding hours to development time but is it really the huge problem that everyone makes it out to be or does it just need a little more understanding?