Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
<table>
#1
another interesting find
in ckeditor and tinymce I am seing that if I use a <table> it displays in the live editor but not in gs

ie:
Code:
<table border="1">
    <tbody>
<tr><td>this is a test</td><td>1</td></tr>
<tr><td>this is a test</td><td>2</td></tr>
<tr><td>this is a test</td><td>3</td></tr>
    </tbody>
</table>

should display with a 1px border and it does in the editor, but when displayed the border is is gone
almost like it was set to <table border=0>

Is this expected behavior?

John
Reply
#2
ckeditor uses its own stylesheet, your theme has its own as well.
so if you mean that it does not look the same then yeah thats expected.

themes CAN make their own content.css for ckeditor, as can users if this is a problem.
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#3
interesting... I would have thought that if something displayed in the editor it would display on the site as well

I switched to the cardinal theme and it indeed shows the table frame... now I just have to look at why
Reply
#4
content yes, css no
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#5
As Shawn mentioned the editor and the theme use separate CSSes. Cardinal's css does not style tables in any particular way so the 1 pixel border that the editor added is not being replaced by anything.

Themes can include a second css sheet, editor.css, that control how things are displayed in the editor. Many themes you download do not, but you can add one. If you want the look to be the same as the pages you need to add the same styles to editor.css that you have in styles.css

The quickest/easiest way is to do this is to have the editor.css load up styles.css (and any other relevant style sheets).
Code:
@import url("style.css");

Then you start fixing anything that is incompatible or did not load up properly.

If your content area uses a different background than the body you'll want to add a body tag to your editor css so it can simulate the background used by your main content area.
Code:
body {background:#fff;}

Custom fonts seem to need to be loaded up here as well. I guess by the time it gets to loading up the imported styles.css it's too late to start adding fonts in Smile
Code:
@import url(https://fonts.googleapis.com/css?family=Rosarivo);

And I sometimes have to add some stuff for images as well, if I'm remembering correctly.
Reply
#6
editor.css not content.css my bad
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#7
thanks for the tips guys

I appreciate it
Reply
#8
added the table define to css of the theme

Code:
table, th, td {
   border: 1px solid black;
   padding: 5px;
   text-align: left;
}

again thanks for the lead.. I never would have thought to add it by hand

John
Reply




Users browsing this thread: 1 Guest(s)