I'm running into a situation where IE8 appears to be dropping CSS selectors. I find this hard to believe, but I can't figure out what is happening.
In a .css file I have this declaration:
#srp tr.objectPath.hover td {
border-top:none;
}
However, when I inspect the file in IE8 through the built-in developer tools, the declaration is modified to this:
#srp TR.hover TD {
border-top:medium none;
}
I don't care about the change in case or the restatement of the rule, but dropping the '.objectPath' is a real problem because it targets the rule more broadly than I intend.
I note that this page is, and must stay in, Quirks mode.
Any ideas what is happening?
Thanks!
In Quirks Mode IE 8 renders the page and treats the DOM as IE 5.5 would render. That's the reason IE 8 in Quirks Mode ignores the multiple classes. It is not a bug in IE 8, if you want your page to be parsed and rendered properly, then you must have a proper DOCTYPE set to render the page in Standards Mode.
tr.objectPath.hover is not correct syntax if you are trying to use the hover pseudo-class. The correct syntax would be with a colon (ie tr.objectPath:hover). When the machine is reading your code, it reads objectPath as the tr's class name, but then when it gets to hover it gets rid of the old class name and replaces it with the hover class (whether there are actually any elements belonging to that class or not. Also, if this is the case, then I don't see what you are trying to do by referring to the child of an instance of :hover.
It you are in fact using hover as a class name (which I wouldn't recommend as it could be confusing to people reading your code) and you want the CSS to apply to the td children of a tr that is of both the objectPath and hover classes, you might consider just creating a new class for elements that are of both classes and using that instead (ie. #srp tr.newClass td).
EDIT: Looking further into the matter, it appears that this is (yet) a(nother) known bug in IE. I have tested it out in IETester and it seems to exist in all versions of IE. The only solution I could see on your end is very very messy:
First, it would require using JavaScript in your CSS since you don't have access to anything else. This is possible but very prone to bugs.
Second, it would require creating a getElementsByClass function in that JavaScript that could take multiple class names as parameters. This would be a very sizable chunk of code.
Finally, you would probably want to look into specifying this code to be used only by IE so that users of other browsers don't have to deal with any potential problems from all this stuff.
To clarify, I would NOT recommend doing this. Instead, I would suggest contacting someone who does have access to the HTML source code (assuming you are actually working in partnership with them) so that they could apply the much simpler fix of adding an objectPathhover class to the tr elements that belong to both classes or even to their td children.
It looks like you've got some incorrect syntax in your declaration, but its hard to tell exactly what you're doing. Are you trying to match to a hover state or is there a class actually called 'hover' ?
If going for the state, try:
#srp tr.objectPath:hover td {
...
}
If there is another class, you may need 2 separate declarations:
#srp tr.objectPath td {
...
}
#srp tr.hover td {
...
}
Related
I have a form that normally works with respect to dirtyforms. However, there is one circumstance where a jquery-ui datapicker calendar will pop up the "are your sure" dialog when a date is clicked.
I emphasize that this normally works correctly. The situation is related to the initial conditions of the form data source. Things work when the object being referenced is existing, but not if it is new. So I am sure somewhere there is a difference in the initial conditions of the form. But in theory the form should be identical.
How can I find what is causing the popup so I can fix my issue?
Well, I did find what was causing my problem by comparing the HTML of the working and non-working situations. (Not an easy task since there were many non-relevant differences.)
Seems that the original coder did a strange thing. Left out some Javascript function declarations when the page was "new" but of course did not eliminate the calls on those functions.
So I guess that the javascript errors were the root cause. At least when I include those function declarations everything works correctly.
By default, most anchor links on the page will trigger the dialog. We don't have a hard-coded selector of all potential 3rd party widgets, you must manually take inventory of whether these widgets use hyperlinks and ignore them if they are causing errant behavior.
See ignoring things for more information.
I was unable to reproduce this behavior using Dirty Forms 2.0.0, jQuery UI 1.11.3, and jQuery 1.11.3. However, in previous versions of Dirty Forms, you can probably use the following code to ignore the hyperlink clicks from the DatePicker.
$('.ui-datepicker a').addClass($.DirtyForms.ignoreClass);
I'm using Uploadcare for uploading and storing images, which is working.
However, it appears CKEditor 4.1.1 is choking on these images.
Adding an image via CKEditor.
The initial placement of the image is as expected. However, when the data is saved, CKEditor is clearly doing something weird, prior to committing the data.
In several tests, during the formatting and rearrangement of the HTML, CKEditor is stripping out the "style" image attribute and the first opening double quote, which I can see in the text data on the database itself.
This behavior is entirely reproducible.
Editing an image via CKEditor.
Initially, the image looks fine. But when I view the source, the HTML for the image is sanitized to render as text, and not to render as an image object.
Disabling 3rd party Plugins.
As mentioned previously, I'm using Uploadcare, in addition to Word Count & Char Count. I disabled both Plugins, but this didn't change anything.
Thoughts.
During the saving process, I merely cleanse the data via the $this->db->escape() function in CodeIgniter, which cannot to circumvented, or the data won't commit and I receive an error.
Just to be clear, during testing, the errors occured with any type of image object; either added manually, or via Uploadcare.
In my view page, I have:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: true
});
</script>
Which — according to the documentation — "will disable the filter (data will not be filtered, all features will be activated)."
However, it doesn't work and it's doing exactly the same as before; stripping out the style attribute by name and converting the HTML to their regular textual equivalents.
If I chose to define something specifically, that turns almost everything off, including the plugins, and — strangely enough — the very thing I've written a rule for:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: {
'img': {
styles: 'height, width'
}
}
});
</script>
So I have no idea what's going on.
I've also tried the advice in a thread on their forums where someone is experiencing exactly the same problem as me, but neither methods work, which leads me to believe this is a problem particular to the CKEditor itself, and not the treatment of data in and of itself.
If anyone has any advice as to how I can coax CKEditor into handing images, I'd be happy for any advice.
Setting allowedContent: true for 99.9% would stop CKEditor from stripping images if you did that correctly.
Your allowedContent setting (2nd code sample) is incorrect. It does not allow src and alt attributes. Image without src will be stripped by CKEditor as invalid. So you should have at least:
allowedContent: {
img: {
attributes: '!src, alt', // src is required
styles: 'height, width'
}
}
So point 1. or 2. should work - I did that a lot of times, so I'm pretty sure of that. Thus, I think that you have a 2nd issue with your server breaking something.
The problem here (on top of needing allowedContent: true or properly set up rules) is CodeIgniter's XSS filtering. Before we get access to $_POST (or $_GET/$_REQUEST) CI has already ran filtering over this data and in this case ruined it. This setting can't be overridden on a per-controller basis as it's already run before the controller is loaded.
So you can either disable it altogether in /application/config/config.php (not recommended)
$config['global_xss_filtering'] = FALSE;
Or a less heavy handed approach (but still not ideal) manually disabling it on certain pages (i.e. my example turning it off on all pages under /admin/help). Also in /application/config/config.php.
$config['global_xss_filtering'] = TRUE;
# Override the XSS filtering on /admin/help
if (preg_match("/^\/admin\/help/", $_SERVER["QUERY_STRING"])) {
$config['global_xss_filtering'] = FALSE;
}
I had the exact issues you were having, and this has solved the issue for me.
CKeditor apparently automatically creates matching end tags when you enter a start tag. Is there a way to turn this behavior off?
I have a situation where I am creating two blocks of text in an admin program using CKeditor, then I'm using these to paint a page with the first block, some static content, and then the second block. Now I've got a case where I want to wrap the static content in a table. I was thinking, No problem, I'll just put the <table> tag in the first block and the </table> tag in the second block, and the static content will be inside the table. But no, CKeditor insists on closing the table tag in the first block.
In general, I can go to source mode and enter HTML directly, but CKeditor then decides to reformat my tagging. This seems to rather defeat the purpose of having a source mode. (I hate it when I tell the computer what I want and it tells me, No, you're wrong, I know better than you what you want!)
CKEditor produces valid HTML. Valid HTML has to include both - start and end tags. There's no way to change this behaviour without hacking editor. Note that even if you'll force editor to produce content without one of these tags it will then try to fix this and won't do this as you expect. E.g. load:
<p>foo</p></td></tr></table>
And you'll completely loose this table so only regexp based fix on data loading could help. In the opposite case:
<table><tr><td><p>foo</p>
You'll end up with paragraph wrapped with table, so it's better. But what if someone would remove this table from editor contents?
Therefore you should do this integration outside editor - prepend table to contents of one editor and append to contents of second one. You simply cannot force editor to work on partial HTML.
I am designing a single page website and want the fixed nav links to change colour whenever the user scrolls to the specified location. Seems pretty easy to do, I thought it was pretty easy to do, but I am having problems making it work.
I only downloaded the Scrollspy JS Plugin, as I am not using the Twitter Bootstrap CSS. I just require the Scrollspy Plugin.
Could you check this jsFiddle and provide some guidance? I have already checked out the documentation here, but I've had no luck. Any help is greatly appreciated :)
http://jsfiddle.net/xjTpk/28/
Ignoring the serious issues with your use of JSFiddle1, and the typographic errors2, the principle things wrong are
You need the .nav class on the <ul> in the navbar, and
The #welcome is not an existing element, causing a JS error.
Here's a fixed demo:
JSFiddle
Oh, and you don't need both data-api and js to initialize the plugin; choose one.
1 Loading Bootstrap 2.0.2 + 2.0.4 at the same time; trying to include a <body> in the html panel
2 Using upperCamelCase on a function that doesn't need it: scrollSpy();
Key thing you are missing is you have to have a "nav" class on the ul element (or some other parent element) as that is used in the scrollspy code as part of a selector.
I couldn't get yours to work for some reason but here is a simplified example:
http://jsfiddle.net/UWzeD/5/
Your ul needs a nav class, but most important for scrollspy to work properly is that your target needs to be one level about the ul. Otherwise I've found that scrollspy doesn't work.
I'd like to know if there is a way to access inner controls of the spark control (lets say Panel) through the styleManager?
I've used the following code to access Panel's CSS properties:
styleManager.getStyleDeclaration("spark.components.Panel")
.setStyle("backgroundColor", "blue");
I'm unable to figure out how to access the inner controls like displayLabel. I know that this is possible using the CSS styling, but I'd like to change their properties at runtime.
How can this be done?
I am not sure if this is still current, but I think what you need to do is to declare the inner classes somehow in your CSS (possibly empty if you don't care). As soon as they exist there, the styleManager can access their values. You can also do something like this:
[Style(name="backgroundColor", type="uint", format="Color")]
In your MXML declaration, and then that style exists.
There are a few related examples here:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf687e7-7ff6.html
[This is related to an issue I have myself with the StyleManager and google led me here, that's the reason for the late answer]