I noticed this bug on this page — the heading “Kāzu ABC” was rendered aliased despite having the main menu in between that heading and the logo which had font-size:1px; applied. The only way to fix this is by avoiding aliased text directly before elements that use @font-face.

Here is a live demo of the bug.

Related posts

1. We’re back with a free font suggestion — Liberation Sans
2. No Font Embedding, Please
3. Replace WordPress Login Logo With Your Site’s Name and Link

a { text-decoration:none; border-bottom:2px solid; }

which also adds border to the bottom of all linked images. In order to remove it, you would think that setting

a img { border:none; }

would be enough. However, the truth is that it removes only the border around the image and not the one from the anchor that surrounds it:

Luckily, if the image is higher than the line-height of the text, we can hide the bottom border of the image by setting:

a img { border:none; vertical-align:top; }

and you’re done.

Why this works?

By default both anchors and images are inline elements and by applying vertical-align:top; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.

Related posts

1. jQuery Script for Loading More Posts
2. How to Create Beautiful and Elegant HTML Lists Using CSS
3. Squeeze the Header of the New WordPress 2.7 Dashboard

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list.

Default list rendering in standards aware browsers and Internet Explorer

Let’s look at the default rendering of ordered <ol> and unordered <ul> lists by Web standards aware browsers (with Gecko, Webkit or Opera rendering engine) and Internet Explorer (IE).

It turns out that IE applies default left side margin to the list container (<ul> and <ol>) while standards aware browsers apply left side padding. These differences in list rendering force us to set both padding and margin of <ul> to 0 and continue to work only with styling <li> tag.

Another thing we notice is that list bullets or numbering becomes invisible in IE with the left side margin set to 0.

Getting the list rendering consistent among all browsers

To solve the invisible bullet problem described above, its a good idea to use relative positioning of list containers <ul> and <ol>. By doing so, we will be able to create much more advanced list style later without repeating most of the CSS.

CSS for simple lists

ul, ol {
   margin:auto -3em 1em 0;
   padding:0;
   position:relative;
   left:-3em;
   overflow:hidden;
}
li {
   margin-top:0.25em;
   margin-bottom:0.25em;
}
ul ul, ul ol,
ol ol, ol ul {
   margin-left:1em;
   padding-left:0;
}
ul li, ol li {
   margin-left:5em;
}
li li {
   margin-left:1em;
}

Internet Explorer specific CSS

To fix IE’s ability to do the math correctly, we have to enable hasLayout property for all of our <ul> and <ol> tags. This is done by using conditional comments:

ul, ol { height:0; overflow:visible; }
ul, ol { height:1%; }

Output

List is now rendered equally in all browsers. For illustration purposes a yellow background is applied to the list container <ul>, gray border shows the dimensions of <ul>, while list items <li> have gray background.

Flat lists for more content per list item

Sometimes you have multiple lines of content per list item and then it might be reasonable to align the lists with the rest of the content in order to sustain the vertical flow of it.

CSS for flat lists

.flat li {
   margin-left:3em;
}
.flat li ul, .flat li ol {
   margin-left:1em;
   padding-left:0;
}
.flat li li {
   margin-left:0;
}

Notice the little amount of CSS, but more importantly that it is rendered equally among all of the browsers and we can still use the default bullet styles instead of images.

However, sometimes one might want to use custom style list bullets. This can be done using the list-style-image property in CSS.

Lists with custom style bullets

Note: don’t forget to remove the line break after list-style-image: to get it working.

CSS:

ul.bullet-a li {
   list-style-image:
    url('bullet-image-a.png');
}
ul.bullet-b li {
   list-style-image:
    url('bullet-image-b.png');
}

Although the alignment of the list image is not pixel perfect among all of the browsers, it is more than satisfactory if the height of the bullet image doesn’t exceed 10 pixels. One might suggest to use background of <li> tag as a list bullet image, but this would brake the ability to combine multiple CSS identifiers per list, like <ul class="flat bullet-a"> because of inherited margin settings.

All the small details

Notice that the spacing between list items in the last example (rounded image bullets) is larger than the default one (arrow image bullets). This enhances readability and separates list items similarly to paragraphs. So here is the final set of CSS styles to suite most of the needs:

.spaced {
    margin-bottom:0;
}
.spaced ul, .spaced ol {
    margin-top:1em;
}
.spaced li {
    margin-bottom:1em;
}

.indent li {
    padding-left:1em;
    text-indent:-1em;
}
.inside li {
    list-style-position:inside;
}
.clear li {
    list-style-type:none;
}

You can see that one of the previous examples already utilizes the “spaced” styling, while “indent”, “inside” and “clear” might benefit from a few examples:

All of CSS combined & list style cheat-sheet

• View all of the list style examples in your browser.
• View the resulting CSS as a seperate file (bullet images: )
• Download a list style CSS classname cheat-sheet (.pdf) which you can print and use as a reference when composing your articles, blog posts or other HTML documents.

Screenshot showing the use of various HTML list styles

Internet Explorer specific HTML and CSS

ul, ol { height:0; overflow:visible; }
ul, ol { height:1%; }

Few suggestions:

• Bullet image height preferably should not exceed 10 pixels. Lower image height makes them look better in Internet Explorer. If you want bullet images to be transparent, save them as transparent GIF or 8-bit PNG files.
• You might find it useful to apply this styling only to your post content, which can be easily done by prepeding the identifier of your post wrapper (like .post or .article) to all of the list styles. The end result would be something like .post ul, .post ol {}.

Related posts

1. Squeeze the Header of the New WordPress 2.7 Dashboard
2. Replace WordPress Login Logo With Your Site’s Name and Link
3. Remove index.html from the URL

The solution would be a plugin which would provide a “standard” set of CSS classes for styling different image (and other element) positioning.

The great thing is that you could use these CSS classnames with any theme you like as long as you have the plugin enabled. It would be also possible to specify a prefared classname prefix (for example, kd-wide, mo-withborder-a or pa-image-a) so that the plugin’s CSS doesn’t mess with the theme’s CSS. It could also contain CSS styles for lists (like the “flat” and “spaced” ones used on this blog), “important” messages, etc.

A kind of a portable image positioning thing. And you wouldn’t have to learn new CSS classnames or image layout ideas offered by different theme authors.

What do you think? Maybe you have a suggestion of other items (apart from images and lists) that you would like to have special styling.

Related posts

1. How to Automatically Add Image Credit or Source URL to Photo Captions in WordPress
2. Idea: WordPress Theme for Audio & Video Podcast Websites
3. WordPress Dashboard UI Idea Update

Seeing a <div class="left green">...</div> block in HTML code might hurt the eyes of a lot of web designers. To identify good and bad id and class names, it is important to understand the idea of the CSS.

The World Wide Web Consortium (W3C) defines CSS2 as:

a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.

Therefore class names left, green or largetext are theoretically good according to the first part of the CSS definition, but very very bad according to the second part, which can be illustrated with the following example.

Imagine that you need to change those customer testimony boxes to centred alignment and yellow background with different typeface. The result would be a class named green which defines yellow background and different typeface, and there is nothing green about that <div> block any more. What if you had also used the green class for styling the product descriptions? It soon would be impossible to maintain and expand a website that uses such CSS identifiers. Class name testimonies would be much more appropriate to the particular needs. In addition, the product description class prod-desc could be defined together with testimonies at first place and separated if such necessity arises.

In general, it is a sound practice to choose identifiers that describe the content of that HTML section, not how it looks.

Design Limitations of the CSS

Despite the beauty of semantic HTML mark-up and availability of CSS, the web currently has some intrinsic limitations for designers, who want complete control over the layout of the content.

Traditional graphic design has no need for semantic content. Graphic designers have two dimensional environment available, while the content of the web is linear. Graphic designers use the size, shape, colour and position of different content elements to create the structure of the message, but the web uses semantic HTML mark-up to structure its content. And CSS aims to be that ultimate presentation layer that adds the extra dimension also to the web content.

There is no way to tell Adobe Illustrator (or any other graphic authoring software) that the particular text is the main heading of a poster and that the image following it shows two people sitting in a beach, holding hands and watching sunset. In such context the graphical presentation of the content seems to be limiting over the semantic description available on the web. Semantics is the third dimension of the web content, which print medium will never have. The CSS, however, aims to define the second dimension of the web and make it closer to the print, in terms of freedom of layout.

Unfortunately the CSS currently doesn’t offer a complete control over the layout of the content. In general, however, web has far more ways of describing and defining its content than the print or video medium. The content of the web isn’t locked into the visual or audio definitions chosen by the designer. It symbolizes accessibility and availability of the
information for everyone.

Grid Layouts and Content Grouping

In a grid based page layout the content is aligned with a certain number of equally spaced imaginative vertical lines. This creates a system of presentation which is visually harmonic and aids the reader in perceiving and understanding the content. (Wikipedia about the grid)

Such simple and coherent presentation of textual and graphical content became popular after the Second World War together with the modernism in traditional art.

The current version of CSS doesn’t directly provide ways to use columns and grids for presentation. And it is not the purpose of HTML either, as they don’t add any semantic description to the content.

Therefore web designers have to find ways of using existing CSS declarations and available HTML <div> tag, which is meant for sectioning and grouping the content.

One of the important characteristics of the grid is reusablility – it should be possible to devise a set of CSS classes that enable sectioning of the content into grids, and could be applied for any type of content. The only purpose of these classes is to define the grid, not the content inside the grid. This is important.

Such CSS definition requires two nested HTML <div> elements by design – one defines the grid while the other its content. Different interpretation of padding, margin and border rules among different browsers is another reason for having two separate <div> tags. For a consistent rendering of the grid, the extra mark-up is simply necessary.

Now a question to all the HTML purist out there (including me) – do grids define groups or sections of the content? If the answer is yes, then the use of extra mark-up is completely valid as defined by HTML specifications.

Content of the Grids

The typical content of the grid requires a gutter or a padding so it doesn’t run into the column next to it. But notice, that this is the requirement of the content inside the grid, not the grid concept in general. Therefore, we need only two sets of CSS classes – one for the grid, and the other for its content. These classes could be repeated across the whole website.

Any number of standardized classes could be applied to grid content <div>, for example, to define the border or background of the particular grid column.

Conclusions

The choice of reusable and content specific CSS identifiers is very important in order to create websites that are scalable and easy to maintain.

For special design needs, such as grid based layouts, it is advisable to create a set of standard CSS definitions only for layout purposes that don’t describe the content inside the grids. Additional HTML mark-up is necessary to make such layouts consistent among all web browsers. Use of standardized CSS definitions and HTML mark-up for content groups reduces the total page size and significantly shortens the time for design alterations.

Creating complex layouts without extra HTML mark-up will become easy with the availability of CSS3 which includes column separation of the content. Until then, sets of CSS and HTML definitions for commonly used layout elements will provide the only and the best possible solution (See Konstruktors CSS snippets, for example).

Related posts

1. Open Share Icon that Looks Good at Small Sizes
2. Is Your WordPress Theme Good Enough?
3. MediaTemple’s Disappointing Grid