Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#10297 closed Bug (invalid)

Context menu layout is skewed

Reported by: oiha Owned by:
Priority: Normal Milestone:
Component: UI : Context Menu Version:
Keywords: IE9 Cc:

Description

I have a strange situation that only occurs for IE9 and not for Chrome, which are the two browser available to me. It also works fine for both browsers when using version 3.6.6, so it is due to some recent development.

I have verified the downloaded zip to work, but I need to upload it into a repository and use the URL replace method. My pages start like this: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type='text/javascript'>
function CKEDITOR_GETURL ( resource ) {
	var res = resource.replace( '?', '?open&' ) ;
	if ( res.indexOf( '://' ) === -1 && res.indexOf( '/' ) !== 0 ) { return this.basePath + res } else { return res }
}
</script>
<script type='text/javascript' src='/common/svg03547.nsf/ckeditor402/ckeditor.js'></script>

I am unable to trace what happens when populating the context menu, but the result for IE9 is like in the attached file. Here I have written "test", selected it and right-clicked. More complex menus, like for table, gets skewed to the right with one extra indent per line, and the grey selection background is narrower than the text.

Since I can use Chrome without a problem it must be related to some browser peculiarity and maybe som missing URL replace method somewhere. Does this seem like a fair assessment? I cannot check this without deepdiving in your code.

Attachments (3)

context menu.png​ (1.4 KB) - added by oiha 11 years ago.
Context menu example
ie9qm.png​ (32.9 KB) - added by Piotrek Koszuliński 11 years ago.
IE9.png​ (1.1 MB) - added by Jakub Ś 11 years ago.

Download all attachments as: .zip

Change History (21)

Changed 11 years ago by oiha

Attachment: context menu.png​ added

Context menu example

comment:1 Changed 11 years ago by Piotrek Koszuliński

Are you sure that your page is loaded in standards mode, not in quirks mode?

comment:2 Changed 11 years ago by oiha

Thanks - that was it. It was in quirks mode. I guess that mode is not supported anymore?

Using F12 to force standards mode makes the context menu work, but the page looks awful.

Anyway, thats my problem. :)

comment:3 Changed 11 years ago by Piotrek Koszuliński

It is supported but the result is not intended to be perfect. E.g. for me, when I remove doctype this is a result on IE9 QM:

Note that you shouldn't test QM by using developer tools - they give different result than natural (broken doctype) page.

Anyway, your result is different than mine and I don't know why. Is it a default skin? Is your page using some meta tags forcing QM/compatibility mode?

Last edited 11 years ago by Piotrek Koszuliński (previous) (diff)

Changed 11 years ago by Piotrek Koszuliński

Attachment: ie9qm.png​ added

comment:4 Changed 11 years ago by Jakub Ś

Status: new → pending
Version: 4.0.2

As @Reinmar has already mentioned it. Proper way to test quirks mode is removing doctype. Please don't use devtools for that as results may be different than removing doctype from document. Please also note that standard users will not use dev tools.

Please reply to @Reinmar questions.

comment:5 Changed 11 years ago by oiha

I have tested som more, and all my users have ticked off the setting "Display intranet sites in Compatibility View" by policy. Removing this marker makes everything work, but I am afraid that this policy is by purpose. If my result in CKEditor is by design, I guess I will have to accept the fate and probably stay with CKEditor 3.6.6.

Meta tags for your benefit: 

<meta http-equiv='Expires' content='0'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>

I expect this ticket to be closed now.

comment:6 Changed 11 years ago by Jakub Ś

"Display intranet sites in Compatibility View" by policy.Removing this marker makes everything work,

Could you perhaps test this some more?

I'm attaching screen shot of page in IE9, page is not in quirks mode (has doctype) and IE9 is in compatibility view and working in local intranet.

As you can see menu looks quite normal.

  1. Don’t revert to older version because it is possible that there is something wrong with your code. Please get the default CKEditor 4.1 from our page and test it in compatibility view to make sure that problem is not in your code.
  2. Could you please provide HTML page with CSS that is causing problems for you? I’m talking about reduced and working page that can be put in samples folder of editor and will show this issue. Please also note that I’m not talking about resolving issue for you but asking you to make sure that this isn’t your bug and if it isn’t, provide reduced test case file that shows this problem in default editor. That way we will be able to fix it.

Changed 11 years ago by Jakub Ś

Attachment: IE9.png​ added

comment:7 Changed 11 years ago by oiha

I am happy to test further for as long as you like. I would really like to follow your upgrade plan.

Before I registered this ticket I had already uploaded v4.1 in my repository, which is Notes7. I also did an initial test of both versions after download and extract, and the problem occurs only when I get the editor files from the repository using IE9 with default policy. If I change to Chrome or change policy, everything works fine in all cases.

I will extract my page/css and implement in samples folder to see if I can reproduce it that way. I can see that this is necessary to continue this effort.

comment:8 Changed 11 years ago by Jakub Ś

Notes7

Do you mean Lotus Notes? If yes then perhaps there is some conflict between these two e.g Notes overwrite styles of editor. In such case load editor after css for notes is loaded.

IE9 with default policy

I assume that you mean company policy as IE9 doesn't display pages in compatibility mode by default.

can see that this is necessary to continue this effort

Yes it is crucial to reproduce this problem in plain CKEditor. Only then we will know that bug is in fact in editor and not your implementation.

Last edited 11 years ago by Jakub Ś (previous) (diff)

comment:9 Changed 11 years ago by oiha

This is valid input. You are correct in your assumptions. I will check this as soon as possible.

comment:10 Changed 11 years ago by Mindaugas

IE9 (and IE8) default policy is to use compatibility mode for sites in intranet zone. It is not using compatability mode by default in internet zone.

comment:11 Changed 11 years ago by oiha

I have created a simple Notes form that contains a version of CKEditor 4.1, as created by the CKBuilder, downloaded, extracted and uploaded in my repository database.

All files retain their path and content. There are no custom css or extra javascript functions except what Notes provides by default.

Also: My problem is still there for IE9 (not Chrome).

I will continue to investigate this in samples folder. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type='text/javascript'>
function CKEDITOR_GETURL ( resource ) {
	var res = resource.replace( '?', '?open&' ) ;
	if ( res.indexOf( '://' ) === -1 && res.indexOf( '/' ) !== 0 ) { return this.basePath + res } else { return res }
}
</script>
<script type='text/javascript' src='/common/svg03547.nsf/ckeditor41/ckeditor.js'></script>

<script language="JavaScript" type="text/javascript">
<!-- 
document._domino_target = "_self";
function _doClick(v, o, t, h) {
  var form = document._editortest;
  if (form.onsubmit) {
     var retVal = form.onsubmit();
     if (typeof retVal == "boolean" && retVal == false)
       return false;
  }
  var target = document._domino_target;
  if (o.href != null) {
    if (o.target != null)
       target = o.target;
  } else {
    if (t != null)
      target = t;
  }
  form.target = target;
  form.__Click.value = v;
  if (h != null)
    form.action += h;
  form.submit();
  return false;
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">

<form method="post" action="/common/svg03547.nsf/editortest!OpenForm&amp;Seq=1" name="_editortest">
<input type="hidden" name="__Click" value="0"><table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td class="textArea">
<textarea name="Body" id="Body" style="width:100%;height:400px" rows="7" cols="50"></textarea>
</td>
 </tr>
</table>
<script type="text/javascript">
<!--
CKEDITOR.replace( 'Body' ) ;
// -->
</script></form>
</body>
</html>

comment:12 Changed 11 years ago by oiha

I created a copy as editortest.html in the samples folder and made one change to the content to be able to reach the repository: 

<script type='text/javascript' src='http://stfo-ln27.statoil.no/common/svg03547.nsf/ckeditor41/ckeditor.js'></script>

This works fine. Problem is gone when running the page from the samples folder.

Next step was to do the same change in the Notes form, but my hopes were crushed. Still a problem there.

Checking with dev-tool I saw a huge difference in number of scripts opened: Only the two files refered when running from samples folder, while running from a Notes form also reported config.js, en.js, styles.js and a strange file with the same name as the main script (editortest.html): 

<!DOCTYPE html><html dir="ltr" lang="en"><head><title>Rich Text Editor,Body, Press ALT 0 for help</title><style data-cke-temp="1">html{cursor:text;*cursor:auto}
img,input,textarea{cursor:default}</style><link type="text/css" rel=stylesheet href="http://stfo-ln27.statoil.no/common/svg03547.nsf/ckeditor41/contents.css"><script id="cke_actscrpt" type="text/javascript" defer="defer" >var wasLoaded=0;function onload(){if(!wasLoaded)window.parent.CKEDITOR.tools.callFunction(158,window);wasLoaded=1;}onload();</script><script id="cke_shimscrpt">(function(){var e="abbr,article,aside,audio,bdi,canvas,data,datalist,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time,video".split(","),i=e.length;while(i--){document.createElement(e[i])}})()</script></head><body></body></html>

It seems like something created by the editor itself, but the significance is not easy to grasp. Incidentally there is a similar and much larger file for v3.6.6.

I believe there is something strange with the css-reference in building the context menu in my case and by implementing an alert I know that CKEDITOR_GETURL is not run when this happens. That is as far as I get in trying to explain the problem.

comment:13 Changed 11 years ago by Jakub Ś

  1. Files like config.js, en.js, styles.js are used by editor so there is no issue here.
  2. You have written that problem is available in your application only. Now you know were to look.
  3. You have written that "there is something strange with the css-reference in building the context menu ... I know that CKEDITOR_GETURL is not run when this happens". I'm not sure if I understand correctly but you seem to imply that your file isn't called but instead some other is that correct? Please note that IE likes to cache things. This might be the case why you haven’t observer and file loading. Proper way to clear cache it to close target page, open page like google.com then clean browsers cache (using IE top menu) and then loading your page.
  4. NOTE: Looking at your sample page I can see you are still using QM. I'm not sure why. IMHO you should try <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. If you are using CKE 4.x I recommend HTML5 doc type <!DOCTYPE html>.

If this has worked in samples and doesn’t on your page then this might be one of reasons why you get this problem. Sample pages have proper doctype used. It is possible that your styles in fact don’t work with QM. When you use them on our page it is ok but on your with QM is not . Please check this.

  1. Perhaps you could try copying sample page to your page, keep page main elements and add your code. Perhaps it will work then. I recommend also using HTML5 validator to make sure you don’t have any other errors on page.

comment:14 Changed 11 years ago by oiha

I am back from a weeks vacation, so I could not respond earlier.

Item 3: I simply put in an alert message in the code to display the resource. I could then verify that as soon as the editor is loaded and operational, the CKEDITOR_GETURL was not called anymore. I expect this means that all resource paths are replaced at this time. Since the layout of the context menu was not ok, I suspected it had something to do with a strange css reference. I now believe it has to do with a strange combination og Browser Mode and Document mode in my environment.

Item 4: I have tested several ideas, like replacing DOCTYPE and setting meta tag X-UA-Compatible to "IE=9" or "IE=EmulateIE9". Browser Mode is ok as "IE9 Compat View" while Document Mode is a pain. Entering my page it is normally set to "Quirks", but I can force it to "IE7 standards" using these methods. Sofar I have not been able to force it to "IE9 standards" even though this is shown as page default by the dev tool. The result is no context menu at all. Both "IE8 standards" and "IE9 standards" would suffice, but I am unable to force it.

Conclusion: My problem stems from the fact that I cannot force Document Mode higher than "IE7 standards", which incidentally is the setting used in my intranet. Dev tool shows that "IE9 standards" is recognized as the page default, but ignored.

I guess you can verify that this Document Mode is not supported in CKEditor 4.

comment:15 Changed 11 years ago by Jakub Ś

Resolution: → invalid
Status: pending → closed

I could then verify that as soon as the editor is loaded and operational, the CKEDITOR_GETURL was not called anymore.

This is used to resolve URL for resources. Resources get called at the start and then cached thus not called anymore.

Conclusion: My problem stems from the fact that I cannot force Document Mode higher than "IE7

I still think the below is correct
IMHO you should try <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. If you are using CKE 4.x I recommend HTML5 doc type <!DOCTYPE html>.

Try setting doctype I have given you and no other then go to ​http://validator.w3.org/ and validate your html. This is important. Once you are done browser should work in standards mode but to check this please do the following:

"IE9 standards" is recognized as the page default, but ignored.

This is the first time I hear about this. Of course I don't know everything so I may be mistaken but it is more likely that your styles aren't applied for some reason. This you can verify with dev-tool - just inspect one of elements and see if they got classes you have defined or in one of classes add something like border or big font and see if it gets applied after clearing cache. If above will work then most likely your CSS isn't working for IE and you need to change/fix it simply.

comment:16 Changed 11 years ago by oiha

Thank you all.

I appreciate your response to my problem, and will continue along the lines you suggest.

comment:17 Changed 11 years ago by oiha

In case of interest: The desired behaviour was achieved by exploiting Notes 7 system features like the $$HTMLFrontMatter field and a meta tag in the header.

$$HTMLFrontMatter was set to "<!DOCTYPE html>" to override default doctype from Notes, and this meta tag was included: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

My failure was to reach for IE8 or IE9, when the IE9 browser insisted to emulate IE7 through the user-agent in the request.

comment:18 Changed 11 years ago by Jennifer

This is similar to my ticket ​http://dev.ckeditor.com/ticket/10292

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy