+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / .sf_cols Class

.sf_cols Class

9 posts, 0 answered
  1. David Whritenour
    David Whritenour avatar
    22 posts
    Registered:
    30 Nov 2009
    10 Mar 2011
    Link to this post
    Is anyone experiencing the "display: inline-block" code in the ".sf_cols" class adding extra padding above and below a block in IE8 and above.  I do not observe behavior in Firefox 3 and above or Chrome.

    If so, how are you handling it?

    Thanks,
    David Whritenour
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    14 Mar 2011
    Link to this post
    Hi David Whritenour,

    I've made some tests on .sf_cols and there was absolutely identical behavior on IE8, Chrome 9, Opera 11, Safari 5.0.3 and Firefox 3.X - no extra padding added below or above.


    You can provide us your CSS file or a link to your live project to check where is the problem.



    Best wishes,
    Jordan
    the Telerik team
  3. Dale Overton
    Dale Overton avatar
    9 posts
    Registered:
    13 Jan 2010
    14 Mar 2011
    Link to this post
    I'm actually experiencing this right now.

    My link is http://userconference.ungerboeck.com/global2011.

    If I user the developer tools and turn off the .sf_cols display attribute my navigation moves up about 15 px.  And this is using the built in styles, I haven't actually started styling my columns yet.
  4. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    15 Mar 2011
    Link to this post
    Hello David Whritenour,

    In the default styles of "sf_cols" there is a CSS  property called "content". Probably we will remove it for the next official release. Until then you can override it in your CSS with this line:

    .sf_cols {content:none !important;}
    /*OR*/
    .sf_cols {content: "" !important;}


    Greetings,
    Jordan
    the Telerik team
  5. David Whritenour
    David Whritenour avatar
    22 posts
    Registered:
    30 Nov 2009
    16 Mar 2011
    Link to this post
    I actually had to overrided the pseudo class:  
     

     

    .sf_cols:after  {content: none!important}

     
    I did not not know we could override the builtin classes like this.
    Anyways, this seems to have done the trick.  Thanks for the help!

    David Whritenour

     

  6. Richard Baugh
    Richard Baugh avatar
    201 posts
    Registered:
    22 Aug 2012
    31 Mar 2011
    Link to this post
    We have actually noticed that when viewing the actual site and being logged in, that the sf_cols has the display attribute set to inline. But when you logout, the display attribute is not set and is defaulted back to block. It seems the attribute is added when the inline editor items are set by being logged in.

    We have just set the sf_cols to always have display set to block. Sometimes this has drastic effects on the site. Sometimes it doesn't.
  7. Trevor
    Trevor avatar
    35 posts
    Registered:
    28 Jan 2012
    23 Feb 2012
    Link to this post
    using inline-block also causes the clearfix to fail.

    the css _clear:none hack, combined with inline-block definitely causes IE8 to look like crap.  This is really annoying because I just noticed this, and there's a lot of places were changing the display to block now causes spacing issues.

    it seems quite odd that inline-block would be assigned to the display of such a commonly output wrapper class.  it is also extremely frustrating that this cms outputs invalid CSS with IE hacks in it.  
  8. Trevor
    Trevor avatar
    35 posts
    Registered:
    28 Jan 2012
    23 Feb 2012
    Link to this post
    judging from what happens when you change the elements to block -- it looks like sf_cols was given inline-block to allow margins to be defined in wrapped elements.

    so if sf_cols is wrapped around a layout element, and that element has margin-top of 40px, then the top of sf_cols stretches up 40px above the inner element.

    if sf_cols were block, then it's top (and therefore its background image) would be right in line with the inner element, and anything above it would be 40px above the block sf_cols.

    sf_cols doesn't clear properly in IE8 if it's inline-block, so to fix, I had to make it block and then track down all the templates that put margin top or bottom on an element inside an sf_cols with a background image.

    by removing the margin, applying a CSS class and the putting padding on the CSS class in place of margin, all is well.

    i personally think it would make a lot more sense if sf_cols were block, and in the template editor padding was assigned instead of margins
  9. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    28 Feb 2012
    Link to this post
    Hello Trevor,

    Thanks for your feedback. We will consider changes in sf_cols default CSS rules.


    Greetings,
    Katia
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
9 posts, 0 answered