12 Spokes

These days, now that we have IE7, it’s common for those of us developing for the web to use conditional comments instead of CSS hacks to make sure our sites look good in different versions of Internet Explorer. (Or to pass anything else exclusively to IE)

I find myself using them on a regular basis, so here’s a little helper you can throw in your ./helpers/application.helper.rb to Rubify some of that commentage:

  # info at http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
  def conditional_comments(options={}, &proc)
    inverse    = options[:inverse] || ''
    comparison = options[:comparison] ? " #{options[:comparison]}" : ''
    version    = options[:version] || 5
    concat("<!--[if#{comparison} #{inverse}IE #{version}]>\n#{yield}\n<![endif]-->", proc.binding)
  end

Just put it in an ERb evaluation block and feed it a block of output:

<% conditional_comments :comparison => 'gte', version => 5.0 do
      stylesheet_link_tag 'layout_ie', 'typography_ie'
   end %>

Output:

<!--[if gte IE 5.0]>
<link href="/stylesheets/layout_ie.css" media="screen" rel="Stylesheet" type="text/css" />
<link href="/stylesheets/typography_ie.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->

It might be a little too much abstraction or processing for your tastes, but I was just a little sick of seeing the comments in every header. Yatta!

Problem

You’re building a navigation for your site and you want to use an image for the navigation, but also include text for screen readers and for markup’s sake.

Your markup looks like:

    <ul>
      <li><a href="">News</a></li>
    </ul>

Solution

First, we set the width and height of the LI to match the image, add a background on the anchor link, and make the anchor a block-level element so that we can give it a height and width:

li {width:150px;height:50px}
a {background:url(news.png);display:block;width:100%;height:100%}

Next, we give the anchor link some padding-top so that the text drops below the image, and then set overflow:hidden on the li so that we can’t see the text below the image and the li stays the proper height.

li {width:150px;height:50px;overflow:hidden}
a {width:100%;height:100%;padding-top:50px;display:block;background:url(news.png)}

You could also use padding-left or text-indent with this method.

This is a fairly common problem that has a couple different solutions, but this one tries to avoid extra markup like wrapping the text in a span, using an img tag, or using a negative padding/text-indent (I’m superstitious about that). The only restriction of this solution is that you have to know the height or width of the image you’re using.