Welcome to IE HELL!
10 Golden Rules to IE Browser Compatibility
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.
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.
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.
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.
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.
Helpful tool, but don’t make it a constant crutch. Use these only after rigorous testing with regular CSS updates have failed.
IE6 is not supported by Microsoft, so just say no!
Just give up 6. Get a modern browser you fools!
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.
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.
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…
- If you have IE8+ just click F12 on the keyboard to quickly launch the tool.
- 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.
- 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.
- Click on the the selection tool on the far left and then click on the element you want to add styles to.
- 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).
- Now click on the Attributes button located to the far right of the currently selected Style button.
- In the left column of the Attributes table, double click the first empty row. Type the word style.
- Start typing in normal styles, i.e., width:auto; height:auto; float:left;.
- 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.
- 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.