jammmy — 2013-05-13T03:11:55-04:00 — #1
for some weird reason I can't get the floating to work in Firefox (Win & Mac) and IE: site link. It's based on ZURB's Foundation.
In Chrome it looks ok.
chris_upjohn — 2013-05-13T05:41:45-04:00 — #2
The problem is the first box in your row is slightly longer than the rest of the boxes, your best bet would be to wrap each row in their own <div class="row"></div> container which will clear the extra spacing created by these longer elements.
paulob — 2013-05-13T11:35:57-04:00 — #3
Or you could use inline-block instead of floating and avoid the snagging issue although you have to add hacks for ie6/7.
*display:inline;/* ie6/7 hack for inline-block*/
margin-right:-2px;/* white space hack*/
There is a white-space issue with inline-block but usually it doesn't notice when elements are spaced out anyway.
chris_upjohn — 2013-05-13T22:24:24-04:00 — #4
Foundation doesn't have support for IE 6-7 as it makes use of box sizing.
jammmy — 2013-05-14T03:31:51-04:00 — #5
thanks for this fix. It works!
paulob — 2013-05-14T07:34:33-04:00 — #6
Ah ok:) I usually include the IE hacks for inline-block just in case anyone else is watching and needs older support. However I think we are getting to the point now where IE7 support can be dropped.
chris_upjohn — 2013-05-14T08:08:01-04:00 — #7
Agreed, at work we have just dropped all support for IE7 with our major client.