jump to navigation

How to: Use Targeted Contacts to make Internet Explorer Behave February 21, 2010

Posted by regan222 in Computers and Internet.
trackback
Due to the amount of interest in web design and development I am going to expand on last week’s post and go into detail about how to develop a web site that is complaint with current standards from the W3C as well as visible in Internet Explorer 8.  First of all you should know that the standards for the Internet are set by an international body called the World Wide Web Consortium.  You can visit their web site through the link above.  Next you should be aware that hardly anybody cares about the standards that they put out.  Developers (read this as Microsoft) are constantly putting out noncompliant technologies and hacks that in no way fit in with the standards of the W3C.  Why should we go to the trouble of doing all this extra work then?  Good question…At some point in the (hopefully) near future, these standards will be enforced and when that happens, then all the other home-made technologies and hacks will not be supported.  They will quit working.  If you have spent $2000 or $3000 on building a web site in the last year of so you will not want to turn around and spend more just to make it fit the standards.  INSIST on compliance and you won’t have this problem.  Besides, its the right thing to do.
In a nut shell, the current accepted web technologies are as follows: Web pages are authored in xHTML v1.0 and formatted with Cascading Style Sheets.  This mark-up language is very similar to the HTML that most developers are familiar with.  It is a bit more picky about format though. 
  • All tags must be closed in some way (one of two ways actually).
  • All tags should be entered in lower case.  Capitalized tags will be flagged if you try to validate the page. 
  • xHTML tags must be properly nested.  You can not start inline tags and then enter a format tag and then close the inline tag and then close the format tag.  You must start and stop things before you open a new tag.  (Ex. <object><font>some text</object></font>  is improper (in more ways than one)  You must open and close tags in the proper order.

xHTML is based on the syntax of XML (if you don’t know what this is, click here to google it) and the parser used to read it is a bit more particular about what it will digest.

First we need to plan our strategy before we start coding.  The best path to follow is to develop your code to look good to Firefox.  This browser is the most standards complaint of the popular browsers.  You should, by the way, have no less than 4 browsers installed on your development machine.  You need IE (you already have it), Firefox(for compliance), Safari (for apple users), and Opera (it has a fairly large following).  You might also install Google Chrome but it really doesn’t have a big following compared to the others. 

Start by designing the page to look good in Firefox.  If you don’t use Adobe Dreamweaver, learn how now.  You can download a 30 day trial at the link.  It generates compliant code (for the most part…you will still need to go into the code and fix some things) and it is easy to use once you learn how and get familiar with it.  A good way to design is to have a rough sketch of your page approved by the customer and build from that.  The following steps make it easier.

  • Put the text and images into your page all along the left margin.  Just type them in as if you were making a list of sentences and pictures.  Don’t worry, you will use CSS to place the elements precisely later.
  • Link an external style sheet to your page.  While you are in the header, make sure you have all your meta tag data either in place or being collected.  You will need to declare a DOCTYPE and get keywords, descriptions, and decide if you want to allow bots to index your page and what pages you want them to have access to.  To link a style sheet, use the following code snippet…<link href="CSS/main.css" rel="stylesheet" media="screen" type="text/css" />  The link tells your visitor’s browsers where to find your style sheet (in this case the web site directory, a folder called CSS, and the sheet is named main.css.  Rel tells the browser that this is a style sheet it is getting.  Media tells your browser that the style sheet should be used if the web page is appearing on a monitor screen.  (You can also put in "print" for example to format your page to be printed).  The type tells your browser the MIME type of the style sheet.  In this case it is a text document with the file type .css
  • Create regions called divisions in the style sheet, decide where they are going to go and what they will contain on the page, and then place <div></div> tags around the text you want in that particular section or element.  This is not a tutorial on web design so I will skip a good bit of the technical details here.  Just know that you will make changes to the style sheet to precisely move things into exactly the order you want and check your changes using FIREFOX only.  We’ll get to the other browsers later.
  • Once your page is built and everything looks good in the Firefox browser, go the the W3C validator website and enter the URL of the page you are working on.  This can be either the actual web site domain (if you work on the live server), or the domain of the test server where your pages are currently posted (if you have a test server).  Type in the URL for the page you wish to validate and let the page do its work.  You will likely see a red banner at the top of the page and a list of errors.  Fix them.  The description of each error will offer ideas on how to fix them.  Check after each repair using Firefox until all errors are fixed and your page still looks good in Firefox.  When the last error is repaired and you revalidate, you will see a green banner at the top of the page and have an error count of zero.  You can also add the code that tells everyone you have a complaint page to the bottom of your site.  I put the banners in the footer.  All you need to do is paste the code in where you want the banner to appear.
  • Now we can deal with Internet Explorer.  IE has the largest market share of all the web browsers.  This is not likely to change any time soon because Microsoft bundles its browser with all of its operating systems and THAT market share is not likely to change ever.  They have too much lead on everyone else.  IE, for some reason known only to Microsoft, does NOT digest CSS and format information from web pages like everyone else.  It does not play by the rules.  IE especially does not count pixels like everyone else and so when you specifically place an element that looks good in Firefox, it will NOT be in the same place when you look with IE.  We need to get a style sheet that only IE will read.  Fortunately there is a compliant technique toe make this work.  The technique is called Conditional Comments and it works by making a comment in your page that only IE will read.  Every other browser sees the entries as comments but IE sees and reads them.  The following code snippet will create a comment that IE will read as a declaration for a style sheet.  It will replace the style sheet that was loaded from the previous link…
    <!--[if IE ]>
      <link href="iecss.css" rel="stylesheet" type="text/css">
    <![endif]-->
   You should recognize the css link. The comment mark-up 
should also be familiar. The difference is the [if IE tag
that does the trick. IE sees that and reads what is inside
the tags. Be sure to place this entry after the style sheet
declaration you already have for the main.css style sheet.
Name the new style sheet something different
that will let you know it is specific to IE. The initial link
will be overwritten with this new link when IE reads it and
IE will use its own style sheet for format info. Every other
browser will see this as just a comment to be ignored and
so they will ignore the IE style sheet as well.
  • Now go back and look at your page in IE.  You will 
    probably notice the whole page has no style. IE is looking
    for the new style sheet and we haven't built it yet. Create
    a new style sheet and save it as whatever you decided to
    name the IE specific sheet. Copy and paste the entire
    contents of your normal sheet to the IE sheet. Using IE,
    go and look at your page. You will likely find that some
    things don't work. Make adjustments to your IE only sheet
    until everything works.
  • Revalidate your page.  Make sure you haven't broken 
    anything with all the editing. Make one last check with
    IE and Firefox and you are done. You have created a web
    page that works in IE and Firefox and it is completely complaint
    with the W3C standards.
If you have followed this tutorial and already know how to do 
this, please let me know if you think I have made any mistakes
or have been unclear in my explanations. Thanks again for reading.
Advertisements

Comments»

No comments yet — be the first.

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: