: A common reset for IE, Gecko and Webkit browsers 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 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?
More posts by @Lengel450
4 Comments
Sorted by latest first Latest Oldest Best
I generally find myself resetting ALL styles so every browser starts, more or less (sigh), the same.
Have a look at this 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
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.
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.
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:
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.