ie6_fixer

version 0.5.1
Robin Brouwer
45north

To use this gem you need to put the following Ruby code in your layout right before the closing body or head-tag. Just make sure all your javascripts and stylesheets are loaded before initializing this gem.

<% ie6_fixer do %>
    Only IE6 sees this!
<% end %>

Everthing in this block will only be shown if the user has IE6.

You can pass in your own HTML, but you can also use the ie6_fixer helpers:

- png_fix           # => Fixes transparent PNG's with CSS3 PIE.
- css3_fix          # => Fixes some of the CSS3 functions with PIE.htc.
- fixed_fix         # => Allows you to easily use 'position:fixed'. Won't work in combination with css3_fix!
- fixed_fix_active  # => Another 'position:fixed' fix. Loads a Javascript file that runs the whole time.
- max_fix           # => Allows you to easily use max-width and max-height.
- min_fix           # => Allows you to easily use min-width and min-height.
- warn_ie6          # => A helper that shows the user a notification that he/she is using an outdated browser.
- kill_ie6          # => A helper that's just for fun: sets 'display: none' on the body tag. ;)

If you want to have a block for other versions you can use the ie_fixer helper:

<% ie_fixer do %>
    Only IE6, IE7 and IE8 see this!
<% end %>

You can also specify which versions you want included:

<% ie_fixer :ie6, :ie7 do %>
    Only IE6 and IE7 see this!
<% end %>

Future versions will include more IE6 fixes. If you got some suggestions, please contact me at [email protected].

NOTE #1: The fixes in this plugin aren't the best-of-the-best IE6 fixes. Most of these fixes use Javascript to achieve the desired result. This plugin is just a way to fix IE6 issues quick-and-maybe-a-bit-dirty.

NOTE #2: I didn't create any of the IE6 fixes in this plugin. I don't know if any of the authors want recognition for their work. If so: please contact me at [email protected] and I'll add you to this README.

Installation

Put this inside your Gemfile and run bundle install:

gem "ie6_fixer"

Install as plugin with the following command:

rails plugin install git://github.com/RobinBrouwer/ie6_fixer.git

This is a Rails 3 plugin. When you're using Rails 2 you should use version 0.3:

script/plugin install git://github.com/RobinBrouwer/ie6_fixer.git -r 'tag v0.3'

png_fix

You can pass several strings to this helper. These strings consist of the CSS selectors that need the fix. You can pass whatever CSS selector you want. Example:

<% ie6_fixer do %>
    <%= png_fix "#id_name", ".class_name", "#content img" %>
<% end %>

The following will be put into the ie6_fixer block:

<style type="text/javascript">
  #id_name {-pie-png-fix: true; behavior: url(/javascripts/ie6_fixer/PIE.htc);}
  .class_name {-pie-png-fix: true; behavior: url(/javascripts/ie6_fixer/PIE.htc);}
  #content img {-pie-png-fix: true; behavior: url(/javascripts/ie6_fixer/PIE.htc);}
</style>

css3_fixer

This fix uses the PIE.htc file and allows you to render the following CSS3 properties in IE6:

box-shadow
border-radius
linear-gradient

For this to work you need to make sure the CSS3 property is also declared in your CSS without a prefix:

<style type="text/css">
div {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px; /* This is for PIE.htc */
}
</style>

You can then add the following to your ie6_fixer block:

<% ie6_fixer do %>
    <%= css3_fix "#content", ".footer" %>
<% end %>

Again you just pass all CSS selectors as strings. The following CSS will be created:

<style type="text/css">
#content {
    behavior: url(/javascripts/ie6_fixer/PIE.htc);
}
.footer {
    behavior: url(/javascripts/ie6_fixer/PIE.htc);
}
</style>

You can also directly put this behaviour in your CSS:

<style type="text/css">
div {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    behavior: url(/javascripts/ie6_fixer/PIE.htc);
}
</style>

This is possible because the PIE.htc file is automatically copied to your javascripts folder.

fixed_fix

Allows you to easily set 'position:fixed' on different elements. You need to pass the CSS selector and the :top, :left, :bottom or :right positions as a hash. This helper will not work on an element that uses the css3_fix!! Use the fixed_fix_active helper for this.

<% ie6_fixer do %>
    <%= fixed_fix "#header" => { :top => 10, :left => 20 }, ".footer" => { :bottom => 100, :right => 30 } %>
<% end %>

The following will be generated:

<script type="text/javascript" src="/javascripts/ie6_fixes/fixed.js"></script>
<style type="text/css">
body {
    background:url(/javascripts/ie6_fixer/foo) fixed;
}
#header {
    position:absolute;
    top:expression(fixedIE('Top',10,this));
    left:expression(fixedIE('Left',20,this));
}
.footer {
    position:absolute;
    top:expression(fixedIE('Bottom',100,this));
    left:expression(fixedIE('Right',30,this));
}
</style>

fixed_fix_active

This is another 'position:fixed' fix that is easier to use, but has some downsides. Sometimes the fixed element flashes a bit when you scroll or resize the window. It also uses a lot more Javascript, so the efficiency isn't as good as the helper explained above.

<% ie6_fixer do %>
    <%= fixed_fix_active %>
<% end %>

This generates the following HTML:

<script type="text/javascript" src="/javascripts/ie6_fixer/fixed_active.js"></script>

max_fix

This fix allows you to set a max-width and max-height to your elements. It works similarly to the 'fixed_fix' helper:

<% ie6_fixer do %>
    <%= max_fix "#container" => { :width => 500, :height => 300 }, "#content" => { :height => 500 } %>
<% end %>

This creates the following CSS:

<style type="text/css">
    #container {width: expression(document.body.clientWidth > 500 ? '500px' : 'auto'); height: expression(this.scrollHeight > 300 ? '300px' : 'auto');}
    #content {height: expression(this.scrollHeight > 500 ? '500px' : 'auto');}
</style>

min_fix

The min_fix works exactly the same as the max_fix, but will fix the min-width and min-height properties.

<% ie6_fixer do %>
    <%= min_fix "#container" => { :width => 500, :height => 300 }, "#content" => { :height => 500 } %>
<% end %>

This creates the following CSS:

<style type="text/css">
    #container {width: auto !important; width: 500px; height: auto !important; height: 300px;}
    #content {height: auto !important; height: 500px;}
</style>

warn_ie6

When you call this helper the user will see a notification that he/she is using an outdated browser. A lightbox is created with a user-friendly text and several links to other browsers. The user can still see the website and the warning will disappear when they click on the background.

<% ie6_fixer do %>
    <%= warn_ie6, :msg1 => "You're using a shitty browser. Please upgrade.", :msg2 => "Yes, this message is unfriendly.", :msg3 => "And I don't care." %>
<% end %>

You can pass several arguments to this helper. It will override the default behavior. These are the options with the default values:

:msg1 => "Did you know that your Internet Explorer is out of date?"
:msg2 => "To get the best possible experience using our website we recommend that you upgrade to a newer version or other web browser. A list of the most popular web browsers can be found below."
:msg3 => "Just click on the icons to get to the download page"
:br1 => "Internet Explorer 8+"
:br2 => "Firefox 3+
:br3 => "Safari 5+"
:br4 => "Opera 10+"
:br5 => "Chrome 6.0+"
:url1 => "http://www.microsoft.com/windows/Internet-explorer/default.aspx"
:url2 => "http://www.mozilla.com/firefox/"
:url3 => "http://www.apple.com/safari/download/"
:url4 => "http://www.opera.com/download/"
:url5 => "http://www.google.com/chrome"

So if you want to override the default behavior you just pass these arguments to the helper.

kill_ie6

This is a helper I created just for fun. It sets 'display:none' to the body-tag.

<% ie6_fixer do %>
    <%= kill_ie6 %>
<% end %>

This creates the following CSS:

<style type="text/css">
    body {
        display: none !important;
    }
</style>