Get rid of margin on ul and ol tags inside an iframe

Hi,
In my web application an iframe gets loaded from a third party js.
Inside it there are some ol and ul tags which are getting margin of 14px top and bottom.
This most probably is coming from the browser.
How can i get rid of these margins ?
Here is the screen shot :
Screen-Shot-2016-02-15-at-10.05.48-P.png
The third party library i am loading is basically ckeditor and demo can be seen at http://ckeditor.com/demo
If you type in the editor with bulltet or numbering tools... you will see in the firebug that ul and ol elements are getting generated with top and bottom margins... I am loading this ckeditor inside my web application.... and want to keep them to 0. But they are loaded inside iframe....
Thanks
Rohit BajajAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hagay MandelCommented:
I guess the simplest way will by overriding the original margins:

cke_editable ol, cke_editable ul, {
margin: 0 !important;
}

Open in new window

Rohit BajajAuthor Commented:
Doesnt seem to be working probably because these nodes are inside an iframe... and if i apply a rule like that it will get applied on my parent DOM
Alexandre SimõesManager / Solutions ArchitectCommented:
The thing is that you need to add the css into the iframe.
To do so you either change the CKEditor css (which I know from previous questions you don't want) or you inject it upon editor ready, like this:
CKEDITOR.on('instanceReady',
  function(e) {
    var ckhead= $(e.editor.document.$).find('head');
    //var ckbody = $(e.editor.document.$).find('body');
    
    ckhead.append('<style>ul{margin:0 !important;}</style>');
  });

Open in new window

This is a generic approach and it will affect all editors on the page; if you only have one then there's nothing to worrie about.

Still I think the best option is to add your customizations to the ckeditor css file.
Document them properly and if the version of the control changes, just move them into the new file.
Doing this kind of CSS injection makes things look like magic and much harder to identify and maintain.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Rohit BajajAuthor Commented:
Hi Alexandre,
Thanks your solutions works perfect.
Just want to ask you one more thing.. in case say i use contents.css for modification as you suggest.
How to document this ? Is there any standard way to document these type of things... ?
Alexandre SimõesManager / Solutions ArchitectCommented:
Documentation is a cultural thing.
I mean, there's no way to prevent someone from replacing the contents.css, even if it's documented somewhere that it should be handled with care.

But there are other options, you're not alone here :)
I just discovered that CKEditor actually supports adding CSS files!
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss

Try to add your custom CSS file in this way, from the documentation, it seems like the official way to do it.

Let me know!
Rohit BajajAuthor Commented:
Wow.. thats seems really a good option...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.