Open fullscreen

Sometimes is needed to-do nested numeration in HTML ordered lists. Here is a simple CSS solution how to achieve this.

CSS:
ol { counter-reset: item; }
ol li { display:block; }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }


HTML:

<ol>
  <li>
    Cities
    <ol>
      <li>
        Tallinn
        <ol>
          <li>Kesklinn</li>
          <li>Lasnamäe</li>
          <li>Mustamäe</li>
        </ol>
      </li>
      <li>
        Narva
        <ol>
          <li>Krenholmi</li>
          <li>Soldino</li>
          <li>Paemuru</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Result:

1. Cities
   1. Tallinn
      1. Kesklinn
      2. Lasnamäe
      3. Mustamäe
   2. Narva
      1. Krenholmi
      2. Soldino
      3. Paemuru

You can do so many nested lists as you want.

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar

This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }

IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:

CSS expression solution

input, a {
  outline:expression(hideFocus='true');
  outline:none;
}

jQuery solution

$("a, input").each(function() {
  $(this).attr("hideFocus", "true").css("outline", "none");
});

Every self-respecting web-designer and web-developer know that when scaling images browser makes picture smaller or larger by definite “magic” algorithms. All browsers except IE, do that much-less correctly.

In Internet Explorer you should setup that algorithm manually as CSS property.

img { -ms-interpolation-mode:bicubic }


So here is result, screenshot are taken in IE7 with
image scale about 50-60%.

Bicubic algorithm disabled (default)

Bicubic algorithm enabled

Read more on MSDN website about this issue.

Enabling interpolation algorithm is useful for any kind of *boxes like Fancy Box, Shadowbox, Light Box, etc…

NB! Enabling algorithms can decrease IE’s performance up 2 times!
Nice joke, BILL!