The source generated by ckeditor is

table style="width: 700px;" border="1" cellspacing="1" cellpadding="1"

But the border doesn't appear on the VIEW page - only in the editor and preview screen.

This used to be the case with previous v3 of ckeditor api too.

I've tried using full html, switching off all text filters, and changing to Garland in case it was theme related, but still doesn't work. I'm out of ideas.

Any suggestion would be much appreciated. :)

Comments

den33775’s picture

den33775 commented
Issue summary: View changes
den33775’s picture

den33775 commented
Issue summary: View changes
twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Active » Postponed (maintainer needs more info)

If you inspect the HTML of the rendered page, is the border="1" attribute still there? If not, it has been filtered out by some filter in your format configuration. (Then it should also show up in the editor when editing the node again since filters only run during rendering.)

Maybe some style rule is overriding the border-style property and setting it to "none" so it's not visible at all? Firebug for Firefox or the Developer tools in other browsers should be able to show that during inspection.

den33775’s picture

den33775 commented

Thanks TwoD!

I've installed firebug for firefox, along with the drupal for firebug addon.

Looking at the various tabs:

Drupal tab shows original HTML for table starts:

table border="7" cellpadding="1" cellspacing="1" style="font-size:13px; height:227px; line-height:1.6em; width:650px"

HTML tab shows rendering of this is the same:

table cellspacing="1" cellpadding="1" border="7" style="font-size:13px; height:227px; line-height:1.6em; width:650px"

The CSS tab has loads of CSS in it of course, and although I can read and google ref the commands, I'm no expert at CSS! However, sections with the word "border" in it are:

html.js fieldset.collapsed {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
height: 1em;

fieldset.collapsible {
position: relative;
}
fieldset.collapsible .fieldset-legend {
display: block;
}
.form-textarea-wrapper textarea {
-moz-box-sizing: border-box;
display: block;
margin: 0;
width: 100%;
}
.resizable-textarea .grippie {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("/misc/grippie.png") no-repeat scroll center 2px #EEEEEE;
border-color: #DDDDDD;
border-image: none;
border-right: 1px solid #DDDDDD;
border-style: solid;
border-width: 0 1px 1px;
cursor: s-resize;
height: 9px;
overflow: hidden;
}

table.sticky-header {
background-color: #FFFFFF;
margin-top: 0;
}
.progress .bar {
background-color: #FFFFFF;
border: 1px solid;
}

ul.menu {
border: medium none;
list-style: none outside none;
text-align: left;
}

ul.primary {
border-bottom: 1px solid #BBBBBB;
border-collapse: collapse;
height: auto;
line-height: normal;
list-style: none outside none;
margin: 5px;
padding: 0 0 0 1em;
white-space: nowrap;
}
ul.primary li {
display: inline;
}
ul.primary li a {
background-color: #DDDDDD;
border-color: #BBBBBB;
border-style: solid solid none;
border-width: 1px;
height: auto;
margin-right: 0.5em;
padding: 0 1em;
text-decoration: none;
}
ul.primary li.active a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
border-color: #BBBBBB #BBBBBB #FFFFFF;
border-image: none;
border-style: solid;
border-width: 1px;
}
ul.primary li a:hover {
background-color: #EEEEEE;
border-color: #CCCCCC #CCCCCC #EEEEEE;
}
ul.secondary {
border-bottom: 1px solid #BBBBBB;
margin: 5px;
padding: 0.5em 1em;
}
ul.secondary li {
border-right: 1px solid #CCCCCC;
display: inline;
padding: 0 1em;
}
ul.secondary a {
padding: 0;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: 4px solid #999999;
}

div.status {
background-image: url("/misc/message-24-ok.png");
border-color: #BBEE77;
}
div.status, .ok {
color: #234600;
}
div.status, table tr.ok {
background-color: #F8FFF0;
}
div.warning {
background-image: url("/misc/message-24-warning.png");
border-color: #EEDD55;
}
div.warning, .warning {
color: #884400;
}
div.warning, table tr.warning {
background-color: #FFFCE5;
}

img {
border: 0 none;
}
table {
border-collapse: collapse;
}
th {
border-bottom: 3px solid #CCCCCC;
padding-right: 1em;
text-align: left;
}
tbody {
border-top: 1px solid #CCCCCC;
}
tr.even, tr.odd {
background-color: #EEEEEE;
border-bottom: 1px solid #CCCCCC;
padding: 0.1em 0.6em;
}

input.form-checkbox, input.form-radio {
vertical-align: middle;
}
.marker, .form-required {
color: #FF0000;
}
.form-item input.error, .form-item textarea.error, .form-item select.error {
border: 2px solid red;
}

td.checkbox, th.checkbox {
text-align: center;
}
.progress {
font-weight: bold;
}
.progress .bar {
background: none repeat scroll 0 0 #CCCCCC;
border-color: #666666;
border-radius: 3px 3px 3px 3px;
margin: 0 0.2em;
}

I use pixture-reloaded theme, and the borders are drawn in ckeditor with wysiwyg, using ckeditor library 4.1.1 (although didn't work on previous versions either).

I wondered if the two sections:

html.js fieldset.collapsed {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
height: 1em;

And:

table {
border-collapse: collapse;
}

might be to blame? I tried using Live Edit to change from "collapse" to "separate" but it didn't make any difference (changed it back again now).

I also switched off all css related things that i could find in pixture-reloaded theme (e.g. extra css classes, rounded corners, drop shadows).

Any thoughts very much appreciated!

Thanks
den33775

den33775’s picture

den33775 commented

Ok, made a bit more progress.

If I change wysiwyg profile, CSS tab, "Editor CSS" to use "Editor default CSS" (ckeditor library 4.1.1), it all looks great in the editor!!!

If I change wysiwyg profile, CSS tab, "Editor CSS" to "Use theme CSS" it doesn't work and looks same as on page.

If I edit the table in the wysiwyg editor, select Table Properties, and set the border width to (e.g.) 6px, then go to the Advanced tab, the Style box doesn't have any border settings in it. It just has:

6px;font-size:13px;height:227px;line-height:1.6em;width:650px;

However, if I add in:

"border-style:solid;border-width"

to the style box, I get a border in the editor and on the page.

But it is in very light grey, is not user friendly - i.e. user sets border width and it doesn't work, so they have to know how to do styles, plus this style is uniform light grey, but the editor CSS border is a wonderful 3D effect left and top border lighter than bottom and right border. So seems CSS related.

I've tried editing pixture_reloaded.css table colour (which was hash eee, and I changed it to a darker hash e9e9e9, but it didn't work! :S

Anyway, I guess answer is something like copying the wonderful table styles from the wysiwyg editor css files to the pixture reloaded text files?

Not sure which bits to copy...

Guess this is an actual wysiwyg bug though? Any thoughts?

Thanks
den33775

den33775’s picture

den33775 commented

Ok, I think the problem is in wysiwyg not theme.

When I edit table properties, I get two tabs: Table Properties and Advanced.

In Table Properties, there are a number of selections. No matter what I select, the only one that appears mirrored in the advanced tab under the Style box is width. If I select a width of 600px on the Table Properties tab, I get "width:600px;" in the Style box on the advanced tab. If I set border width of, say, 3px, I get nothing on the Advanced tab.

But if I manually enter css in the Advanced tab Style box, it works just fine, in editor and when viewed.

The stuff I pasted into Style box on advanced tab to draw 7px 3D borders with a centred table ("margin:auto;" centres it of course, rest draws table borders) was:

border-bottom-color:rgb(80, 80, 80);border-bottom-style:solid;border-bottom-width:7px;border-left-color:rgb(180, 180, 180);border-left-style:solid;border-left-width:7px;border-right-color:rgb(100, 100, 100);border-right-style:solid;border-right-width:7px;border-top-color:rgb(200, 200, 200);border-top-style:solid;border-top-width:7px;margin:auto;

I know the Table Properties tab doesn't let you do the slight colour variations to get the 3D effect of the above, but if it wrote something to the Advanced tab Style box (including something like "margin:auto;" to centre, or something else to left or right align) then it would work.

Trouble is, I don't know how to amend wysiwyg to copy over the selections in the Table Properties tab to the Advanced tab Style box!

Any thoughts? Hoping this is easy for you or someone, as would be great to get it working! :)

Thanks
den33775

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)

The first tab in the CKEditor dialog sets the table's border="" attribute, which is only used if there is no other border styling applied to the table. The Advanced tab lets you set the style="" attribute, which of course gives you much more control than the old "border" attribute.

Now, I think the reason you might get unexpected results is that many themes - like "Seven", the default admin theme in Core - uses a "reset" stylesheet with default styling for almost all HTML elements. This makes all elements start off looking alike in all browsers by overriding their individual defaults for each browser. In Seven, this means tables will first get styling like border: 0; (means the border attribute gets ignored because there's now a CSS value). Then comes Seven's own table style in and sets border: 1px solid #bebfb9;.

If you've set the editor to use the Drupal theme's stylesheets, that will the styling from Seven and override the border="" attribute on the table and you'll just see the thin grey border. You can override that with a style="" attribute directly on the table (second tab in the dialog), as you've already noticed.

If you set the editor to use its own defaults, which are very simple and only touch what they need to, you'll most likely see the changes you made apply correctly while inside the editor.

Add to that the fact that when you are Viewing a rendered node, you're using the pixture_reloaded theme, which may have its own table styles overriding the border="" attribute. You can still override that theme style for each individual table using a style="" attribute on the table itself.

So, the settings in the first tab shouldn't be copied over to the second tab, because they control different things. The first one controls attributes used on tables way back before CSS got popular. The second tab gives you all the power of inline CSS on that specific element, overriding any attributes with equivalent meaning.

Now, the problem with your Admin theme being used inside the editor when chosing to use the Drupal theme, instead of your main theme which would cause less confusion, is something we're working on in a few other issues.

How things work togethe here is a bit confusing, which is why I didn't fully understand the problem you were having at first, but I hope I made a decent job explaining it. Otherwise, please follow up with more questions.

den33775’s picture

den33775 commented

Hi TwoD

Thanks for the quick response and the explanation. Makes sense. :)

I guess the problem is, for me, that our site allows end users to create content, including rich text boxes with wysiwyg/ckeditor4.1.1, and the end user will set border attributes using the tab and wonder why they dont work.

Ideally, would be nice to replace the legacy border controls with css border controls so our end users dont run into theme/css probs. I wonder if it would be easy for me to copy whatever code writes the table width to style, and put them in to the css code to style box, myself? Maybe even add some top, bottom, left, right, width and colour selections. Sounds like it should be simple enough if you point me at the right php file - or maybe I'm imagining it to be easier than it sounds? Although I've programmed in a lot of languages, I'm not a php expert. :) What do you think? It seems I either need to change the border controls on the dialog to css styling or hide them or custom edit the theme?

Best wishes
den33775

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

There's no PHP file for it since the dialog is all handled by CKEditor itself, thus you're in JavaScript land. ;)
You'd have to create a CKEditor plugin (just like if Drupal+Wysiwyg module wasn't involved at all) to modify the table dialog as it gets loaded and then hook into how the markup is generated based on what gets put in the dialog fields.

To make Wysiwyg module find and recognize that CKEditor plugin, you can create a small Drupal module - that would be in PHP though - which implements Wysiwyg's hook_wysiwyg_plugin() (see wysiwyg.api.php for details). That'll then let you enable the plugin from the editor profile configuration under "Buttons and Plugins".

The easiest thing to do would probably be to use your browser's Developer Tools or Firebug for Firefox to inspect a table while it's being edited inside CKEditor and check which style rules are applied to it. Then modify the theme(s) so they no longer set any values for table borders. That should make the border width set in the first dialog tab have a visible effect, unless they also set any border values using the Advanced tab.

den33775’s picture

den33775 commented

Hi TwoD. :)

So with pixture_reloaded theme, I just go to theme css directory (i.e. sites\all\themes\pixture_reloaded\css) and edit all *.css files, removing anywhere that says "table" (like table { or table td, th { or table, tr, td, thead, tbody {

??

I'm not aware of anywhere I'd use tables other than via wysiwyg/ckeditor.

Guess if this is the only mod, would be quick to do to future updates on the theme.

Thanks again
David

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

If you're not that familiar with CSS, I suggest using this opportunity to get to know it. The basics are quite simple and you should be able to figure out what to change in no time.
What you listed above are the CSS selectors for a couple of rules targeting table elements and sub-elements within tables. The selectors come before the actual style properties and values declaring what the targeted elements should look like. You don't need to remove the entire rules, just the property/value pairs related to borders inside rules targeting table related elements. Be careful to not break the syntax, CSS is picky about where commas, colons, semi-colons, brackets etc are placed.

Browser Developer Tools can often tell you when a style rule contains invalid properties or values, but it's much harder for them to tell if a selector is wrong (misspelled or targeting the wrong elements).

den33775’s picture

den33775 commented

Hi TwoD

Thanks, I'll try that. Will let you know how I get on. :)

den33775

den33775’s picture

den33775 commented

Hi TwoD

Well, that was amazing!

It was just one little tiny word: 'table', in line 1077 of sites\all\themes\pixture_reloaded\css\pixture_reloaded.css - removed 'table' from 'table, tr, td, thead, tbody and it works fine now!

For others with this problem, I amended it from:

table, tr, td, thead, tbody {
  border-spacing: 0;
  border-collapse: collapse;
  border-width: 0;
}

To:

tr, td, thead, tbody {
  border-spacing: 0;
  border-collapse: collapse;
  border-width: 0;
}

Thanks for your guidance. :)

den33775

den33775’s picture

den33775 commented
Issue summary: View changes

none