Whilst writing what initially seemed like some rather simple code I stumbled across a couple of obscure Opera bugs relating to the display of ordered and unordered lists which have proved rather difficult to work round. Extensive searching revealed only one site which contained any information about these bugs so I therefore thought it was worth documenting the details.
Ordered/Unordered Lists and Relative Positioning
Applying position:relative to list items which also contain block level elements (either those inherently block level or those set to block level via CSS) causes Opera to hide display of the list item markers (numbers or bullets). Interestingly the space they occupy remains.
View an example of this relative positioning bug
Floating List Items
Applying a float to list items also triggers this bug
My Code
An example of the code I wrote, which triggers this bug, positions images absolutely, relative to their parent list item. A left padding is applied to each list item to push the heading, summary and call to action link displayed to the right of each image.
I tried floating the image, rather than positioning it absolutely, but this caused several browsers to display the list item markers over the top of the of the image. This is fixable by applying a negative left margin to the list itself and an equal positive left margin to each list item but once again Opera throws a spanner in the works requiring padding rather than a margin to be applied to each list item. The only way I found to achieve this (without server-side intervention) was to use CSS3 Media Queries to serve separate rules to Opera. This approach isn't without issues, I've read that the latest versions of WebKit also read these rules, although in testing I haven't found that to be the case. View an example using CSS3 Media Queries.
Revisiting my first version (relative positioning) I found that setting each list items' child elements to display:inline caused the list item markers to re-appear. I was then able to force text items onto a new line using break tags. It's not pretty and certainly not semantically nice but this approach worked across the board and seems more robust than using a CSS hack which will almost certainly break as browser support for CSS3 improves. View an example of this approach.
If you've come across these bugs before and have managed to find an alternative, nicer way, to work around them I'd love hear about it.
Further Reading
- List bullets erroneously follow only statically positioned content
- List elements containing a floated element as the first child do not show their bullets
- Making CSS visible for Opera 7 only
- Opera Omnibus - A growing collection of Opera only bugs - somewhat out of date but some bugs listed may still be relevant.
- Opera - Reporting Bugs
- Opera 7 and CSS
great job
Nice find. Thanks for the write-up. I'll try to remember this for future reference.