Topics: CSS

When Rails no longer renders changes in view templates or Sass stylesheets

Do you have page caching enabled for the development environment and there are cached pages lying around in public/?

How to hide your selenium browser window with "headless"

Note: While the solution in this card should still work, we prefer another solution now: Hide your Selenium browser window with a VNC server.

If you would like to hide the annoying selenium browser window that always gets the focus and prevents you from working, you can use the headless gem. This note provides some instructions how you can get it to work with your cucumber accepta…

External content

Matching elements on complex web pages with Webrat

XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default value in its input elements. This can be the case in web applications in which data should be edited easily without additional clicks.

External content

Print-Friendly Images and Logos with CSS

The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.

Opera: How to use outlining for better layout debugging

I prefer using Opera's "User mode" to toggle an outlining of HTML elements quickly. This helps greatly when you want to see the actual dimensions of elements, e.g. for floating elements inside containers, instead of opening up the Dragonfly inspector every time.

Navigate to View → Style → "Manage Modes…" and tick the checkboxes like in the attached image. Then, switch to the User Mode by pressing the shortcut (Shift+G for the 9.2-compatible layout or for the default layout with enabled "single-key shortcuts") and select "Outline" from…

External content

Liquid Canvas

Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.

It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop.

Check out the Demo and the basic example and then download version 0.3.

How to make a single check box (or image, etc) align vertically

Consider this HTML:

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

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

So the actual fix is to add some inline elements next to the check box. You could use a non-breaking space left a…

How to type accented characters on keyboard layouts without dead keys

Ubuntu comes with keyboard layouts like "Germany Eliminate Dead Keys", which are practical for programming.

If you need to type accented characters with such a layout, make sure to configure a Compose key. You can then look up which compose combo will produce the character you need.

E.g. you can type "á" by pressing Compose, ´, a.

External content

Move Window Buttons Back to the Right in Ubuntu 10.04 / 10.10

One of the more controversial changes in the Ubuntu 10.04 beta is the Mac OS-inspired change to have window buttons on the left side. We’ll show you how to move the buttons back to the right.

Or run this via console:

gconftool-2 --set /apps/metacity/general/button_layout \
 --type string "menu:minimize,maximize,close"
External content

Haml and Sass 3.1 are Released

Sass now comes with user-defined functions, keyword arguments, list manipulation. Haml and Sass are now two separate gems.

Weird margin at top of page

If there is some weird margin at the top of your page for no apparent reason, chances are one of your views contains a BOM (Byte Order Mark).

To remove it, open the file with VIM, and type

:set nobomb

Hide Thunderbird's buttons in message headers area

I don't like those buttons inside the header area of a message that Thunderbird 3 put there. Though the CompactHeader addon is often claimed to be a solution it does way too much for me – I like the headers the way they are, just not the buttons.

This is a bit of a hack but works very well for me (keeps the date and "other actions" menu on the right, see the screenshot below):

  1. Open up your profile directory (~/.thunderbird/<profile_name>/)
  2. Create a chrome directory inside it.
  3. Put the attached userChrome.css file into the …

Hide your Selenium browser window with a VNC server

This is now part of geordi. Please don't follow the instructions below, if you use geordi.

Inspired by the recent headless Selenium note, I found yet another solution for the problem to hide your selenium tests away.

This has the advantages

  • not to require a gem (so you do not force this on others)
  • to allow you to take a look at the running webdriver if necessary

Simply make a script that runs y…

Difference between nth-child() and nth-of-type() CSS selectors

It is very important that you understand the difference between nth-child() and nth-of-type() CSS selectors because the nth-child() selector is not as intuitive as you might think at first. When it comes to writing tests in cucumber and you use the nth-child() pseudo selector in the within part (web_steps.rb) you should understand what it does exactly.

Given you have the following HTML and CSS:

<div id="test">
    <span class="bla">Katze</span>
    <div class="blubb">Hund</div>
    <span class="blubb">Ente</span>

Playing audio in a browser

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.


  • 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…

Use CSS attribute selectors with Capybara

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}\"]")

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)

Different CSS for IE using Sass

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…

CSS3 Pie: Element not properly redrawn

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:

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

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(/;

209 cards