Floated UL within right floated div

Causing a problem in Opera

[Zaxx]

Hi all, my first post here and of course it's a problem ;)

I'm not only new to webmaster world I'm also new to using CSS - I've managed to figure out the majority of problems I've encountered except this one:

I need to have a navigation bar floated right on the page within a container. This works fine in all browsers apart from opera, which shows the menu items floated right but one underneath the other. After some testing I determined that it was an issue with the width of #navmenu, its fine with a fixed width applied to it. Problem being that #navmenu must be variable width to allow for text sizing...

The CSS:

#navmenu {
float:right;
background: yellow;
padding-right: 10px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#navmenu li {
float:left;
margin:0;
padding:0;
}
/* includes ie width fix */
#navmenu a {
padding: 0 10px 0 10px;
height: 33px;
background: green;
display: block;
width: .1em;
}
#navmenu a:hover {
background: red;
}
/* reset from ie fix for other browsers */
#navmenu > ul a {
width: auto;
}

The HTML

 <div id="navmenu">
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 <li><a href="#">Link 5</a></li>
 </ul>
 </div>

Additionally I've used some (garish) colours in the css which are replaced by images for a hover rollover effect in the final page. (I believe linking to examples is not permitted here)

I really dont want to resort to serving alternate content for opera, so any help is appreciated.

[isitreal]

try removing the width:auto feature, that might or might not help, hard to say, I've found ul horizontal navs are extremely difficult to get stable, odds are that it may not work on mac browsers too. Sorry nobody answered your post earlier, maybe this will bump it up and somebody else can figure it out if that doesn't do it.

[SuzyUK]

Hi Zaxx - Welcome to WebmasterWorld

This thread
[webmasterworld.com...]

also had the same issue and the answer is definitely widths, all floated elements according to CSS2 require widths. Opera is including a new feature of floats, (which will probably not be supported by other browsers for a long time yet, and will most definitley cause IE/mac problems), whereby if no width is declared it will shrinkwrap the contents of the float.

It will be useful I'm sure, but meantime widths on floats it might need to be in order to keep the most browsers happy..

If you need more flexibility how about using percentage widths?

Suzy