Oncemade

I recently ran into a bug on Internet Explore 7 that was driving me nuts. After hours of debugging, I finally found the solution.

IE7 has a bug when using adjacent sibling selectors. If there is a comment between two elements, it will think that the comment is the next element. Here is the example:

CSS
p + p { background-color: #fc0; }

Markup with comment
<p>Paragraph #1</p>
<!-- my comment here -->
<p>Paragraph #2</p>

The image bellow shows how it supposed to look like in all modern browsers. Unfortunately, the only way to make it work in IE7 would be by removing the comment.

Markup without comment to make it work in IE7
<p>Paragraph #1</p>
<p>Paragraph #2</p>