CSS / Admin Page Designer

Somehow I always manage with my generic, CSS resets to cause problems with the page designer from the backend.  Either content, drop areas become invisible or skewed, or worse yet, I manage to cause some of the admin elements to be blocked, over/under-lapped or distorted, etc.  Is there any recommendation on adding resets or highly-specific CSS (like fixed-position items) in a way that won't conflict with the designer?

Hi Allen,

The problems with the CSS resets are caused by the tag selectors. For example if you put in your CSS reset the following code it will affect all of the elements (including these from the SF Page editor):

div, ul, li, pre, strong, span, p

margin: 0px;

padding: 0px;

position: relative;

float: left;

So, you can make a specific CSS reset that uses the selector/element that wraps all of the content, without the page editor:

#sfPageContainer div,

#sfPageContainer span,

#sfPageContainer p,

#sfPageContainer ul,

#sfPageContainer li

padding: 0px;

margin: 0px;

position: relative;

float: left;

I have been trying to come up with a solution to an issue that has been racking my brain for a couple days.  I have a site built in HTML5 that also uses CSS3.  The site loads fine on the front end, however, once I go to SiteFinity, all the layout is messed up, and I can't view some of my content blocks... They are invisible, skewed, misplaced, overlapping, etc.  I use Firebug to inspect the elements on the page, and noticed that the sfPageContainer element sets the width to over 1300px, so the elements that are floating right cannot be visible, because the page itself is set to 960px, with a min-width of 985px.  I'm not sure where to go from here and not even sure if the issue is Html5 and CSS3, but any help/ tips would be great. 

Thanks!!

Hi Huda,

Can you provide us the HTML markup and the CSS so we can test the same scenario?

Regards,
Jordan
the Telerik team