SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating problem

    Hi,

    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.

    Any advice?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Hi Jammmy,

    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.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,792
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Or you could use inline-block instead of floating and avoid the snagging issue although you have to add hacks for ie6/7.

    Code:
    .four.columns{
    display:inline-block;
    *display:inline;/* ie6/7 hack for inline-block*/
    float:none!important;
    width:33%;
    vertical-align:top;
    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.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Or you could use inline-block instead of floating and avoid the snagging issue although you have to add hacks for ie6/7.

    Code:
    .four.columns{
    display:inline-block;
    *display:inline;/* ie6/7 hack for inline-block*/
    float:none!important;
    width:33%;
    vertical-align:top;
    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.
    Foundation doesn't have support for IE 6-7 as it makes use of box sizing.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    thanks for this fix. It works!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,792
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    Foundation doesn't have support for IE 6-7 as it makes use of box sizing.
    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.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Agreed, at work we have just dropped all support for IE7 with our major client.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •