Cross Browser issue, How to handle in Internet Explorer? - Blogs
X
21Jan

Cross Browser issue, How to handle in Internet Explorer?

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

ietester

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

ietester

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

Related

Connect apps and integrate data with workflows using Azure Logic Apps

Implementing complex business process has been made easy. Logic Apps in azure provide a way to imple...

Read More >

TFS to VSTS Migrations

The next evolution of TFSWhether you’re a startup or Enterprise or you’re a team of just...

Read More >

CfMD services -Dynamics NAV

CfMD services help ISVs minimize the time and effort needed to get their software solution through t...

Read More >

Upcoming Webinar - Offshore support to North American Dynamics NAV partners

Offshore support to North American Dynamics NAV partners whose customers are moving to NAV '16Wh...

Read More >

Microsoft Azure Consultant

·         Executing technical feasibility as...

Read More >

Customer Feedback

Your feedback is important to us. Please share your experience working with Canarys & the journe...

Read More >

Threading

Multi-taskingIt is a concept of performing multiple tasks over a certain period of time by executing...

Read More >

Partnership Program

We understand that the world of technology is changing rapidly from day to day and businesses have m...

Read More >

Partnership Program

The Canarys Partner Program:Canarys is all set to expand its business reach across the Globe and is ...

Read More >

Upcoming Webinar US - Plugging for Cloud, Right or Wrong

Plugging for Cloud, Right or Wrong?Cloud computing continues to be one of the most advertising topic...

Read More >

Share

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Text/HTML
Contact Us
  • *
  • *