Use normalize CSS, not reset CSS

Some html elements have different default styles in different browsers and to complicate it further, they can use different properties for similar results. Padding and margin are two properties with this characteristic and f.ex. unordered lists suffer from this complexity. By adding a little padding, one browser may improve the presentation while it is completely borked in another browser.

A well known trick for avoiding browser differences on elements like lists and forms is to use a reset stylesheet. The idea behind reset stylesheets is to remove browser inconsistencies and among other things, they normally set padding and margin on all elements to 0, font-weight to normal, and font-size to 1em.

Continue reading →

Problems with display: table-cell;

Vertical centering of content is something that took a giant step backwards with the departure from table-based layout. The CSS-property vertical-align is limited and in most cases does nothing more than centering inline content vertically inside its' line.

With one line of content, you can set a large line-height, f.ex. 100px and vertical-align: middle; will center your content vertically within the 100px, but this only works when you have one line.

Another solution can be used if you have content with a known height within a container with known height. A combination of margin and position can vertically center your content. But as said, you need to know the height of both your content and the container outside your content.

Continue reading →

How to organize font-family declarations

While working on already existing code I often find font-family declarations spread throughout hundreds or sometimes thousands of lines of code. This is somewhat frustrating when my task is to change the font families, because I have to search through the CSS to find all the font-family declarations and then build a mental image just to figure out the current system behind the font family usage.

With font-family, you should have a clear plan for your website, and typically use no more than two or three font-families. If not, you will quickly end up with chaos and inconsistency, two qualities you don't want to be associated with your code. I prefer to gather all font-family declarations in the top of my CSS like this:

Continue reading →

Using multiple css classes for styling html elements

An underused but very powerful technique consist of using multiple css classes on some html elements. This is very useful for example when you have multiple items of the same type and want to have a consistent look with some variations between the items.

A standard widget

On the right of this page (at least if you are using a regular desktop browser) there are some widgets. They all have the same look but sometimes you might want some widgets to stand out from the other widgets. For the examples in this post, a widget consists of a headline represented by an h3.caption element, and some content represented by some p elements. Typical content for a widget can include lists and tables but we stick to paragraphs here for simplicity.

Continue reading →

Pixel-less layouts using em and %

In a time when the pixel density of mobile phones is no longer comparable to normal computer screens and laptops are going the same way, using pixels to set the dimensions of your website makes less sense than it used to. So let's build an alternative setup.

The other units

There are at least two other units that are useful for layout, em and %. 1em is equal to the current font-size and % means percentage of the surrounding element.

Percentage is a good second in popularity behind pixels, and em is not commonly used for other things than font sizes. But since em is not px, it has other advantages.

Continue reading →

Beware of narrow fonts

One weird problem that I have observed a few times is that a website has been shown with a narrow font on one computer. While you can say "who cares" as long as it is only one computer, you only test on a few machines anyway so one might be a significant percentage and indicate that you should do something about it.

Continue reading →
Written by Comments Off on Beware of narrow fonts Tagged with