CSS Framework issues

[Ronen Divon]

I am using BluePrint to for CSS and I have noticed that it throws all the RadControls off. The first thing it does is a reset of the CSS (it's pretty standard, all of the CSS or Yahoo UI components do it) Is this a known issue with Rad Controls?

[Dimo]

Hi reverland,

Apart from resetting default CSS property values, the CSS frameworks also venture to set some global custom styles. I will not discuss whether this is right or wrong, but in my opinion, CSS frameworks users should be aware that these frameworks should be treated like guidelines and one should always use the portion of a CSS framework that is required by his/her own application.

Eventhough we are trying to make our controls work well with CSS frameworks, this is not always reasonable, as it will increase our skins' size.

Anyway, if you provide us with a specific problem that you are encountering, we can give some advice.

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ronen Divon]

The only global styles are these

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baselinebaseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

There are some typography styles, but nothing I can't do without. The reset style though are needed for cross browser compatibility. The control I ran into the issue so far with is the Radpanel, from this example. http://demos.telerik.com/aspnet-ajax/Splitter/Examples/SP_InitialState/DefaultCS.aspx

[Dimo]

Hello reverland,

As far as I can see, the additional CSS creates problems with table cell content alignment. Please add the following CSS rule to your web application:

.RadSplitter_SkinName  td
{
     vertical-align: top;
}


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dimo]

P.S.

You also need this CSS rule, placed after the previous one:

.RadSplitter_SkinName  .resizeBar,
.RadSplitter_SkinName  .resizeBarOver,
.RadSplitter_SkinName  .resizeBarInactive,
.RadSplitter_SkinName  .resizeBarHorizontal,
.RadSplitter_SkinName  .resizeBarOverHorizontal,
.RadSplitter_SkinName  .resizeBarInactiveHorizontal
{
    vertical-align:middle;
}


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.