Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Build a Website Compatible With IE

DZone's Guide to

How to Build a Website Compatible With IE

Internet Explorer can be a thorn in the side of developers, as it has myriad compatibility issues. This article covers some HTML, CSS, and JavaScript workarounds.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Internet Explorer, within a span of 7 years of its debut, captured a market share of 95%, but its share has since crumbled to 3.2%. At present, IE experiences loads of compatibility issues and, to add to its troubles, even Microsoft has pulled back all its support from IE’s earlier versions and has shifted its focus to its new browser, Microsoft Edge.

But even in spite of the dropped market share and lack of support, IE still manages to hold considerable ground in the market and, trust me when I say this, even the experience of your tiny percentage of users coming from IE can make or break your brand, making it absolutely critical to test for compatibility issues. Although this is a time when cross-browser compatibility is a big thing, all the browsers still behave differently, even when it comes to how margins and paddings are treated, how fonts are rendered, or how default styles of elements are interpreted, etc. IE itself is loaded with such issues and here I’m going to talk about some of the most prominent ones.

1. Page Elements Being Narrower

This is one of the most infamous CSS problems in Internet Explorer, and even has its own name ̶ the Internet Explorer Box Model bug.

It is the way the earlier version of IE handled the sizing of elements or, let’s say, the box model in a web page, making the page elements look narrower. This is so because the IE engine is unable to render the size of the HTML elements like margin and padding as recommended for CSS by W3C.

The safest way around this is to use conditional comments, which are comments whose content can only be read by the specified browser.

The basic form of conditional comments is as follows and can be used to specify the condition for IE.

<!--[if IE ]>
      <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

2. Disappearing Background Images

IE sometimes makes the background image and even the text surrounded by floating elements disappear, especially while scrolling up or down a web page. The background does usually reappear upon refreshing the page.

A way to resolve this is to insert the CSS command position: relative in the CSS rules containing the background image.

You can try this command:

.try {
   background: url(filename.jpg);
   position: relative
}

3. Flashes of the Unstyled Version of the Page

Sometimes when the website is loading, an unstyled version of the page may appear for a second or two, before the loading of the external CSS stylesheet is complete. This is a case of Flash of Unstyled Content (FOUC).

The page corrects itself as soon as the style rules are loaded. But still, the bug is irritating and often confusing.

One way to resolve this issue is to use to use the method shared by John Polacek, i.e., insert the following script into the head of the document.

<style type="text/css">
    .no-fouc {display: none;}
</style>
<script type="text/javascript">
    document.documentElement.className = 'no-fouc';
    // add to document ready: $('.no-fouc').removeClass('no-fouc');
</script>

And then add this to your document ready event:

 $('.no-fouc').removeClass('no-fouc'); 

4. Double Margins

At times in IE, the margin attribute can double, for instance, an attributed margin of 5px to a floating element ends up taking-up up to 10px. This bug is known as the double-margin bug and is pretty persistent in IE6. But its fix is extremely simple. All that has to be done is apply the display: inline rule to the floated element in CSS.

#content {
   float: left;
   width: 500px;
   padding: 10px 15px;
   margin-left: 20px; 
   display: inline; 
}

5. Drop of Containers

The IE6 browser only partially supports the width, and, for that matter, even the height properties, and hence it lets the containers grow to accommodate the content. This unintended growing forces the adjacent elements to drop down, absolutely messing up the page layout. This bug is known as the Float-Drop bug and can be easily fixed by styling the box with a negative right margin coded along with a position: relative snippet.

.fixMe {
  margin-right: -100px;
  position: relative;
}

6. Flickering Background Images

In IE6, the background image can sometimes flicker when CSS sprites are used as the image for links or buttons. This is so because the browser isn’t able to cache the background images properly and keeps reloading them over and over again. This bug has a pretty simple fix, a single line of JavaScript which forces the browser to cache the image.

try {
  document.execCommand('BackgroundImageCache', false,true true);
}
catch(e) {}

7. The Case With Min-Height Property

Setting min-height on elements is kind of imperative to get a pixel perfect image, but IE6 completely ignores this property and simply fetches the value of height from the declare minimum height. An instant fix for this issue is the shared code snippet.

#inner-container {
   min-height: 140px;
   height: auto !important;
   height: 140px;
}

Conclusion

These are some of the most prominent issues along with their simple fixes. I hope you find them of some help in making your web page look and function consistently across different browsers, which I understand is still a tall task in spite of the industry’s progression towards standardization and rendering engines becoming way more consistent. But IE comes with its own bundle of issues making it exceptionally challenging to make a compatible pixel-perfect page. 

Hence the need is to make sure that the compatibility issues are resolved for real and only can’t simply rely on implementing the counter-measures without verification.

For this, you might need a cross-browser testing tool so you can test all versions of IE and Edge in all supporting OSs and make sure that your page looks the way you want it to in different combinations of IE versions and operating systems.

So, just finddebug, and test. Then repeat until you get a flawless website.

Till then, happy testing!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
browser compatibility ,web dev ,css ,javascript ,cross-browser testing

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}