During Saturdays and Sundays I generally work on the restyling of my main site. I was testing a code like this:

.list-container {
  height: 100%;
  background: #eee;
}

.list-container ol {
  height: 100%;
  background: #fff;
}

In Internet Explorer 6 and 7 the list markers (that is, the automatic numbering) disappear. This is due to the declaration height: 100% set on the list. In this case, giving layout to the element causes the bug. Removing the height declaration on the list fixes the bug. On ordered lists, even declaring an height on list items may cause the same bug, so be careful.

I'm a lazy and disorganized person. The code provided in the previous post didn't mention the fact that the XHTML structure was altered by jQuery this way:

<ul id="navigation">
  <li><a href="#"><span>Link</span></a></li>
  <!--more links-->
</ul>

So IE7 fails to correctly apply styles because of the presence of an extra element added by JavaScript (a span element). To avoid this problem, you have to specify your styles directly on the innermost element.

The worst never dies. I'm currently developing a testing site on my local machine. After implementing the server-side code, today I started applying styles to contents. First surprise: given the following CSS:

a:link, a:visited {
  color: #00f;
}
a:hover {
  color: #00c;
}

/* more styles ... */

#navigation li a:link,
#navigation li a:visited
  background: transparent;
  color: #fff;
}

#navigation li a:hover {
  background: #fff;
  color: #338;
}

The last rule doesn't work in IE7 and the background color doesn't change. It works in IE6 and 8, though. Another CSS bug of IE 7... cascade? specificity? colors? links priority? who knows?

You have to watch carefully this video to understand where is the buggy part.

Philippe Wittenbergh found out that the bug affecting CSS counters is actually affecting CSS generated content in general. Testcase by Philippe:

http://dev.l-c-n.com/CSS2/gc/generated-content_first-line.html

After installing the latest version of Opera, I pointed that browser to this test page just to see if the bug I've reported a couple of months ago has been fixed or not. Unfortunately, the bug has not been fixed.

This test page has the following markup:

<ol>

<li>Item</li>

<li>Item</li>

<li>Item</li>
</ol>


<div>
<ul>
<li>Filler text</li>
</ul>
</div>

With the following styles:

ol {
 counter-reset: item;
}

ol li {
 display: block;
}

ol li:before {
 counter-increment: item;
 content: counter(item)". ";
}


div ul li {
 display: block;
}

div ul li:first-line {
 color: silver;
}

The bug occurs when you use a :first-line pseudo-element on the same element type that has been used to add counters. As you can see, Opera seems to apply the scope of the ol element to the whole document. Although this kind of behavior is not well defined by the CSS specifications, a bug like this may be really annoying if you stumble on it.

Update

Screenshot in Opera Version 10.50 pre-alpha Build 8174 Platform Mac OS X System 10.4.11:

Thanks to David Laakso!

I was testing the following markup:

<div>
  <h3>Title</h3>
  <p>...</p>
</div>

with the following styles:

div {
  background: #ccc url(topleft.gif) 0 0, url(topright.gif) 100% 0, url(bottomleft.gif) 0 100%, url(bottomright.gif) 100% 100%;
  background-repeat: no-repeat;
  width: 240px;
  padding: 10px;
}

This way, the entire box with all its content disappears in all browsers, even in those that don't support multiple background images. Am I missing something?

Update

http://lists.w3.org/Archives/Public/public-css-testsuite/2010Feb/0017.html. Yes, I was missing something!