A common reset for IE, Gecko and Webkit browsers

Question

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?

lawndartcatcher · Accepted Answer · 2011-02-18 19:58:44Z

Well, in theory it shouldn't be necessary since everything is supposed to be standards-based.

Hahahahahahahah snif

Okay...now that I got that out of my system

This site:

http://www.webmonkey.com/2010/02/browser-specific_css_hacks/

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.

Wouldn't you just love to sit Bill Gates down and talk some sense into him? Wonder if anyone has ever had the chance. "Dude. The standards. DO EET!"
@Chris I wish IE's CSS rendering had crashed just as JScript did.

Dori · Answer 2 · 2011-02-19 11:39:19Z

up vote 3 down vote

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:

<body>
    <!-- [if IE]>
    <div id="IEroot">
    <![endif] -->

        <p>Content goes here</p>

    <!-- [if IE]>
    </div>
    <![endif] -->
</body>

Then in your CSS, you can specify styles that apply only to IE:

#IEroot p {
    font-family: "Comic Sans", sans-serif;
}

and styles that apply only to browsers that aren't IE:^*

body > p {
    font-family: "Lucida Grande", sans-serif;
}

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.

^* The > is the child selector; it applies only to immediate children of the previous element. In this case, p is only the child of body for non-IE browsers.

edited Feb 19 '11 at 11:39

answered Feb 19 '11 at 10:10

Dori
7881416

	No need for the DIV. Just apply the IE ID or Class to the BODY tag via the conditionals. Also, if you are using this technique, then there's no need for the '* >' syntax. Just put your nonIE styles first, then your IE styles second (letting the cascade do its thing) – DA01 Feb 19 '11 at 17:28
	@DA01 - It's a matter of personal preference. I don't want conditional comments inside tags; I think it makes updating and searching more difficult. As for the child selector: your method requires rules to be in a precise order, and slows down IE by telling it to apply styles it will then immediately overwrite. Mine doesn't do either. – Dori Feb 20 '11 at 1:42
	I'm not sure what you meant by comments inside tags. I was referring to using conditional comments to write out the entire opening BODY tag. Certainly personal preference. As for the precise order, order is important in CSS. It does load CSS that not all browsers would need. That's the drawback. The advantage is that everything is in the same spot making future maintenance easier. If you're loading a separate CSS file just for IE, then there's no need to do the custom DIV or body tag. Just wrap the IE CSS link tags in conditional comments. – DA01 Feb 20 '11 at 1:48
	@DA01 - ① Previously, you weren't clear about how you handle `body`. Your pages have two `body` tags? That's not something I'd recommend, as I suspect it would put IE in quirks mode. ② I'm not referring to downloading CSS. That's no big deal—it's just text. I'm talking about CSS rules being applied, which means more work for the rendering engine. You have a rule applying to all browsers (including IE) and another that's IE-only. That means IE's rendering engine has to do twice the work for no added benefit. ③ I don't get the reference to a separate CSS file, as I didn't recommend using one. – Dori Feb 20 '11 at 2:20
	no, just one opening BODY tag. I've updated my answer to show an example. Like you said, personal preference. I'd say the rendering issue is minimal if not unmeasurable. Besides, this is only IE 6 users we're talking about ;o) It also wouldn't be twice the work, as I'm typically only needing to tweak styles for IE6 maybe 5% of the total CSS. Your example is perfectly valid and would work just fine. I just prefer to not have to prefix all of the selectors for the good browsers with the * > syntax – DA01 Feb 20 '11 at 21:47

DA01 · Answer 3 · 2011-02-20 21:50:33Z

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:

<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gte IE 7]> 
<body>
<![endif]-->
<!--[if IE 6]>
<body id="IE6">
<![endif]-->
<!--[if lt IE 6]> 
<body id="IE5">
<![endif]-->

Then I can add fixes when needed within the CSS file itself without having to resort to CSS hacks as much:

.myStyle {...for good browsers...}
.IE6 .myStyle {...for IE6...}

That wilk make your CSS a bit bigger, but has the advantage of keeping styles together which aids in future maintenance.

leugim · Answer 4 · 2011-02-21 01:00:38Z

I generally find myself resetting ALL styles so every browser starts, more or less (sigh), the same.

Have a look at this http://meyerweb.com/eric/tools/css/reset/
I found this reset very helpful since it helped me to avoid the browser-specific hacks nearly altogether.

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

asked	2 years ago
viewed	622 times
active	2 years ago

A common reset for IE, Gecko and Webkit browsers

4 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged css or ask your own question.

A common reset for IE, Gecko and Webkit browsers

4 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged css or ask your own question.

Related