I've got a strange issue with floating the field in Firefox. Everything works fine in Chrome and Safari, but Firefox has other opinion :) Other fields are fine, but this one doesn't want to float correctly.
The question is in blue field.
Here you can see how it floats correctly in Chrome
Here you can see Firefox version
Looks like for some reason this blue field starts floating from the second column, not from the beginning of the row.
Here's the css that i use for fields positioning. Basically i make fields some % widht and float them next to each other.
Here i specify first row field
.deliver-week {width:35%;float:left;}
.deliver-date-start {width:40%;float:left;}
.get_delivery {width:23%;float:left;}
This one is for these blue and red fields
.deliver-or {clear:both!important;width:30%;float:left;text-align:right;}
.deliver-date-or {width:70%;float:left;text-align:center;}
This is for the 3rd row
.deliver-start {clear:both!important;width:35%;float:left;}
.deliver-day {width:40%;float:left;}
.deliver-date-day {width:23%;float:left;}
Could you help me to solve this one?
The reason this is happening, is because Firefox renders the select box as a taller element than Chrome, and the container of the blue text is getting caught on the select's container element (because it's now sticking out lower than the others)
You can fix this by setting a fixed height on the container LIs - height:80px; worked well on my tests (provided they aren't supposed to be flexible heights for whatever reason)