How do you deal with Internet Explorer?

Tags: html,css,internet-explorer,portability

Problem :

I am aware that there are probably other questions regarding this topic. I guess that every web developer goes through this with IE.

My problem:

I am developing a web-based application fully based on Javascript. I am a Mac user. I was really happy that everything worked great in Safari, Firefox and Opera. I then asked a friend with Windows to check it with Internet Explorer, and things don't work as well. My application is very sensitive to the HTML standards.

The main problem is the CSS layout. The JavaScript itself seems to be working properly thanks to jQuery for portability.

My question:

How do you deal with Internet Explorer? Should I create a new CSS that is only loaded on Internet Explorer? Should I create a new version of the application only for Internet Explorer? How do you normally handle this? The application is pretty big both in feature design and in layout design.


Using the CSS reset as suggested by Nosredna, already removed almost half of the problems. I guess it really is a good practice. I noticed that SO also uses it.

Solution :

Do you specify a valid doctype? You can get Internet Explorer to be a bit more compliant by switching it into standards mode.

Do you use a browser reset CSS file? That can help bring the versions together.

Be aware of IE's CSS bugs:

For the skeleton of your layout, consider using markup that is known to work, such as or for liquid or fixed layouts, respectively.

Keep up with JavaScript differences between browsers. jQuery handles some of them, but not all of them.

Yeah, IE is a pain. If you want it to work in IE, you really want to test in IE every couple days. You don't want to save the pain for the end--you want to handle the nightmares one at a time.

By the way, if you think IE is a pain, try looking at your page with a mobile phone. The other day I went to with an iPhone and the middle fifth or more of the screen was taken up by a bunch of garbled markup that rendered as text.

    CSS Howto..

    Show jquery datepicker with HTML/CSS image

    How to make two lines text inside list-item element of bootstrap? [closed]

    show/hide css menu item depending user role using

    How to set readonly property of textbox from css

    How to make a thicker text shadow using css?

    How can I get IE8 to accept a css :before tag?

    How to place an HTML element over another using CSS

    How can I make a fixed background image not stay fixed on scroll?

    How to fill larger image into smaller div?

    How Can I Remove a Surrounding DIV with jQuery?

    How to have multiple CSS transitions on an element?

    How to create a button to every list item which opens a menu over it?

    How can I solve this :before or :after issue in IE7?

    How to make my twitter bootstrap overlap all other elements?

    How to align multiple images in “li” on center

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    How to make jQuery show() stay on page

    How to make the float left and float right on the same line?

    How to get css to work in Django [closed]

    how to float the section tags in html5

    Why are THs bolder than TDs and how to avoid it?

    Three column responsive equal height, with border. How to make it in CSS?

    How can I get my text to hug around the top of my image?

    How to apply css to only one level of list items (not to child elements)

    How to avoid overlapping between two divs positioning absolute inside a div positioning relative?

    how can I make my image (down arrow) disappear when I start scrolling my page?

    How to fill HTML5 input[type=range] on the left side of the thumb with CSS only?

    How to set input:focus style programatically using JavaScript

    How to make a div a link as it transitions in CSS

    How to hold a css style on hover