This is a migrated thread and some comments may be shown as answers.

CSS Framework issues

4 Answers 54 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ronen Divon
Top achievements
Rank 1
Ronen Divon asked on 15 Dec 2008, 02:14 PM
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?

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 15 Dec 2008, 05:32 PM
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.
0
Ronen Divon
Top achievements
Rank 1
answered on 15 Dec 2008, 07:24 PM
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
0
Dimo
Telerik team
answered on 16 Dec 2008, 05:46 AM
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.
0
Dimo
Telerik team
answered on 16 Dec 2008, 08:40 AM
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.
Tags
General Discussions
Asked by
Ronen Divon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ronen Divon
Top achievements
Rank 1
Share this question
or