.sf_cols Class - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 10-Mar-2011 00:00

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

Posted by Community Admin on 14-Mar-2011 00:00

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 14-Mar-2011 00:00

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.

Posted by Community Admin on 15-Mar-2011 00:00

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 16-Mar-2011 00:00

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

Posted by Community Admin on 31-Mar-2011 00:00

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.

Posted by Community Admin on 23-Feb-2012 00:00

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.

Posted by Community Admin on 23-Feb-2012 00:00

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

Posted by Community Admin on 28-Feb-2012 00:00

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

This thread is closed