BKaF – Brad Kovach and Friends

Although we know that Firefox has some issues, a large portion of the internet is starting to use Firefox. As a web developer, there are several methods that I have devised to show the Internet how I browse. Using a variety of CSS and HTML tricks, I can publicize Firefox. Since my website was designed with primarily Firefox in mind, my users would benefit from switching. I’m no dummy… I’ve made my website work in the Big Four: IE6, IE7, Firefox and Safari. Through this article you should be able to learn some techniques of making IE cooperate a little more.

Firefox is gaining, but it still isn’t catching IE.

Easy: reveal something in the page.

We could use some of the advanced facets of conditional comments but we are only interested in appealing to one group of IE users: all of them. This conditional comment should do the trick…

<!--[if IE]>HTML<![endif]-->

The “HTML” is where we’ll put the IE specific content.

To show your IE users a Firefox banner, you could use…

<!--[if IE]><div id="getfirefox" style="text-align:
center"><a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=216"><img
border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/ firefox2/468x60FF2_Orange.png" /></a></div><![endif]-->

Simple as that. Anything inside the conditional comment will be shown to your IE users!

Easy: Reveal something with server-side scripting

Using a variety of server-side languages, you can determine whether a user is using IE or not. I prefer PHP, since I’m a WordPress junkie.

<?php
if (eregi("MSIE",getenv("HTTP_USER_AGENT")) ||
eregi("Internet Explorer",getenv("HTTP_USER_AGENT"))) {
#insert IE specific code here.
}
?>

Method 3: CSS

You can easily assign classes to elements that will make a Firefox link look extra Firefoxy. This particular example will push over a link to make room for a little Firefox icon.

.firefox {
padding-left: 20px;
background: URL(firefox.png) no-repeat !important;
}

Now, in my web pages, I can assign this to anything I’d like, including links that would let you download Firefox. To make this link, I simply added the Firefox class to the link…

<a href="http://www.spreadfirefox.com" class="firefox">links that would let you download Firefox.</a>

Other uses for conditional comments

Aside from using conditional comments to evangelize Firefox, I’ve also used them to keep my valid CSS code hack-free. In some of my websites, such as ones I did for Lincoln County School District #2, it wasn’t appropriate to force an opinion on users. However, It is very appropriate to warn the users that they are using an old version of their browser.

In the case of IE7 being the latest and greatest breed if Internet Explorer, the following code will tell users that an upgrade is available for them. If you want the background as well, you’ll have to change the URL(ielogo.jpg) part to match a background image that you like.

<!--[if !IE 7]></p>
<div id="ieupgrade" style="background: URL(ielogo.jpg)
no-repeat; padding: 10px 15px 10px 200px; text-align: right;">
<h2>Uh-oh!</h2>
<p>Although we’ve taken every possible step to ensure our site
works well with your computer, your browser is out of date!</p>
<h3><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx"
target="_blank">update now »</a></h3>
</div>
<p><![endif]-->

Conclusions

Although good web developers shouldn’t be narrow-minded and develop for one browser, evangelism of a safer Internet is certainly worthwhile. Any action to help your users make a security-conscious decision is a good action. Do it.

Citations

• How to block MS Internet Explorer from your site… [http://www.devin.com/ieblock_howto.shtml]
• About Conditional Comments [http://msdn2.microsoft.com/en-us/library/ms537512.aspx]

No Responses to “Help your IE users (discover Firefox)”

Leave a Comment