Link to home
Start Free TrialLog in
Avatar of Rohit Bajaj
Rohit BajajFlag for India

asked on

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 :
User generated image
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
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

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

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

Open in new window

Avatar of Rohit Bajaj

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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... ?
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!
Wow.. thats seems really a good option...