Web Site Design and Development


The End of Internet Explorer 6 (IE6)

IE6 Recycled

Empty Recycle Bin

Nearly 10 years after it’s release date and long overdue, several major web sites, YouTube in conjunction with Google for instance, have made statements that they are ending support for IE6. Even Microsoft is campaigning to move people away from the antiquated browser, even though Microsoft has committed to support it until the year 2014.

Opinions amongst web developers and designers have been varied on whether to keep designing web sites that support IE6 or to just end it and let the last of the IE6 users experience a broken layout or unusable functions. Up until now, Midwest Web Trends has continued to support IE6, but with other major websites ending support for IE6, and with IE9 now moving into the spotlight, I felt the need to join the cause of putting an end to IE6. However, I didn’t want to leave the last of the IE6 users wondering what is wrong with the web page they are visiting. I wanted to put a notice on my web pages for IE6 users so they would at least know why the page layout or certain page functions might appear to be broken.

If you happened to visit YouTube using IE6 within the past several months, you probably have noticed that there is a message stating that your browser is no longer supported.

Youtube IE6 Notice

Youtube's Notice to IE6 Users

I decided to take a page from YouTube and create my own IE6 notice to users, modeling it after the YouTube version and it looks like this.

IE6 Notice

Midwest Web Trend's Notice to IE6 Users

Do you want to put this on your own website to give IE6 users a nudge in right direction?

It’s easy. Here’s how:

Copy and paste the following code into your HTML document. You’ll probably want to put it just after the opening <body> tag in most cases.

<!--[if lte IE 6]>
  <script type="text/javascript">
    function hideDiv(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
  </script>

  <div id="stopie6" style="margin: 8px auto; text-align: center; width: 900px; background: #edf0cd; padding: 8px; position: relative;">
    <img src="/stopie6images/exclamation.jpg" alt="" style="position: absolute; top: 5px; left: 5px;" />
    <script type="text/javascript">
      document.write("<a style=\"padding-right: 12px; background: url('/stopie6images/close.jpg') no-repeat right top; font-size: 8px; text-decoration: none; display: block; position: absolute; top: 5px; right: 10px; color: #333;\" href=\"#\" onclick=\"hideDiv('stopie6', 'none');\";>Close</a>");
    </script>
    <h3 style="color: red; margin: 15px 0 0 0;">Notice: You are using an outdated, unsupported, and insecure web browser, IE6.</h3>
    <p style="margin: 8px;">Web community support for Internet Explorer 6 has ended. Make sure and update your browser so you can continue to view your favorite websites. Below are some links to several of the more popular current web browsers, all of which are absolutely free.</p>
    <div>
      <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img style="border: none" alt="Download Internet Explorer 8"src="/stopie6images/ielogo.jpeg" /></a>
      <a href="http://www.opera.com/"><img style="border: none" alt="Download Opera Web Browser" src="/stopie6images/opera.jpeg" /></a>
      <a href="http://www.google.com/chrome/"><img style="border: none" alt="Download Chrome Web Browser" src="/stopie6images/chrome.jpeg" /></a>
      <a href="http://www.apple.com/safari/"><img style="border: none" alt="Download Safari Web Browser" src="/stopie6images/safari.jpg" /></a>
      <a href="http://www.mozilla.com/en-US/firefox/"><img style="border: none" alt="Download Firefox Web Browser" src="/stopie6images/firefox.jpeg" /></a>
    </div>
  </div>
<![endif]-->

There’s just one thing left to do. You’ll need the images to go along with that code. You can download the the images from this link:

stopIE6 images

Unzip the downloaded file, and then load the entire stopie6images folder to your web server document root, generally “public_html”.

That’s all there is to it. Here is a break down of the code above:

<!--[if lte IE 6]>
<![endif]-->
This is an IE conditional comment that targets only IE6 and earlier versions of Internet Explorer. Of course, anyone using something earlier than IE6 must have just emerged from a cave in the mountains, but it’s there for good measure. What this means is that any HTML code within the conditional comments will only be displayed for Internet Explorer version 6 and earlier. Internet Explorer 7, 8 and 9 will ignore it as will all other browsers (Firefox, Chrome, Safari, etc.).

<script type="text/javascript">
function hideDiv(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
This is a simple JavaScript function that will hide an HTML element for a given id when executed. This will be used to hide the IE6 notice when the user clicks the close button. Remember that non IE6 users will not see the notice to begin with.

If you know even a little HTML, then the rest of the code should be self explanatory. The only other item of interest is the JavaScript for the close button.

<script type="text/javascript">
document.write("<a style=\"padding-right: 12px; background: url('/stopie6images/close.jpg') no-repeat right top; font-size: 8px; text-decoration: none; display: block; position: absolute; top: 5px; right: 10px; color: #333;\" href=\"#\" onclick=\"hideDiv('stopie6', 'none');\";>Close</a>");
</script>
The code for the button is displayed using the document.write command so that IE6 users who have JavaScript disabled will not see a broken close button. And finally the JavaScript onclick event handler calls the hideDiv function created above which closes the IE6 notice when the close button is clicked.

Click the close button and the notice disappears. Reload the page and it’s back again. Go ahead and try it out below:


Notice: You are using an outdated, unsupported, and insecure web browser, IE6.

Web community support for Internet Explorer 6 has ended. Make sure and update your browser so you can continue to view your favorite websites. Below are some links to several of the more popular current web browsers, all of which are absolutely free.

Download Internet Explorer 8 Download Opera Web Browser Download Chrome Web Browser Download Safari Web Browser Download Firefox Web Browser

This will help give that small percentage of persistent IE6 users a little nudge in the right direction. Also, if you decide to completely drop support for IE6, this will help to show the IE6 users that it isn’t you’re web site that’s broken, but the fact that they are using an obsolete and outdated browser.

Posted in HTML/xHTML, Web Browsers, Website Administration | Tagged , , , , , | 4 Comments

Automate Your Website File and MySQL Backups

Part 1 – Prerequisites

Backing up your website files and databases is one the most important things a website owner can do. In this article, I’m going to show you a method of automating backups of your website files and MySQL databases. Then we will use WinSCP to automatically retrieve those backups and store them on your local computer on an automated schedule.

There are a few prerequisites to this method:

  1. Your website needs to be hosted on a linux based server
  2. You need to be able to create cron jobs on your web server
  3. You need an FTP/SFTP account set up on your web server
  4. You will need to download and install the free program WinSCP
    • You can get it here.
  5. You need a Windows computer with access to the Windows task scheduler

It is best to use SFTP instead of FTP if your web host supports it (most should).  Although FTP can be used, SFTP is highly recommended for security reasons.

Anywhere you see certain words highlighted in red bold italic text throughout this article, you need to change for your custom situation as follows:

CpanelUsername = The username you use to log on to your web hosting control panel.
MySQLusername = Your username to access your MySQL database.
MySQLpassword = Your password to access your MySQL database.
dbXname = The name of your database.
SFTPUsername = The username for your SFTP account.
SFTPPassword = The password for your SFTP account.
SFTPport = The port you use for SFTP (usually 22, sometimes 2222).

Document Root: This article assumes that the path to your public web directory (AKA document root) is “/home/CpanelUsername/public_html”. This may not be your actual case, depending on your web host. If this is not your path to document root, you will have to replace every instance of “/home/CpanelUsername/public_html” with your actual path to document root. If you are not sure what your path to document root is, you will need to check with your web hosting provider.

Next page – Backing up your databases.

Posted in Website Administration, Website Backups | Tagged , , , , | 11 Comments

Clean Up Your HTML Code By Making Use of Descendant Selectors

I’ve seen a few aspiring web designers who go overboard with the use of unnecessary div tags as well as the unnecessary assignment of class and id selectors. Here is one recent example I came across.

<div id="menuContainer">
<ul id="menu">
<li class="menuListItem"><a class="menuLink" href="link1.html"><span class="menuText">Item1</span></a></li>
<li class="menuListItem"><a class="menuLink" href="link2.html"><span class="menuText">Item2</span></a></li>
<li class="menuListItem"><a class="menuLink" href="link3.html"><span class="menuText">Item3</span></a></li>
<li class="menuListItem"><a class="menuLink" href="link4.html"><span class="menuText">Item4</span></a></li>
</ul>
</div>

Very messy and loaded with unnecessary code. This well meaning code writer apparently thought he had to assign a selector for every single item he wanted to target, and then wrap the whole thing in a div tag to supply yet another selector to target.

Everything that can be accomplished with the code above, can also be accomplished with the following code.

<ul id="menu">
<li><a href="link1.html"><span>Item1</span></a></li>
<li><a href="link2.html"><span>Item2</span></a></li>
<li><a href="link3.html"><span>Item3</span></a></li>
<li><a href="link4.html"><span>Item4</span></a></li>
</ul>

As you can see, the above code is much cleaner and tidier than the first example. Note that the only selector in this block of HTML is the ul tag with the id of menu. Also missing is the div that wrapped around the whole block of code. Since the ul is already acting as a container for the content, wrapping everything in another container is simply redundant and unnecessary.

So how do you go about targeting the other elements you need to apply styling to, such as the li, a, and span tags? That’s where descendant selectors come to play. A descendant selector allows you to target any of the elements that are a descendant of another element. In the example above, the li, a, and span tags are all descendants of the ul tag.

To take it a step further, in addition to being a descendant of the ul tag, the a tags are also a descendant of the li tags. Then it should follow that the span tags are descendants of the ul, a and li tags. To sum it up, any HTML element that is nested inside another HTML element becomes a descendant of the parent element it is nested within.

Using descendant selectors each element can be targeted for styling like so:
To target the li tags:
#menu li{}
To target the a tags:
#menu a{}
You could also use a more specific selector:
#menu li a{}
To target the span tags:
#menu span{}
Or to be more specific with your selection, any of the following could work:
#menu li span{}
#menu a span{}
#menu li a span{}
You’re probably asking by now, why would you need to be more specific? If #menu span{} works, then why would you ever want to use #menu li a span{}? Well, for this example you probably wouldn’t, but consider the following:
<div id="content">
<p>This is a <span>paragraph</span></p>
<p>This is another <span>paragraph</span></p>
<ol>
<li>This is a <span>list item</span></li>
<li>This is another <span>list item</span></li>
</ol>
</div>

In this example we want to make the span tags within the paragraph bold and the span tags within the ordered list italic, but not bold. If we simply used #content span{}, then we would be affecting the span tags in both the paragraphs and the ordered list. In this case we need to be more specific.
To target the span tags in the paragraph and make only that text bold without affecting any text in the ordered list, we would use:
#content p span{
font-weight: bold;
}

To target the span tags within the ordered list and make only that text italic without affecting any text in the paragraphs we would use:
#content li span{ //you could also use #content ul li span{}
font-style: italic;
}

If, by chance, you did want to target all the span tags in both the paragraphs and within the ordered list to, let’s say, make the font blue, then you would simply use:
#content span{
color: blue;
}

This would make the text wrapped with span tags blue in both the paragraphs and the ordered list.
So there you have it, cleaner, tidier html/xhtml code by making better use of descendant selectors.

Posted in CSS, HTML/xHTML | Tagged , , | 7 Comments

Proudly powered by WordPress.
preloaded image preloaded image preloaded image preloaded image preloaded image