Image falling out of div in Firefox

[Anlino]

I am working on a WordPress theme, Blue Ocean, and I am having some problems with the RSS icon in the menu. In Chrome, IE8, Opera and Safari, it is in the right side of the menu, as intended. However, in FireFox, it pops out of the div and is displayed beneath it.

I was hoping that someone could help me figure out what is causing it, and how to fix it.

 

[PixelPusher]

Ok the reason it is falling out of place is due to the float applied to the last list item and no float on the other list items. By only having having one item floating, it is dropping that list item to the next line.

Try this:

.header .menu ul {
    background: none repeat scroll 0 0 #DBE2ED;
    overflow: hidden;
    padding: 0 5px;
    width: 910px;
}
.header .menu ul li {
    display: inline-block;
    float: left;
    font-size: 14px;
    list-style-type: none;
    margin:10px 5px 5px 0;
}
.header .menu ul li.rss {
    float: right;
    margin-right: -2px;
}

 

[Anlino]

Worked perfectly, thanks!

 

[PixelPusher]

Your welcome!