How Do I Write Style Sheets For Internet Explorer?
New Updates
I understand that I need to write a specific style sheet for IE5 and upwards but I am not sure how to do this. My webpage looks just fine on safari and firefox but on IE6 the different objects are all over the place. How do i go about laying out the page for IE6 etc.
I use mac by the way Web Design?
Hi, I'm want to learn web design but dont have the money to do a course right now. What web site can i go onto to start learning how to design web sites? What would be the best course to learn web design?
Many Thanks
Hatty.... More »
How Can I Become A Web Design Teacher In A Community College?
I want to teach web design in a local community college. So far I have my associated degree. I am also in the web design business and have been for years. What do I need to do to become a web design teacher?.... More »
The best site I've found for fixing IE bugs on a web page is http://www.positioniseverything.net/ If it's a few minor border or margin differences, you can use conditional comments. Otherwise it gets more complex – but they have example code for just about any problem you'll run into. (The site is solely about this incompatibility problem.)
(1) You DO NOT need to write separate style sheets for IE5 and upwards. You need to learn the differences between browsers. These can be learned by careful study of strict and proper CSS methods online, and in books. Please consider: http://www.alistapart.com http://www.css-discuss.org
Cascading Style Sheets: the Definitive Guide
Pro CSS and HTML Design Patterns
Eric Meyer on CSS
More Eric Meyer on CSS
(2) If AND ONLY IF after all that you must resort to "hacks" then you may look at "CSS Hacks & Filters"…but they should be considered a last resort for the lazy and only if you really understand what you're doing!
Don't worry too hard about IE5; only about one-half of one percent of users surf on it these days.
Ideally, you make everything that can be made to do so, work the same way across all browsers. Then, if there deviations in the IE browsers, you create overrides to the cascade that only fix the problems for the IE version you care to support. By bringing those styles in later in the cascade, you replace the default styles with the IE replacements. IE offers a device called "conditional commemts" that allow you to enter styles, HTML, and scripts in comment blocks that only IE knows to read. All of the "good" browsers ignore these as being just comments – IE chcks to see whether the condition (if) is pertinent to the version of IE and, if so, uses the instructions in the comment block as thought they were not comments.
MS discusses conditional comments at :http://msdn.microsoft.com/en-us/library/...
In general, I recommend against hacks, since they're usually syntactically obscure and have no guarantee to remain effective as new versions of the browsers for which they initially work are released. The conditional comments can be made as specific as you wish to target IE versions. If you need to support non-IE browsers as well, I have a script-driven CssManager prototype that supports the inclusion of as many competing style-sheets as anyone could wish. The source for the CssManager prototype is at :http://home.comcast.net/~richarduie/samp...
The base page for that site has links to free, online resources for client-side web programming with a quite a few items related to CSS. There are pertinent learning resources in the right nav-bar, and some great article sites in the left .http://home.comcast.net/~richarduie/
I suspect that, if you stick to writing good styles for Firefox (most of which will be good for IE7 as well), and tweaks for IE6 and 7, you hit 95-99% of the browsing universe with good-looking pages.
<head>
<!– set default sheet for everthing not IE –>
<!–
you'd actually use a link element to get the default style-sheet
<link rel="stylesheet" href="default.css" type="text/css" />
in the IE conditional comments below, you'd use link elements
to the alternative style sheets for IE, e.g.,
<link rel="stylesheet" href="IE6.css" type="text/css" />
<link rel="stylesheet" href="IE7.css" type="text/css" />
for the example, we'll use an in-page sheet…
–>
<!– default styles –>
<style>
h2 { color: red; }
</style>
<!– for IE before 7 –>
<!–[if lt IE 7]>
<style>
h2 { color: green; }
</style>
<![endif]–>
<!– for IE 7 and beyond –>
<!–[if gt IE 6]>
<style>
h2 { color: blue; }
</style>
<![endif]–>
</head>
<body>
<h2>this header is red in Firefox, blue in IE7 and later, and green in IE before 7</h2>
This is the simplest usage. There are three style sheets named default.css (for Firefox and all browsers other than IE), IE7.css (for IE7 and later), and IE6.css (for all versions of IE prior to 7).
</body>
</html>
No matter how diligent or educated you become about CSS, you will need alternative styles for SOME browsers (especially IE6), if your site is more complicated that "Hello World!"