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

Display Issues

1 Answer 178 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
briankb
Top achievements
Rank 2
briankb asked on 17 Aug 2008, 02:33 AM
I just started using the scheduler for a project. The local telerik demo's look fine. However when I drop it on a page it looks odd. I've tried the default, Web20, and Office2007 skins, all have the same issue with the top buttons and on the right side.

Apparently there is something in the skin I'm using that is causing these display issues. My question is what tools for FireFox or IE can I use to help me discover the cause of these problems between the skin and the telerik scheduler skin/css? Without just cut/paste each section of the CSS until it goes away.

/**************************************************************************************************************
 * Reset
 **************************************************************************************************************/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre
a, abbr, acronym, address, big, cite, code
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
 
/**************************************************************************************************************
 * Globals
 **************************************************************************************************************/ 
body { font-familyArialHelveticasans-seriffont-size10ptbackground-color#ccc; } 
h1, h2, h3, p, table, ul { margin10px; } 
h1 { font-size14ptfont-weightbold; } 
h2 { font-size12ptfont-weightbold; } 
h3 { font-size10ptfont-weightbold; } 
li { margin10px 10px 10px 40px; } 
th { whitewhite-spacenowrapfont-weightbold; } 
td { text-alignleftvertical-aligntop; } 
a { color#3B5E0Btext-decorationnone; } 
a:hover { color#3B5E0Btext-decorationunderline; } 
input.text, textarea { bordersolid #3A75B6 1pxpadding2px; } 
strong { font-weightbold; } 
em { font-styleitalic; } 
blockquote { margin10px 50px; } 
 
.clear { clearboth; } 
.rightright { text-alignrightright; } 
 
/* dont show transparent pngs in IE until the js fixes them */ 
.ie5 .iefix, .ie6 .iefix { display:none; }  
 
/**************************************************************************************************************
 * Layout
 **************************************************************************************************************/ 
#page { margin: 0 autowidth750pxbackground-color#fff; } 
#page a { font-size10pt; } 
 
#header { background-color#2764C1color#fffheight150pxmargin: 0; overflowhiddentext-alignrightright; } 
#header ul { list-stylenone; } 
#header ul li { displayinlinemargin: 0 2pxfont-size8pt; } 
#header ul li a { color#ffftext-decorationnonefont-size8pt; } 
#header ul li a:hover { text-decorationunderline; } 
#header ul li.username { font-weightnormal; } 
#header h1 { font-size24ptmargin: 0 10pxfloatleft; } 
#header .badge { margin: 0; margin-top25px; } 
 
#nav { backgroundurl("Images/tabs_bg.png"repeat-x left topheight34pxpadding: 0; overflowhidden; } 
#nav ul { list-stylenonemargin: 0; padding: 0; } 
#nav ul li { displayinlinemargin: 0; padding: 0; height34pxline-height34px; } 
#nav ul li a { text-decorationnonecursor: hand; floatlefttext-decorationnonemargin: 0; padding: 0; font-weightbold; } 
#nav ul li a span { font-size10ptcolor#fffheight34pxtext-aligncenterfloatleftdisplayblockpadding: 0 15px; } 
#nav ul li a:hover span { color#3B5E0B; } 
#nav ul li a.selected span { color#3B5E0B;  } 
 
#content { } 
 
#columns { backgroundurl(Images/columns_bg.png) top left repeat-y; } 
#column1 { width500pxoverflowhiddenfloatleft; } 
#column1 a { font-size10pt; } 
#column2 { width250pxoverflowhiddenfloatrightright; } 
#column2 a { font-size10pt; } 
 
#footer { background-color#2764C1color#fffbordersolid #2764C1 1pxheight100pxfont-size8pt; } 
#footer p  { font-size8pt; } 
#footer ul { list-stylenonefloatrightrightfont-size8pt; } 
#footer li { displayinlinemargin: 0; font-size8pt; } 
#footer a  { color#ffffont-size8pt; } 
 
/**************************************************************************************************************
 * Page Styles
 **************************************************************************************************************/ 
/* ~/Admin/Default.aspx */ 
#dashboard { width750pxmargin: 0; padding: 0; } 
#dashboard .column1 { width500px; } 
#dashboard .column1 table { margin-right: 0; } 
#dashboard .column2 { width250px; } 
 
/* ~/Admin/Users.aspx */ 
#searchterms { margin10pxbackground-color#eeebordersolid #3A75B6 1px; } 
#searchterms li, a { font-size8pt; } 
#searchterms li { margin-top2pxmargin-bottom2px; } 
#searchterms p { margin2px 4px; } 
 
#userlist { } 
#userlist .gv { margin: 0 10px; } 
#userlist .count { margin: 0 10pxtext-alignrightrightfont-size8ptfont-weightbold; } 
#userlist .gvedrs td { width730pxpadding5px; } 
 
/* ~/Admin/Roles.aspx */ 
#roles { } 
#roles .list { margin: 0 10pxpadding10pxbordersolid #3A75B6 1pxbackground-color#eee; } 
#roles .list table { margin: 0; padding: 0; } 
#roles .list td { padding4px; } 
#roles .list label { margin-left5px; } 
#roles .note { margin: 0 10px; } 
 
/* ~/Login.aspx */ 
#login { margin50px; } 
#login .container { width200pxmargin-leftautomargin-rightauto; } 
#login h1 { margin: 0 0 10px 0; padding: 0; } 
#login p { margin10px 0 0 0; padding: 0; font-size10pt; } 
#login a { font-size10pt; } 
#login label { displayblockfont-weightbold; } 
#login input.text { width195px; } 
 
/* ~/Signup.aspx */ 
#signup { margin50px 195pxwidth355px; } 
#signup h1 { margin: 0 0 10px 0; padding: 0; } 
#signup table { margin: 0 0 10px 0; bordernonewidth355px; } 
#signup td { padding5px; } 
 
/* ~/ForgotPassword.aspx */ 
#passwordrecovery { margin50px; } 
#passwordrecovery .container { width300pxmargin-leftautomargin-rightauto; } 
#passwordrecovery h1 { margin: 0 0 10px 0; padding: 0; } 
#passwordrecovery p { margin10px 0 0 0; padding: 0; } 
#passwordrecovery label { displayblockfont-weightbold; } 
#passwordrecovery input.text { width295px; } 
 
/* ~/Member/Account.aspx */ 
#accountinfo { } 
 
/******************************************************************************
 * ASP.NET Controls
 ******************************************************************************/ 
  
/**** <asp:GridView /> ****/ 
.gv { background-color#cccbordersolid #3A75B6 1pxborder-collapsecollapse; } 
.gv th, .gv td { text-alignleftpadding2pxfont-size8pt; } 
.gv th { color#fffbackground-color#2764C1; } 
.gv th a { color#ffftext-decorationnone; } 
.gvar { background-color#fff; } 
.gvpr td { color#ffffont-weightboldbackground-color#2764C1font-size10pt; } 
.gvpr a { color#cccfont-weightbold; } 
.gvpr td table { margin: 0; } 
 
/**** <asp:DetailsView /> ****/ 
.dv { background-color#cccbordersolid #3A75B6 1pxborder-collapsecollapse; } 
.dv td { padding4px; } 
.dvh { text-alignrightrightwhitewhite-spacenowrapcolor#fffbackground-color#2764C1font-weightbold; } 
 
/* <asp:ValidationSummary /> */ 
.vs { color#fffbackground-color#c00margin: 0; padding4px; } 
.vs ul { margin: 0; padding: 0; list-stylenone; } 
.vs li { margin: 0; padding: 0; font-size8ptfont-weightnormal; } 
 
/* <hc:Dialog /> */ 
.dialog { color#000background-color#fffbordersolid #2764C1 2px; } 
.dialog_title { color#fffbackground-color#2764C1font-size10ptfont-weightboldpadding4pxtext-alignleft; } 
.dialog_content { text-alignleft; } 
.dialog_content .gv, .dialog_content .dv, .dialog_content table, .dialog_content p { margin10px 10px 0 10px; } 
.dialog_buttons { padding10pxtext-alignrightright; } 
.dialog_background { background-color: Gray; filter: alpha(opacity=70); opacity: 0.7; } 
 
/* <hc:Button /> */ 
button.btn { background-colortransparentbordernonemargin: 0; padding: 0; } 
button.btn div { border: 0; cursorpointerpadding: 0 10px 0 0; text-aligncenterheight28px; } 
button.btn div span { displayblockwhitewhite-spacenowrappadding: 0 0 0 10pxcolor#ffffont-size10pt;  font-weightboldheight28pxline-height28px; } 
/* button graphics */ 
button.btn div { backgroundurl(Images/button_right.png) top rightright no-repeat; } 
button.btn div span { backgroundurl(Images/button_left.png) top left no-repeat; } 
button.btn:hover div { background-position: 100% -28px; } 
button.btn:hover div span { background-position: 0% -28pxcolor#3B5E0B; } 
/* button browser specific tweaks */ 
.ie button.btn { widthautooverflowvisiblepadding: 0 0 0 4px; } 
/*.gecko button.btn div { margin: 0 -3px; } */ 
 
/************************************************************************************
 * AjaxControlToolkit Popup Calendar
 ************************************************************************************/ 
.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:240px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;} 
.ajax__calendar_body {height:139px;width:240px;position:relative;overflow:hidden;margin:auto;} 
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;} 
.ajax__calendar_container TD {font-size:8pt;padding:0;} 
.ajax__calendar_header {height:20px;width:100%;} 
.ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(Images/arrow-left.gif);} 
.ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:rightright;background-repeat:no-repeat;background-position:50% 50%;background-image:url(Images/arrow-rightright.gif);} 
.ajax__calendar_title {cursor:pointer;font-weight:bold;} 
.ajax__calendar_footer {height:15px;} 
.ajax__calendar_today {cursor:pointer;padding-top:3px;} 
.ajax__calendar_dayname {height:17px;width:17px;text-align:rightright;padding:0 2px;} 
.ajax__calendar_day {height:17px;width:18px;text-align:rightright;padding:0 2px;cursor:pointer;} 
.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;} 
.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;} 
 
.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;} 
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;} 
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;} 
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;} 
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;} 
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;} 
 
.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;} 
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;} 
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;} 
 
.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;} 
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;} 
 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;} 
 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;} 
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;} 

I had a screen shot to post as well but I don't see an option to attach or embed a photo. How do you attach a photo to a forum message?

Here is a Link to it for now

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 19 Aug 2008, 11:42 AM
Hi Brian,

We did a test page against the provided css styles and here is the fix which we found:

.rsHeader li  
{  
    margin0px;  
    }  
    .RadScheduler_Office2007, .RadScheduler_Office2007 table   
    {  
        margin:0px;  
    } 

Please, try this and let us know if you find something odd afterwards. If you need to send us screenshots, you can open a support ticket and attach files there.

Greetings,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Scheduler
Asked by
briankb
Top achievements
Rank 2
Answers by
Peter
Telerik team
Share this question
or