Geeb's Angular Page

Geeb

IE Browser Compatibility Guide

By: Geeb
On: December 9, 2011

Every developer has been in this situation, you have just finished developing a site and you know it is time–time for IE browser compatibility testing. You load the site up in IE7 and everything looks out of position. Crap! Now what? Where do you start with IE Browser Compatibility? Most developers start making IE specific styles, some use javaScript to detect the user’s browser, some run and hide, others go to geebart.com for advice. I am going to go through a few tips in trying to develop for IE Browser Compatibility, but also some practices I’ve gotten in the habit of doing when starting a site. Read deep and keep an open mind.

Welcome to IE HELL!

ieHell IE Browser Compatibility Guide

10 Golden Rules to IE Browser Compatibility

The following list items are rules to follow. Remember, this is just a guide. Certain situations call for you to break the rules every now and again. Most of these rules deal with HTML and CSS. If you are running into some javaScript errors, that is another big hurdle all together. In case of JS, just remember that new browsers have newer javaScript engines. So, if you are in IE9 running IE7 document mode, you are still running IE9′s javaScript engine. Unfortunately, the best way to tackle JS problems is to run the old browsers. Let’s move on to the list…

  1. Limit use of absolute or relative positioning.

    If you are creating a modal/pop-up than this is unavoidable, but in this case you should be ok. Whenever you have to mix oddly positioned elements (via CSS) inline with other elements, alignments are bound to be off. If you strive for pixel-perfection stray away from the CSS position:absolute; and position:relative.

  2. No negative numbers.

    This is especially true with margins and padding. IE has a hard time with negatives. If you do use them, you are always better off making the element styled as display:block;. This tends to fix some negative issues, but save yourself the headache.

  3. Use Wrappers to contain groups of elements.

    I love wrappers and using more than one may be necessary. The outer-most wrapper of a site usually has a margin:auto; to center all content, all subsequent child elements should be floated blocks, i.e., float:left;. This does not count spans, p or other tags made for html text. I am referring to only the content containers (usually divs). Pick a float (left or right) and stay consistent. Floating isn’t as scary as it seems.

  4. Treatment of Links.

    Always make them display:block; (you probably don’t have to float them), use line-height and/or padding to make the height of the block larger. This makes the hover area of the link much larger and is good for user-experience (the mouse doesn’t have to be so exact). Always include text for links, as this helps SEO. If you have an image that includes the text already, use text-indent:-9999px; to hide the link text. For this to work in older versions of IE make sure you also have the following, display:block; line-height:0; font-size:0;. This is a bit overkill, but works. All modern browser only require text-indent:-9999px; Lead in text is good, too, but not all links are wrapped in other text. This is very good for SEO.

  5. Try not to use “!important” in CSS.

    !important written after a style, i.e., “width:auto !important;” will ignore all rules of hierarchy within CSS and essentially supersede all other “width” styles applied to this element. This tends to happen a lot in conditional IE style overwrites and I would suggest staying away from it as much as possible. This is good practice regardless of IE testing or not.

  6. Try not to use IF IE html Conditionals.

    Helpful tool, but don’t make it a constant crutch. Use these only after rigorous testing with regular CSS updates have failed.

  7. IE6 is not supported by Microsoft, so just say no!

    Just give up 6. Get a modern browser you fools!

  8. Double Check HTML structure for syntax/parse errors.

    IE is extremely picky about elements being properly closed. Some pages won’t even finish loading. Double check your code and make sure everything is buttoned up. Newer browsers tend to auto-correct these mistakes. Use a text editor that has code folding to make this easier. Notepad++ and Dreamweaver both have this feature. Coda, the most popular Mac text editor, will have this feature very soon.

  9. Do not put a UL inside of an LI

    When creating nested navigation with multiple unordered lists (ul) do not make a UL a first-level child of an LI. In order to create nested navigation that works in all versions of IE, you must create a DIV wrapper to act as a buffer for the nested UL.

  10. Use IE Developer Tools

    The built in browser tools are not good but they get the job done. The best way to problem solve any design/alignment/browser issue is to use a browser’s developer tool. Follow these steps…

    1. If you have IE8+ just click F12 on the keyboard to quickly launch the tool.
    2. If the tool is not positioned in the browser window fixed to the bottom of the screen, use CTRL + P or click the repin button that is closest to the X/minimize button on the far right.iePostPin IE Browser Compatibility Guide
    3. In the center of the dev tools toolbar click on the browser mode and document mode buttons to change to a different version of IE. Make sure both are the same.iePostBrowserMode IE Browser Compatibility Guide
    4. Click on the the selection tool on the far left and then click on the element you want to add styles to.iePostSelection IE Browser Compatibility Guide
    5. The style window on the right shows styles in reverse order. You must scroll down to see the styles that are effecting the select element with seniority (CSS heiarchy).
      iePost2 IE Browser Compatibility Guide
    6. Now click on the Attributes button located to the far right of the currently selected Style button.
      iePostAttr 400x141 IE Browser Compatibility Guide
    7. In the left column of the Attributes table, double click the first empty row. Type the word style.
      iePostStyle1 IE Browser Compatibility Guide
    8. Start typing in normal styles, i.e., width:auto; height:auto; float:left;.
    9. Go back to the Style’s tab and click the Style’s button. Scroll to the bottom. You should see your new styles listed at the bottom labeled as inline styles.
      iePostStylesFinal 400x231 IE Browser Compatibility Guide
    10. Don’t be fooled. Most of the time IE doesn’t actually push these new styles to the site live. For some reason IE doesn’t apply these styles even though the checkboxes are checked. To refresh and fix this issue simply uncheck and recheck the group, “inline style”. You will have to scroll back down, but after this process you should see these new styles active.

Besides having a solid code base to start from you know how to problem solve designs for IE Browser Compatibility on the fly. Never thought you would be using the built in IE Developer Tools, eh? The only other tool to consider is adding classes to your page based upon the user browser. This can be done with javaScript, jQuery or a similar library.

Feel free to ask questions, I am always willing to help!

Categorized:

Tagged: