Cross Browser issue , How to handle in Internet Explorer?

Now a days in online there are good number of browsers like Mozilla Firefox, Safari, Google Chrome, Internet Explorer etc. User of these browsers are also there. So one website has to be fixed all cross browser issues. Otherwise, one site may look correct in one browser, however it may breaks in other browsers. If this happens to your website, you may lose visitors. No visitor will stay in a broken website layout.. So it’s need to be fixed as soon as possible.

Most of the time , Internet explorer breaks the website layout as it has three numbers of different and outdated versions (like IE7, IE8 & IE9) still in market today. And main concern is there are users of these version too. Developers are really facing a tough challenge while fixing IE browser related issues. As these versions don’t support newer version of CSS like CSS3.

Understand Internet Explorer’s Most Common Problems

Before start working on your web page understand what are the limitation of Internet Explorer old browser and modern IE. Mainly focused on Internet Explorer old browsers .some of the new CSS properties are not support in IE older versions , But we should aware of all versions of IE , Because we can’t specify which browser the user will use . Web page should look consistent in all browser, so before start deign should have strong understand about what are the common problem of IE Browsers

• • IE6 will become problematic if floats are overused, causing (paradoxically) disappearing content

• • IE6 will double the margin on floated elements on the side that is the same direction as the float; setting display: inline will often fix this

• • In IE6 and IE7, if an element doesn’t have layout , it can cause a number of problems, including backgrounds not showing up, margins collapsing improperly,etc..

• • IE6 does not support min- and max-based CSS properties max-width

• • IE6 does not support fixed positioning of background images

• • IE6 and IE7 do not support many alternate values for the display property (e.g. inline-table, table-cell, table-row, etc.)

• • You cannot use the :hover pseudo-class on any element in IE6 except an anchor

• • Certain versions of IE have little support for certain CSS selectors (e.g. attribute selectors, child selectors, etc.)

• • IE versions 6-8 have little support for CSS3, but there are some workarounds

• • IE lower versions not supported boarder-radius

• • IE lower versions not support Background gradient

Fixing Browser Issue? What is CSS Hack?

Reset CSS

There is some default styling for HTML elements from web browsers, the first thing to do is to always include a CSS reset in your stylesheet. By using this code, you’re already eliminating lots of future headaches

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,
fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,
strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Internet Explorer hacks

While conditional comments are better, you can also target some versions of Internet Explorer using the following syntax, in the common style sheet by using (* _.) symbols

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

Targeting Opera only

Opera isn’t the popular browser, but that isn’t a reason not fix problem that may occur. The code below will only target Opera, allowing you to add CSS rules only for this browser.

@media all and (min-width: 0px){
    .classname {}

Targeting Safari only

Safari is one of the most standard-compliants browsers, so it is rare that you have to fix Safari-only problems. But it can happen sometimes. Here is a nice hack to write Safari-only CSS rules.

html:lang(en)>body  .classname {  color: #333333;}

Targeting Google Chrome only

After Opera and Safari, here is finally the same kind of hack, to target only Google Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #test1{color:red;}
}

What is conditional stylesheets?

If we are getting more IE problem in older IE version of browsers Microsoft implemented conditionnal comments in their browser, which allow you to link a stylesheet that will be interpreted by a browser alone.

Here we can see some model how to link to Conditinal stylesheet

Target ALL VERSIONS of IE

Target everything EXCEPT IE

Target IE 7 ONLY

Target IE 7 and LOWER

Target IE 7 and HIGHER

Main Tools for testing IE Cross Brower issue

IE tester

IE tester is a free downloaded tool .it will show how your page will look different IE versions. It will show IE 5.5 to latest IE version . its very easy to find out where is the issue is facing our Design

Webpage Scanner

Webpage Scanner is an online testing tool, it’s a Microsoft product done for modern IE, once you enter your code here It will show what are the common problem in used CSS,

Webpage Scanner