Hi,
I am having issues with applying external CSS styles on teh HTML tags/ content placed inside the CKEditor.
In my config.js I have added the code
baseURL = "http://" + location.host + "/myhome/";
config.contentsCss = [baseURL + 'assets/css/style_en.css'];
It applies most of the styles but in an inconsistent manner e.g. inner divs don't inherit the proper styles set in the .css files but rather it only inherits the styles of the parent <body> tag. Is that a bug?
Tue, 08/17/2010 - 10:35
#1
Re: CSS Style issues in CKEditor 3
Re: CSS Style issues in CKEditor 3
Here is the main page that applies the same CSS that I use for CKEDITOR
When I try to load a div of the page in the CKEDITOR it applies some of the styles but misses quite a few e.g. background color of the div. Here is the div content loaded in CKEDITOR (notice how the background color of the DIV has not been applied inside CKEDITOR).
Here is the HTML and CSS code of the page:
<html xmlns="http://www.w3.org/1999/xhtml" dir='ltr' xml:lang='en' lang='en'> <head> <style type="text/css"> /* ------------- "generic" styles */ body { margin: 0; padding: 0; background: #E3EDC2 url(/myhome/assets/images/page_background.jpg); color: #333; font: 0.75em "Lucida Grande", Arial, sans-serif; } div#formButtons { margin:1% 33% 0 33%; } #container_site { position:relative; background-color:#E3EDC2; width: 770px; /* sets the content width */ min-width:350px; margin:0 auto; /* no top/bottom margin, centered horizontally */ /*overflow:hidden;*/ } span#errormsg { display:block; margin:0 auto 0 5em; } .error { margin-right: 3em; border:1px red solid; background:#ffffcc url(images/error.gif) no-repeat top left; color:#dd0000; font-style: italic; clear:both; } a { text-decoration: none; } a img { border: 0; } p { margin: 0 0 1em; } /* ------------- header styles */ #header { margin:0; padding:0; background-color: inherit; /*background: #ABD240;*/ } #homelink { display: inline; margin:0; } #lang { padding: 0 2em 0 0; margin:-1.66em 0 0 0; text-align: right; } #lang a{ font-family: "Trebuchet MS", sans-serif; color: #000; text-decoration:underline; font-size: 1em; } #lang a#default{ color: #666; } /* ------------- main column styles */ #tabs { padding:0; margin:0; font:inherit; background-color:inherit; border-bottom:0; /*overflow:hidden;*/ } div#tabs ul{ padding:0; margin:0; } #leftCol { float: left; margin:0.33em 0 0 0; padding: 0 20em 4em 3em; } #leftCol h1 { margin: 0 33% 1.25em -2em; padding: 0.25em 2em; background: #FFF; color: #686397; font-size: 1.5em; } #leftCol h1 b { color: #B0D742; } #leftCol h2 { margin: 0.5em 0; padding-bottom: 0.25em; border-bottom: 1px solid #B0D742; font-size: 1.5em; } #leftCol img.illus { float: left; margin: 1em 1em 1em 0; } /* ------------- sidebar styles */ #rightCol { float: left; width: 17em; margin: 0.33em 0 4em -18em; } #rightCol div h3 { background: #9B96CA; } #rightCol div { background: #3A3C2D; color: #FFF; padding: 0 1em 1em; margin-top: 0.75em; } #rightCol div h3 { font-size: 1.25em; margin: 0 -0.8em; padding: 0.4em 0.8em; /*text-transform: lowercase;*/ } p.content { font-size:1em; } ul.content { list-style:none; font-size:1.5em; } /* creates rounded edge box */ div#searchBox { width:220px; height:30px; float:left; margin:1.5ex 0 auto 12em; } form#search .text { background: #FFF url(/myhome//assets/images/search_mini.gif) 100% 100% no-repeat; color:#333; vertical-align:middle; font-family:Verdana,Arial,"Times New Roman",sans-serif; font-size:0.7em; font-weight:bold; padding-left:1em; width:16em; height:4ex; border:none; text-align:left; } #imgSearch { margin:0; padding:0; vertical-align:middle; } .topBar { position:relative; /* to qualify as a container div */ background-color: #024472; /*background: #E3EDC2 url(../images/page_background.jpg);*/ margin:0; padding:0; height:4em; } div#topBarLinks { float:left; padding:0; font-family: "Trebuchet MS", sans-serif; font-size: .9em; font-weight:bold; color:#fff; margin:2.5em 0 0 2em; } div#today { float:right; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#FFF; margin:2.75ex 1em 0; } #topBarLinks a:link, a:visited { color:#fff; text-decoration:none; } #topBarLinks a:hover, a:active { color:#ccc; } #slideShow { text-align:center; padding:0 0 1em 0; } #todayNews h4 { margin: 0 0 0.5em; padding: 0.5em 0; border-bottom: 1px solid #FFF; font-weight: normal; } #todayNews p:first-line { font-style: italic; } #todayNews img { display: block; margin: 2em auto 0; } #post-archive table { margin: 0 auto; font-size: smaller; } #post-archive caption { margin: 1em auto 0; font-size: larger; font-weight: bold; } #post-archive td { padding: 0; border: 1px solid #787A6B; background: #5B5D4E; color: #222; text-align: center; } #post-archive table a { display: block; font-weight: bold; color: #FFF; } #post-archive table a:hover { background: #ABD240; } /* ===== footer ===== */ div#footer { clear: both; background: #E3EDC2 url(/myhome/assets/images/page_background.jpg); padding: 5px; } #footer p { font-family: "Trebuchet MS", sans-serif; font-size: .9em; color: #000; margin: 0; padding: 0; text-align: center; } #footer a { color: #000; text-decoration: underline; } </style> </head> <body> <div id="container_site"> <div class="topBar"> <div id="topBarLinks"> <a href="/myhome/home">Home page</a> | <a href="/myhome/home/changebody/help/en">Help</a> | <a href="/myhome/home/changebody/faq/en">FAQ</a> </div> <div id='searchBox'> <form id="search" action="#" method="post"> <input type="text" class="text" value="Search site..."/> <a href="#"> <img id="imgSearch" src="/myhome/assets/images/search2.gif" alt="search" /> </a> </form> </div> <div id="today"><script type="text/javascript">dispDate();</script></div> </div> <div id="header"> <a href="#" id="homelink"> <img src="/myhome/assets/images/images/banner_en.jpg" width="100%" height="80" alt="My Company Logo" /> </a> </div> <div id="tabs"> <ul><li><a href='#tabs-1'>Home</a></li><li><a href='#tabs-2'>About us</a></li><li><a href='#tabs-3'>Activities</a></li><li><a href='#tabs-4'>Events</a></li><li><a href='#tabs-5'>Gallery</a></li><li><a href='#tabs-6'>Contact us</a></li></ul> <p id="lang"><a id="default" href="/myhome/home/lang/en">en</a> | <a href="/myhome/home/lang/ar">ar</a> </p> <div id='tabs-1'> <div id="leftCol"> <h1> <b>home: </b>background</h1> <h2> Welcome To DiversityHouse UK</h2> <p> This house caters for the community's cultural, social and sports needs. Our aim is to bring together the diverse community, as well as those who are interested in cosmopolitan culture by offering outdoor and indoor activities and social events. <span style="color:#8b4513;"><strong><em>If you require any further information</em></strong></span>, please send us an email and we will respond to you as soon as we can. <img alt="Tea pot" class="illus" height="140" src="/myhome/assets/images/teapot.jpg" width="96" /> We hope that we can bring together members of the diverse community from diverse cities in the UK for a friendly gathering in london. This will include festive occasions and the National and Public holidays....</p> </div> <div id="rightCol"> <!--<div id="loginBox"> <form id="login" action="#" method="post"> <fieldset> <legend align="left">Login</legend><p/> <label for="userId">User name:</label> <input type="text" id="userId"/><br/> <label id="pwd">password:</label> <input type="text" id="pwd"/><br/> <input type="submit" value="Go"/> </fieldset> </form> </div>--> <div id="todayNews"> <h3> Today’s Announcement</h3> <h4> Breaking the ice...</h4> <p class="content"> You are invited to an exotic dinner this Friday to meet other members of the cosmopolitan community. The atmosphere will be great and we <strong><span style="color: rgb(0, 128, 0);">look </span></strong>forward to seeing you.</p> <p> <img alt="Couscous" height="120" src="/myhome/assets/images/couscous.jpg" width="160" /></p> </div> <div id="post-archive"> <h3> Post Archive</h3> <table cellspacing="2"> <caption> April 2010</caption> <thead> <tr> <th class="sun" scope="col"> Sun</th> <th class="mon" scope="col"> Mon</th> <th class="tue" scope="col"> Tue</th> <th class="wed" scope="col"> Wed</th> <th class="thu" scope="col"> Thu</th> <th class="fri" scope="col"> Fri</th> <th class="sat" scope="col"> Sat</th> </tr> </thead> <tbody> <tr> <td class="sun"> </td> <td class="mon"> </td> <td class="tue"> </td> <td class="wed"> </td> <td class="thu"> </td> <td class="fri"> </td> <td class="sat"> 1</td> </tr> <tr> <td class="sun"> 2</td> <td class="mon"> 3</td> <td class="tue"> 4</td> <td class="wed"> 5</td> <td class="thu"> 6</td> <td class="fri"> <a href="#">7</a></td> <td class="sat"> 8</td> </tr> <tr> <td class="sun"> 9</td> <td class="mon"> 10</td> <td class="tue"> <a href="#">11</a></td> <td class="wed"> 12</td> <td class="thu"> 13</td> <td class="fri"> 14</td> <td class="sat"> 15</td> </tr> <tr> <td class="sun"> 16</td> <td class="mon"> 17</td> <td class="tue"> 18</td> <td class="wed"> 19</td> <td class="thu"> <a href="#">20</a></td> <td class="fri"> <a href="#">21</a></td> <td class="sat"> 22</td> </tr> <tr> <td class="sun"> 23</td> <td class="mon"> <a href="#">24</a></td> <td class="tue"> 25</td> <td class="wed"> <a href="#">26</a></td> <td class="thu"> 27</td> <td class="fri"> 28</td> <td class="sat"> 29</td> </tr> <tr> <td class="sun"> 30</td> <td class="mon"> 31</td> <td class="tue"> </td> <td class="wed"> </td> <td class="thu"> </td> <td class="fri"> </td> <td class="sat"> </td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- tabs --> <div id="footer"> <p> Site design by <em>Freelance Academic Consultants</em>. Copyright © 2010. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> </p> </div> </div> </body> </html>Attachments: