Howto properly use vertical-align to align elements vertically

Say you want to vertically align a div box inside a div container. This is how you do it:


<div id="container">
  <div class="box">
    <span> Some text...<br />in two lines. </span>


Set the line-height to the container's (implicit) height. The container MUST have a height >= its line-height, because the line-height actually spans the area inside which .box will align vertically.

#container {
  line-height: 50px;

Because the container's line-height is inherited by .box,...


IE9: Linear gradients remove border-radius and inset box-shadows

When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is because you probably are doing linear gradients with this weirdo Microsoft filter:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');

filter hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.

A forward-looking workaround is to not use gradients and [emulate your gradients with box-shadows](

Linked content

You cannot use :before or :after on img in CSS

Though the W3C even gives it as an example, no browser actually supports this CSS:

img:before {
  content: "something";

Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after pseudo-element.

This makes me sad.

You can try using jQuery instead.

When I give a button and a link the same styles, why is the link one pixel higher?

It's not logical, so don't be too hard on yourself. You need to give it a height and change the box-sizing and display:

input[type="file"] > input[type="button"]
  display: inline-block
  box-sizing: border-box
  height: 20px
  line-height: 20px

Also see Proper cross-browser CSS styling for buttons.

Convert a TrueType (.ttf) font to web font formats

  • Note that you are not allowed to embed any font in a website. You need to check the license first. Fonts from Font Squirrel are all okay to embed and use for commercial purposes, but as with many free fonts, quality differs widely, especially at medium and small font sizes.
  • You will need to embed your font in several formats since browser support is a mess.
  • You can use the [Font Squirrel @font-face generator](http://www.fontsquirrel.c...
Linked content

Tabs in Textarea Plugin for jQuery

This is a demo of the "Tabby" Javascript jQuery plugin to use tabs in regular textareas to make them suitable for in-browser coding of languages like HTML, CSS, Javascript, or your favorite server-side language. The idea is to be able to use a press of the TAB button or SHIFT+TAB to indent or outdent your code.


Change how Capybara sees or ignores hidden elements

Short version

  • Capybara has a global option (Capybara.ignore_hidden_elements) that determines whether Capybara sees or ignores hidden elements.
  • Prefer not to change this global option, and use the :visible option when calling page.find(...). This way the behavior is only changed for this one find and your step doesn't have confusing side effects.
  • Every Capybara driver has its own notion of "visibility".

Long version

Capybara has an option (Capybara.ignore_hidden_elements) to configure the default...

CSS: Change text selection color

You can change the color for text selection via CSS, using the ::selection and ::-moz-selection pseudo-elements.

Adding this to your Sass will make all text selections use a red background:

  background-color: #f00

  background-color: #f00

Unfortunately, those can't be combined into "::selection, ::-moz-selection". Doing so will have no effect.

Flexible overflow handling with CSS and JavaScript

You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements.

Here is a hack for the special case where you want to truncate one of two strings in one line that can both vary in length, while fully keeping one of them. See this example screenshot where we never want to show an ellipsis for the distance:

![Flexible overflow with optional ellipsis](

Use CSS "text-overflow" to truncate long texts

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox did not support it for ages, you did not use it. Since Firefox 7 you can!

Note that this only works for single-line texts. If you want to truncate tests across multiple lines, use a JavaScript solution like...

Linked content

jQuery UI Bootstrap

Twitter's Bootstrap CSS blueprint as a jQuery UI theme. Even if you don't want to use Bootstrap as a CSS framework, this theme looks better than jQuery UI's default theme.

How to print Github wiki pages

I have no idea how it's supposed to work (or why the don't have a print CSS), but this works for pages written with Markdown:

  1. "Edit" the wiki page
  2. Copy all text
  3. Run a Markdown interpreter and pipe its result, e.g.: kramdown > /tmp/github.html
  4. Paste your markdown
  5. Press Ctrl-D to finalize your input
  6. Open the generated HTML file and print it.


Repeat an element on every printed page with CSS

Firefox, Opera and Internet Explorer will repeat elements with position: fixed on every printed page (see attached example).

The internet knows no way to do this in Webkit browsers (Chrome, Safari). These browsers will only render the element on the first printed page.

Linked contentDeprecated

CSS box-shadow not working in IE9 inside tables with collapsing borders

Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.

Consider this HTML:

<table style="border-collapse: collapse">
      <div style="box-shadow: 0 0 10px #f00">Hello universe</div>

While it works in other browsers, IE9 is not showing any shadow. For some reason, it requires border-collapse: separate for the table to be set:

<table style="border-collapse: separate" c...
Linked content

Pull Quotes with HTML5 and CSS

A pull quote is a typographical technique in which an excerpt or quote from an article is duplicated within the article using a different formatting style so that it jumps out at the reader.

Blatantly copying the excerpt of the pull quote into it’s own element is not the way to go. A pull quote is a purely visual technique, and therefore should not change the structure of the body. Next to that, a structural representation of the excerpt would be seen twice by people using feed readers or services like Instapaper, as well as be re-read for ...

How to embed images in higher resolutions for printing

When you print out a HTML pages, all raster images (like PNGs) will appear aliased. This is because a printer's resolution is usually much higher than that of a computer screen.

If an image absolutely must look awesome when printed, a solution is to embed the image in much higher solution than needed (e.g. four times the horizontal resolution), then scale it down to the desired width using CSS.

Note that this will slightly alter the image's appearance on the screen because browsers will scale down the image [using an anti-aliasing method](...


Detect mobile or touch devices on both server and client

Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will want want the same detection logic to be available on both server and client side.

This card shows how to get a Ruby method touch_device? for your Rails views and a method TouchDevice.isPresent() for your Javascripts.

Note that we are detecting touch devices by grepping the user agent, and the ke...

Linked content

Vendor-prefixed CSS Property Overview

A list of CSS vendor-prefixes.

This website uses short-lived cookies to improve usability.
Accept or learn more