Layout problem (floats) specific to Opera

Question

I have a forum title bar (with forum name and thread title). Forum name, when long, is clipped and revealed on :hover. The objective is to have the thread title to begin next to forum name, hovered or not, and also clipped, when too long.

The following reduced test case works in Chrome and FF but not in Opera (tested on 11.50 alpha, and latest stable, both on mac).

Correct behaviour: thread title (the one with red outline) is in line with forum name.

What I get in Opera: the text is gone - actually hidden by overflow:hidden on .nav_bar, it gets moved to next line.

Answer 1

display: inline-block; float: left is not logical because float: left forces display: block.

Due to your use of white-space: nowrap, I'm going to keep display: inline-block and drop float: left.

That gets us to here: http://jsfiddle.net/wkA7q/4/

It's now consistently visible, but the text is not aligned in most browsers.

To fix that, add vertical-align: top a couple of times: http://jsfiddle.net/wkA7q/5/

That works and is consistent between Chrome, Firefox, Opera, IE9/8.

(I realise that I'm not really addressing the reason why Opera displays differently here. Although display: inline-block; float: left do conflict with each other, the outcome is well defined.)