jump to navigation

Making Internet Explorer Behave… April 10, 2010

Posted by regan222 in Computer and Technology.
Tags: , , , , ,
trackback

Greetings…It seems that this blog is taking a turn for technology.  Tonight I wanted to do something quick and easy but also useful.I am going to show you how to make your web site look good to multiple browsers by using a handy little feature called conditional comments.  We will use Adobe Dreamweaver CS3 to edit a site and add conditional comments so that the site will format correctly as we expect in Firefox as well as in Internet Explorer 8.

First of all, a bit of development background.  The best way to lay out a web site is to do the original design using Firefox or some browser that is 100% W3C compliant.  The World Wide Web Consortium is the governing body that sets the standards for how the Internet works.  They say what is and what is not good HTML, although now it is XHTML that we have to worry about.  A compliant browser is a web browser that interprets web pages and their supporting document exactly as the 3WC says it should.  As you might guess, Microsoft, for whatever reason, has never been one to follow along with the crowd.  Internet Explorer, aside from being the most popular browser in the world, is terrible when it comesto displaying web pages in a predictable manner.  It misinterprets style sheets on multiple levels.  In order for all of your traffic to get the same experience you need to have multiple formats.  The easiest way to determine which browser format to present is a tool called conditional commenting.

Lets begin by setting up some standard formatting.  Here is an HTML document with two divisions set up.  They should be exactly aligned and there should be 3 pixels between them.  You’ll notice the white text in each square.  If we look at Firefox, the text looks as we expect
with a 3 pixel space between the text and the top of the division.  If we look at the same page in Internet Explorer you’ll notice that that space between the top of the division is gone.  IE measures distance differently that everyone else.  In order to fix this discrepancy we will use a feature that was built into Microsoft Windows and works only on Internet Explorer running on windows; conditional comments.

The best work-flow, when designing any type of web page is to begin building in a compliant browser and then make IE match.  We set up our site to work in Firefox and then adjust from there.  In order to link a cascading style sheet to a web document we use the following code snippet:

<code>
<link href=”CSS/FireFoxStd.css” rel=”stylesheet” type=”text/css” />
</code>

This code snippet, placed in the <Head> area of the web document, will force that document to follow the formatting
cues set up in the Firefoxstd.css style sheet found in the CSS directory of the web site’s main directory. Any browser that sees that code will reference that style sheet and render the page accordingly.  HOWEVER, the way IE renders the page and the way Firefox renders that page are two different things.  In order to make them look the same to all viewers, regardless of race, color, creed, national origin, or browser you need to make some minor adjustments that only IE can read.

Step 1: Create a new style sheet, name it IEStd.css and save it in the CSS directory with the Firefox sheet.  Copy all format
information from the firefox sheet to the IE sheet.  Enter the following code snippet directly beneath the link to the Firefox sheet.  Copy this code snippet exactly.

<code>
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”IEStd.css” />
<![endif]–>
</code>

Step 2: Re edit the page using IE to evaluate the results.  Make all your changes on the IEStd style sheet.

Step 3: Post both style sheets as well as the web document you are editing to whatever server your domain is hosted to.  Whenever a client using IE loads the page they will it formatted according to the IE sheet.  When anyone else sees the page it will format according to the Firefox sheet.  The differences between IE and Firefox no longer present a problem.

And there you have it.  You can completely reformat a page based on what browser the client is using.  You can even differentiate between versions of IE.  The following code snippets will allow you to designate what versions of IE follow your style sheets.

If you are targeting IE6, for example…

<code>
<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>
</code>

Just enter the version number in the comments section and link the style sheet between the comment tags.  This will also work for embedded styles.  You simply put format instructions between the comment tags instead of linking a sheet.

And that’s it for another exciting adventure in targeted formatting.  Thanks for stopping by.  Don’t forget to rate the post and offer comments. TaTa

Advertisements

Comments»

1. wildstorm - April 10, 2010

So if I subscribe to your blog and read everything you write for the next six weeks I won’t ever have to bug you when something goes wrong on mine. Right?

regan222 - April 10, 2010

Well it depends on whether you are doing content creation or PC repair. most of this stuff is how to build things, not how to fix them.

2. wildstorm - April 10, 2010

Oh. Would you write me a tutorial on how to fix things. I know enough to get me in trouble. And trouble does not happen enough times for me to remember what I’m supposed to do.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: