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,192
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 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,192
    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.

  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
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 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,192
    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.


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
  •