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.
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
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-family: Arial, Helvetica, sans-serif; font-size: 10pt; background-color: #ccc; } | |
| h1, h2, h3, p, table, ul { margin: 10px; } | |
| h1 { font-size: 14pt; font-weight: bold; } | |
| h2 { font-size: 12pt; font-weight: bold; } | |
| h3 { font-size: 10pt; font-weight: bold; } | |
| li { margin: 10px 10px 10px 40px; } | |
| th { whitewhite-space: nowrap; font-weight: bold; } | |
| td { text-align: left; vertical-align: top; } | |
| a { color: #3B5E0B; text-decoration: none; } | |
| a:hover { color: #3B5E0B; text-decoration: underline; } | |
| input.text, textarea { border: solid #3A75B6 1px; padding: 2px; } | |
| strong { font-weight: bold; } | |
| em { font-style: italic; } | |
| blockquote { margin: 10px 50px; } | |
| .clear { clear: both; } | |
| .rightright { text-align: rightright; } | |
| /* dont show transparent pngs in IE until the js fixes them */ | |
| .ie5 .iefix, .ie6 .iefix { display:none; } | |
| /************************************************************************************************************** | |
| * Layout | |
| **************************************************************************************************************/ | |
| #page { margin: 0 auto; width: 750px; background-color: #fff; } | |
| #page a { font-size: 10pt; } | |
| #header { background-color: #2764C1; color: #fff; height: 150px; margin: 0; overflow: hidden; text-align: rightright; } | |
| #header ul { list-style: none; } | |
| #header ul li { display: inline; margin: 0 2px; font-size: 8pt; } | |
| #header ul li a { color: #fff; text-decoration: none; font-size: 8pt; } | |
| #header ul li a:hover { text-decoration: underline; } | |
| #header ul li.username { font-weight: normal; } | |
| #header h1 { font-size: 24pt; margin: 0 10px; float: left; } | |
| #header .badge { margin: 0; margin-top: 25px; } | |
| #nav { background: url("Images/tabs_bg.png") repeat-x left top; height: 34px; padding: 0; overflow: hidden; } | |
| #nav ul { list-style: none; margin: 0; padding: 0; } | |
| #nav ul li { display: inline; margin: 0; padding: 0; height: 34px; line-height: 34px; } | |
| #nav ul li a { text-decoration: none; cursor: hand; float: left; text-decoration: none; margin: 0; padding: 0; font-weight: bold; } | |
| #nav ul li a span { font-size: 10pt; color: #fff; height: 34px; text-align: center; float: left; display: block; padding: 0 15px; } | |
| #nav ul li a:hover span { color: #3B5E0B; } | |
| #nav ul li a.selected span { color: #3B5E0B; } | |
| #content { } | |
| #columns { background: url(Images/columns_bg.png) top left repeat-y; } | |
| #column1 { width: 500px; overflow: hidden; float: left; } | |
| #column1 a { font-size: 10pt; } | |
| #column2 { width: 250px; overflow: hidden; float: rightright; } | |
| #column2 a { font-size: 10pt; } | |
| #footer { background-color: #2764C1; color: #fff; border: solid #2764C1 1px; height: 100px; font-size: 8pt; } | |
| #footer p { font-size: 8pt; } | |
| #footer ul { list-style: none; float: rightright; font-size: 8pt; } | |
| #footer li { display: inline; margin: 0; font-size: 8pt; } | |
| #footer a { color: #fff; font-size: 8pt; } | |
| /************************************************************************************************************** | |
| * Page Styles | |
| **************************************************************************************************************/ | |
| /* ~/Admin/Default.aspx */ | |
| #dashboard { width: 750px; margin: 0; padding: 0; } | |
| #dashboard .column1 { width: 500px; } | |
| #dashboard .column1 table { margin-right: 0; } | |
| #dashboard .column2 { width: 250px; } | |
| /* ~/Admin/Users.aspx */ | |
| #searchterms { margin: 10px; background-color: #eee; border: solid #3A75B6 1px; } | |
| #searchterms li, a { font-size: 8pt; } | |
| #searchterms li { margin-top: 2px; margin-bottom: 2px; } | |
| #searchterms p { margin: 2px 4px; } | |
| #userlist { } | |
| #userlist .gv { margin: 0 10px; } | |
| #userlist .count { margin: 0 10px; text-align: rightright; font-size: 8pt; font-weight: bold; } | |
| #userlist .gvedrs td { width: 730px; padding: 5px; } | |
| /* ~/Admin/Roles.aspx */ | |
| #roles { } | |
| #roles .list { margin: 0 10px; padding: 10px; border: solid #3A75B6 1px; background-color: #eee; } | |
| #roles .list table { margin: 0; padding: 0; } | |
| #roles .list td { padding: 4px; } | |
| #roles .list label { margin-left: 5px; } | |
| #roles .note { margin: 0 10px; } | |
| /* ~/Login.aspx */ | |
| #login { margin: 50px; } | |
| #login .container { width: 200px; margin-left: auto; margin-right: auto; } | |
| #login h1 { margin: 0 0 10px 0; padding: 0; } | |
| #login p { margin: 10px 0 0 0; padding: 0; font-size: 10pt; } | |
| #login a { font-size: 10pt; } | |
| #login label { display: block; font-weight: bold; } | |
| #login input.text { width: 195px; } | |
| /* ~/Signup.aspx */ | |
| #signup { margin: 50px 195px; width: 355px; } | |
| #signup h1 { margin: 0 0 10px 0; padding: 0; } | |
| #signup table { margin: 0 0 10px 0; border: none; width: 355px; } | |
| #signup td { padding: 5px; } | |
| /* ~/ForgotPassword.aspx */ | |
| #passwordrecovery { margin: 50px; } | |
| #passwordrecovery .container { width: 300px; margin-left: auto; margin-right: auto; } | |
| #passwordrecovery h1 { margin: 0 0 10px 0; padding: 0; } | |
| #passwordrecovery p { margin: 10px 0 0 0; padding: 0; } | |
| #passwordrecovery label { display: block; font-weight: bold; } | |
| #passwordrecovery input.text { width: 295px; } | |
| /* ~/Member/Account.aspx */ | |
| #accountinfo { } | |
| /****************************************************************************** | |
| * ASP.NET Controls | |
| ******************************************************************************/ | |
| /**** <asp:GridView /> ****/ | |
| .gv { background-color: #ccc; border: solid #3A75B6 1px; border-collapse: collapse; } | |
| .gv th, .gv td { text-align: left; padding: 2px; font-size: 8pt; } | |
| .gv th { color: #fff; background-color: #2764C1; } | |
| .gv th a { color: #fff; text-decoration: none; } | |
| .gvar { background-color: #fff; } | |
| .gvpr td { color: #fff; font-weight: bold; background-color: #2764C1; font-size: 10pt; } | |
| .gvpr a { color: #ccc; font-weight: bold; } | |
| .gvpr td table { margin: 0; } | |
| /**** <asp:DetailsView /> ****/ | |
| .dv { background-color: #ccc; border: solid #3A75B6 1px; border-collapse: collapse; } | |
| .dv td { padding: 4px; } | |
| .dvh { text-align: rightright; whitewhite-space: nowrap; color: #fff; background-color: #2764C1; font-weight: bold; } | |
| /* <asp:ValidationSummary /> */ | |
| .vs { color: #fff; background-color: #c00; margin: 0; padding: 4px; } | |
| .vs ul { margin: 0; padding: 0; list-style: none; } | |
| .vs li { margin: 0; padding: 0; font-size: 8pt; font-weight: normal; } | |
| /* <hc:Dialog /> */ | |
| .dialog { color: #000; background-color: #fff; border: solid #2764C1 2px; } | |
| .dialog_title { color: #fff; background-color: #2764C1; font-size: 10pt; font-weight: bold; padding: 4px; text-align: left; } | |
| .dialog_content { text-align: left; } | |
| .dialog_content .gv, .dialog_content .dv, .dialog_content table, .dialog_content p { margin: 10px 10px 0 10px; } | |
| .dialog_buttons { padding: 10px; text-align: rightright; } | |
| .dialog_background { background-color: Gray; filter: alpha(opacity=70); opacity: 0.7; } | |
| /* <hc:Button /> */ | |
| button.btn { background-color: transparent; border: none; margin: 0; padding: 0; } | |
| button.btn div { border: 0; cursor: pointer; padding: 0 10px 0 0; text-align: center; height: 28px; } | |
| button.btn div span { display: block; whitewhite-space: nowrap; padding: 0 0 0 10px; color: #fff; font-size: 10pt; font-weight: bold; height: 28px; line-height: 28px; } | |
| /* button graphics */ | |
| button.btn div { background: url(Images/button_right.png) top rightright no-repeat; } | |
| button.btn div span { background: url(Images/button_left.png) top left no-repeat; } | |
| button.btn:hover div { background-position: 100% -28px; } | |
| button.btn:hover div span { background-position: 0% -28px; color: #3B5E0B; } | |
| /* button browser specific tweaks */ | |
| .ie button.btn { width: auto; overflow: visible; padding: 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
0
Hi Brian,
We did a test page against the provided css styles and here is the fix which we found:
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.
We did a test page against the provided css styles and here is the fix which we found:
| .rsHeader li |
| { |
| margin: 0px; |
| } |
| .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.