I am developing a website that emphasizes a lot on CSS. I wish to pre-inform everyone that I am not a professional with the task. The problem I face designing the UI is that Gecko and Webkit browsers tend to respond to a CSS in the same manner, whereas, IE's response is ridiculous. Is there any reset that can aid me in resetting IE, such that it starts behaving similar to Gecko and Webkit?
Well, in theory it shouldn't be necessary since everything is supposed to be standards-based.
Okay...now that I got that out of my system
Give some pretty good browser-specific hacks; essentially what you're doing is loading different CSS sheets based on the browser. Unfortunately that means you have to write a CSS sheet for each browser and test on each browser every time you make a change.
Another approach might be to look and see if there are specific sections that are giving you problems. Maybe start simple and add features to the CSS sheet until it breaks? (or comment out sections and move the comment tags as you go) Remember that you can grab styles from multiple stylesheets, so you could have "ThisIsTheMainStyleSheet.css" as well as "StupidAdditionalCSSForInternetExploder.css" and "StupidAdditionalCSSForOtherBrowser.css".
You might want to find shorter names than what I used.
I generally find myself resetting ALL styles so every browser starts, more or less (sigh), the same.
Have a look at this
I would try to use the conditional comments at the very last stage of design where you have moved earth and sky (of the css world, obviously) to make the gap between browsers acceptable enough.
Then, if you must, apply those.
Bear in mind that any conditionals need to be rechecked -and worse- sometimes rewritten every time you have to improve or make changes to the stylesheets
That's not what a CSS reset really does. It'll help in that the defaults will be closer but it's not going to fix all of the bugs in all the various versions of the dreaded internet explorer web browser.
The technique I've adopted is to give the BODY tag an IE-specific class using conditional comments. So, if you want to single out IE 6 and older, you can use this:
Then I can add fixes when needed within the CSS file itself without having to resort to CSS hacks as much:
That wilk make your CSS a bit bigger, but has the advantage of keeping styles together which aids in future maintenance.
DA01 already mentioned IE's conditional comments, but I figured you might want to know more. Since I can't put this in comments, here's the markup to add to your HTML:
Then in your CSS, you can specify styles that apply only to IE:
and styles that apply only to browsers that aren't IE:*
You can also specify particular versions of IE, which is useful if (for instance) you find IE 9 well-behaved enough to sit at the big kid's table. There's a lot more info at Targeting IE Using Conditional Comments.