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..

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    How to create shadow in JSF input field

    how to select css class attributes from mootools,getStyle()?

    How can I remove a bootstrap buttons hover effect?

    How to add a new rule to an existing CSS class

    How to apply CSS page-break to print a table with lots of rows?

    How to use scss with css modules / postcss inside components

    JavaScript or CSS: How can I make a transition of one element to another?

    CSS: how to layout 3 columns, 2 are optional

    How to make pop up div locked to the page coordinates in jQuery

    How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

    How to place divs one next to another without floatant?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to have several equal sized div blocks take 100% of a parent container

    How do i make the evenly spread elements in my nav bar not touch the edges of the page?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to iqnore mousemove event on child ul

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How to simulate multiple
    tag with CSS

    How to build a mobile version of a non-mobile website? [closed]

    How to calculate effective CSS for a DOM node using PHP

    How to mix colors in CSS?

    How to keep CSS style If I change the html content dynamically?

    Show a sentence with animation

    less: how to import multiple css?

    How to set image height 90 % of whole page height (not viewport)

    How do i create custom grid class in Bootstrap for lg as well as xs screen size?

    How do I change the color of Semantic UI icons?

    How can I vertically align the text in an anchor tag?