Opera Floating List Bug

© 2012, Martin Rinehart

Of all the browsers, Opera is from the smallest company¹ and has the fewest issues. So this one came as a surprise.

I wanted to place an unordered list to the right of an image (space permitting). See "Home / Artists / Effects" on this site (where the bug is fixed) for an example. The image was floated to the left. Opera placed the list's text to the right of the image, but it placed the bullets in the image. Ugly.

Testing showed that this was an Opera-only bug. All the other browsers did as they were told. Opera showed the erroneous behavior with any type of unordered list (circle, disc, square) as well as with ordered lists.

The fix: displaying the list as "inline-block" fixes the issue. The longer I work with CSS, the more elements I style as "inline-block". There may be a moral here.

¹Smallest company? Firefox isn't produced by a company. However, when Google renewed its Mozilla support contract the figure in the press was a tidy $300 million per year. Opera may break $100 million, total revenue, for the first time in 2012.

Feedback: MartinRinehart at gmail dot com

# # #