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:

button
input[type="reset"],
input[type="button"],
input[type="submit"],
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.

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

You can use this code:

function scrollToLine($textarea, lineNumber) {
  var lineHeight = parseInt($textarea.css('line-height'));
  $textarea.scrollTop(lineNumber * lineHeight);      
}

Some caveats about this code:

1. Your textarea needs to have a line-height in Pixels.
2. The code will scroll to the line number in the text area, not the line number of the original text. These will differ if any lines wrap at the edge of the textarea.

Also see our solution for [scrolling a textarea to a given position with jQuery](htt...

The following two hints are taken from Github's Ruby style guide:

If your regular expression mentions a lot of forward slashes, you can use the alternative delimiters %r(...), %r[...] or %r{...} instead of /.../.

 %r(/blog/2011/(.*))
 %r{/blog/2011/(.*)}
 %r[/blog/2011/(.*)]

If your regular expression is growing complex, you can use the /x modifier to ignore whitespace and comments or use named groups or...

This card shows you how to format a card's content using Markdown. We use the Commonmarker interpreter, so here are examples for its dialect.

Formatting

**Bold**

Bold

_Italics_

Italics

`Monospaced`

Monospaced

> Quoted text

Quoted text

Here is [a link](http://makandra.com/).

Here is a link.

![An image; this is the alt text](http:/...

Imagine you have 2 HTML boxes. The first one has a margin-bottom of let's say 30px and the second one a margin-top of 20px. After rules of collapsing margins have been applied we have a margin of 30px (not 50px) between these two boxes . This is because no addition of both margins takes place but the maximum of both is applied. This behavior is called collapsing margins.

Oftentimes it is a good behavior but collapsing margins can be annoying, too. For example child el...

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:

::selection
  background-color: #f00

::-moz-selection
  background-color: #f00

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

This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title.

As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such high-level frameworks typically offer support for client-side view rendering, routing, data bindings, etc. This is useful, and when you write a moderately complex Javascript ...

You can now add code blocks without indentation, by using triple-backticks:

```
Code block goes here.
```

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](https://makandracards.com/makandra/5885-a-flexible-overflow-ellipsis/at...

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...

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.

O_o

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.

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](...

• Add a separator between left-aligned and right-aligned items.
• In the separator properties, set the style to "Transparent" and check "Expand".
• The separator will now grab all available space and hence push the right-hand items into the corner.

You can also use this trick to center panel items by using two separators (one on the left, one on the right side).

For university I have to stay up-to-date with lecture documents. Since my university doesn't offer RSS feeds, I wrote a little script that collects files from web pages.

You want this, if you have several web pages that offer downloads that you don't want to check manually. Just register the URL and a CSS snippet to retrieve the files in the attached script and run it – it will fetch all your files. It will store all files in a single place or sort them into respective directories.

Edit the header of the file (providing your data), save it...