Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A Ruby on Rails plugin with some Javascript en CSS hacks to fix some problems in IE6. Also allows you to easily show an 'outdated browser' warning to IE6 users.
Ruby
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.markdown

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 robin@45north.nl.

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 robin@45north.nl 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>
Something went wrong with that request. Please try again.