Image falling out of div in Firefox

Anlino · 01-03-2011, 01:51 PM

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 · 01-03-2011, 06:24 PM

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:

Code:

.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 · 01-03-2011, 08:44 PM

Worked perfectly, thanks!

PixelPusher · 01-03-2011, 08:58 PM

Your welcome!

01-03-2011, 01:51 PM	#1
Anlino New Member Join Date: Nov 2010 Posts: 7	Image falling out of div in Firefox 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.

01-03-2011, 06:24 PM	#2
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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: Code: .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; } __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

01-03-2011, 08:58 PM	#4
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Your welcome! __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-03-2011, 08:44 PM	#3
Anlino New Member Join Date: Nov 2010 Posts: 7	Worked perfectly, thanks!