Consider this HTML:

<div style="line-height: 42px">
  <input type="checkbox" />
</div>

Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if it is the only element inside the container.

It will be aligned correctly if the HTML looks like this:

<div style="line-height: 42px">
  <input type="checkbox" /> foo
</div>

Complex explanation here.

So the ac…

Possible fixes:

• Upgrade your Firefox. It's fixed in 5.0.
• Hunt down funny float or overflow directives in your CSS.
• Remove <h1> and <caption> tags in proximity of your table (seriously).

Resque comes with its own dashboard (Resque server) that you can mount inside your Rails 3 application with

#config/routes.rb:

require 'resque/server'

My::Application.routes.draw do
  # ...

  mount Resque::Server => '/resque'
end

Unfortunately, since this bypasses the filters in your ApplicationController, everyone can access this dashboard now (unless you have some Rack-based authentication in place, like Devise).

If you're using …

jQuery

You can say:

$(element).is(':visible')

and

$(element).is(':hidden')

jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM API

Emulate jQuery's implementation :

element.offsetWidth > 0 && element.offsetHeight > 0;

Prototype

Don't use Element#visible(), it just checks if a CSS attribute display: none ex…

The step definition below allows you to write:

Then I should see a link labeled "Foo"
But I should not see a link labeled "Bar"

Webrat

Then /^I should( not)? see a link labeled "([^"]*)"$/ do |negate, label|
  expectation = negate ? :should_not : :should
  response.send(expectation, have_selector("a", :content => label))
end

Capybara

Then /^I should( not)? see a link labeled "([^"]*)"$/ do |negate, label|
  expectation = negate ? :should_not : :should
  page.send(expectat...

Update: Staticmatic will not be further developed. They suggest to switch to middleman.

If you need to make a static web page and find yourself missing all your Rails comforts, take a look at StaticMatic.

This works like an extremely stripped down version of Rails, giving you

• HAML
• SASS
• helpers
• partials

When done, everything is simply compiled to s…

If you want to play music or sounds from a browser, your choice is to use either Flash or the new <audio> tag in HTML5. Each method has issues, but depending on your requirements you might not care about all of them.

Flash

• Works in all desktop browsers, even Internet Explorer. Does not work on iPads or iPhones.
• Requires you to embed a Flash component into your page which will later play the audio for you.
• Can play MP3s or Wave files. Cannot play OGG Vorbis audio.
• Cannot reliably seek to a given position when playing VBR-enco…

You can use CSS attribute selectors in your step definitions like this:

Then /^the page should have a meta description "([^"]+)"$/ do |description|
  page.should have_css("meta[name=\"description\"][content=\"#{description}\"]")
end

Note that you need to always quote attribute values or you will get a Nokogiri parsing error like this:

unexpected 'foo' after 'equal' (Nokogiri::CSS::SyntaxError)

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.

Step 2

Create two new Sass files:

Call this one screen.sass:
$ie = false
@import screen

Call this one screen_for_ie.sass:
$ie = true
@import screen

Step 3

Change y…

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Active element</div></li>
  <li class="inactive"><div class="content">Inactive element</div></li>
</ul>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

  back...

When working with large Sass files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when you build sprites with the Lemonade gem.

To avoid this, have Sass watch the files for changes and compile them into CSS files immediately. Th…

When calling a Sass mixins, you usually don't need to quote arguments:

+tint_article(#f21)

However, when a CSS property consists of multiple parts (like background or box-shadow), the Sass parser will trip up:

+box_shadow(0 1px 2px #000) // this will blow up

The solution is to quote the argument like this:

+box_shadow('0 1px 2px #000')

As the author of the box-shadow mixin you now need to unquote this string, so the quotes don't appear in the resulting CSS. E.g. the following version of the box-shadow mixin will…