Playing with line-height and borders

Courtesy of LucasSmith.name

The following is a side effect I discovered while getting distracted from doing research on various implementations of line-height.

The markup is below next to the originating example. The style is basically composed of a 1px line-height, and thick top and bottom dotted borders. Text overflows out of the 1px line-height into the border space. An additional 2px solid border was added to the top of the p tag below for additional interest.

• sub

  ljlj

• <ul id="example"> <li> <h3>sub</h3> <p class="vasub">lj<img src="pumkin.jpg"/>lj</p> </li> </ul>

Screenshots from various browsers

Here are some screen shots showing how different browsers rendered it. There are basically 4 camps:

1. Half dot - Rendered (what I would qualify as) properly, leading/trailing border dots are half width
2. Full dot - Rendered properly, leading/trailing border dots are full width
3. Stretched line-height and dots - Enforced ~1ex minimum line-height. Also has long leading and trailing dot
4. IE - IE renders round dots