Posts Tagged ‘internet explorer’

html: how to create IE specific stylesheets

Just about everyone who has designed a web site has found that, for whatever reason, not every browser will always render their site in exactly the same way. More often than not, the culprit is one of the Internet Explorers, and typically it’s the disparity between IE 6 and 7 that causes the most issues. This technique is just as simple in code and easy to implement as it is useful, and can be adapted in several ways to suit your particular need. First, let’s start with the basics.

Step 1: Create your IE-specific stylesheet(s).

Depending on whether you need to make changes specific to only one browser (let’s say IE 6), or multiple (IE 5.5, 6, 7 are all responding differently), you may need to create more than one statement and stylesheet to accommodate your desired changes. If you aren’t positive yet whether your issues are specific to a particular version of IE, we suggest starting with one stylesheet, and moving to two (or more) if you need to.

Step 2: Create the code.

This code will be placed within the <head> portion of your web site, and ideally will go below your other stylesheet calls.

Now, here’s where we have a lot of flexibility in writing our statement. First, we’ll start with a standard statement we used on our “using simple css to create a great looking site shadow” article:<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->In this example, we are telling all IE browser versions below and including Internet Explorer 6 to load this stylesheet. Any other browser will ignore this statement and will not load ie.css.

Now, let’s cover what exactly is going on here. First, we see “lte.” This stands for “less than or equal to,” and ensures that anything less than or equal to the specified browser (in this case Internet Explorer 6) will listen to this if statement. The IE portion of the statement should be obvious, but the real key here is the number. If we were to change “6″ to “7″ in this statement, Internet Explorer 7 would suddenly choose to take notice of our statement as well.

However, if we were to change the “lte” variable to “lt,” Internet Explorer 7 would again ignore our statement. To explain this, let’s look at our variable options and what they all mean:

1. lte : less than or equal to.
If the statement is lte ie 7, then all Internet Explorer browsers, including and below IE 7 will take notice of this statement.

2. lt : less than.
If the statement is lt ie 7, then all Internet Explorer browsers BELOW IE 7 will take notice of this statement, but IE 7 itself will ignore it.

3. gte : greater than or equal to.
If the statement is gte ie 5, then all Internet Explorer browsers above and including IE 5 will take notice of this statement.

4. gt : greater than.
If the statement is gt ie 6, then only Internet Explorer 7 (and all IE browsers created subsequent to IE 7) will take notice.

Using this simple statement, you can very easily repair small glitches in your CSS code between browsers, or even show and hide messages to site visitors, depending on what browser version the visitor is using.

Note: If you have to place your statement above your standard stylesheet declaration, you may need to add the variable “!important” to the end of your stylesheet items, as browsers are designed to use the last declaration in rendering the web site. As an example, let’s say we were to create a stylesheet for our web site, and at the top we placed the following information for a Class we’ve named “examplediv.”.examplediv{margin-top:0;padding-left:10px;}Then let’s say that at or near the bottom of the same stylesheet (or on another stylesheet that we have linked below this one on our site) we had this code:.examplediv{margin-top:20px}The browser would ignore our first margin-top declaration, and would load “examplediv” width a top margin of 20 pixels. Since we didn’t add a different declaration for left padding on this second example, that original declaration is not overwritten and the browser will use the value defined at the top of the stylesheet of 10 pixels.

This method applies only to the Internet Explorer browser, and can be configured to apply or not apply to the various different versions of IE. Firefox and Safari will ignore this statement.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

DynamiX Web Design

DynamiX Labs is Copyright © 2016 DynamiX Web Design, LLC.
DynamiX Labs is proudly powered by WordPress

Entries & Comments.  |  thanks & about.

The DynamiX Mascot button submit it! Background
hire dynamix!