Firefox Float Issue

HTML & CSS
1

Hi,

Been scratching my head trying to see what’s wrong but in IE8 and Chrome it renders fine, but in FireFox the right floating of the ‘handle’ class appears correctly on the right side but a few pixels below rather than directly inline.

Any ideas?

<style type="text/css">
	.demo { width:950px; height: 750px; background-color:#3e0000; }
	.column { width: 305px; float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; background-color:#7c0000; color:#FFFFFF; height: 230px; }
	.portlet-header { float:left; padding-bottom: 4px; padding-left: 0.2em; background-color:#b21f24; height:35px; width: 286px; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 230px !important; background-color: #FFFFFF;  }
	.ui-sortable-placeholder * { visibility: hidden; }
	.handle {float:right; width:40px; height:32px; margin:0; padding: 0; }
	</style>


<div class="demo">
<div class="column" id="col0">

	<div class="portlet" id="p_0">
		<div class="portlet-header">Feeds <img src="arrow.png" alt="move" width="40" height="32" class="handle" /></div>
		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
	</div>
	
</div></div>
2

I’m being called to dinner by hubby : ) but in the meantime, for now until someone else gets to it, add ugly background colours to every element who doesn’t already have one.

First thing I do when I’m playing around with floats! So I can see them.

If you have Firebug you can also see the margins of the boxes, but add in the bg colours first.

3

It seems it was my outdated version of Firefox!

4

What version of FF were you using? If it’s anything before 2.0 then I wouldn’t bother messing with it, however if it was FF2.0+ then I’d check it out.

If that’s the case (you had FF2.0+) then post a link to hte page for us to see :slight_smile: