April 23, 2006
Opera 9 beta and List Items Containing Floated Elements
The other day, Ryan forwarded me an email from a user stating that Vitamin was looking decidedly unhealthy in Opera 9 (build 8303 to be exact, one of the preview builds). Here’s an example of what was happening:
See the highlighted area? Opera 9.0 beta did this!
And if you want to check for yourself within Opera 9, here’s a stripped down version of the page that illustrates the problem (the relevant CSS is embedded).
After downloading a newer version of Opera 9 (the beta 1 version, build 8367), I could see the problem for myself: this version of Opera does not like the nice overflow:hidden method for containing floats when it’s applied to a list-item element! I’m not entirely sure why - other web browsers, like Opera 8.54, Firefox 1.5, IE6[1], Safari 2.0.x, etc. seem more than happy, but there it is!
It turns out that the fix for this problem is very straightforward: you need to turn the list element into a block-level element! You could do this by floating the element (which works in the stripped down example, and may work for you) or, as I did with Vitamin, you could simply add display:block, like so:
#features li {
margin: 0 10px 10px 10px;
border: 1px solid #d7d18c;
background-color: #fff;
padding: 0.8em;
overflow: hidden;
display: block; /* add me for Opera 9.0! */
}Here’s a working version of the stripped-down page (so that you don’t have to waste all that time typing in the extra CSS!!)
And don’t worry about the other browsers - the fix doesn’t affect them at all!
Internet Explorer 6 Note:
IE6 requires a hasLayout fix. On Vitamin, I used the Holly Hack’s height:1% declaration within an external style sheet for IE browser versions below 7 (yes, I’m assuming the problem won’t affect the final build of IE7!!)
