.sf_cols Class - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

.sf_cols Class

  • .sf_cols Class
  • 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?

    David Whritenour
  • 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,
    the Telerik team

  • I'm actually experiencing this right now.

    My link is 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.
  • 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;
    .sf_cols content: "" !important;

    the Telerik team
  • 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


  • 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.
  • 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.  
  • 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
  • Hello Trevor,

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

    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