Ext.util.CSS.createStyleSheet(
'.cleanForm .x-form-text.x-superboxselect { background: none; border-color: white; } ' +
'.cleanForm .mySuperSelectItem a { background: url(../sprite.png) no-repeat 0px -50px; } ' +
Ext.id( null, 'someStyleSheet')
);
This stylesheet works in FireFox. The second rule works in IE. The first rule does not work in IE. It appears when IE loads the stylesheet, it ignores the third class creating a rule not applicable for my code.
Has anybody seen problems with multiple class selectors that follow a third, parent class?
What version of IE are you using? I tested IE9 on this mulitclass selector test page and it doesn't look like it properly supports multiclass selectors in quirks mode. Have you set a doctype? Switching to standards mode in IE7+ looks better.
Some cursory googling found this blog post with a good discussion in the comments.
Related
I know this will be marked as a duplicate but every suggested CSS fix out there is not working for me in IE 11.
I am trying to disable an input clear 'X' in IE 11.
Among numerous others I have tried:
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
or, if anyone can tell me how to get that to work that would also be acceptable, but I would rather have it gone altogether.
(adding my comment from above as an answer since it turned out this was the cause of OP's issue)
Your CSS is fine:
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
<input type="text" />
There is no way to hide the X if the browser is running in Modern UI ("Metro") mode or if the page is rendering in Compatibility Mode.
So triple check that there's nothing in your markup that would cause the browser to use compatibility mode. If your users are using the Modern UI for some reason, there's not much you can do about that.
This works for me in IE 11 (IE 11 Document Mode)
::-ms-clear {
display:none;
}
It's slightly different than your selector which includes input. I don't see why that should make a difference, but you should try the selector as I have it (without any tag prefix).
For the next project my team is working on, we have an ASP.NET/HTML 4 project that we're (slowly) upgrading to MVC 4.0/HTML 5. It is a requirement that this setup work on IE 9, but we can't yet fully upgrade to HTML 5 for a number of reasons.
The problem I am trying to solve involves the simple task of toggling a callout, based on the jQuery :hidden selector. While it is possible to get the callout to appear, getting it to hide is causing me some trouble.
We have an MVC partial with the following markup:
<link rel='stylesheet' href='my-styles.css' />
<h4>Information</h4>
<div>
#Html.LabelFor(m => m.PersonName, "Person's Name")
#Html.InputFor(m => m.PersonName)
<a href='#' id='info-link'>[ ! ]</a>
</div>
<div id='info-callout' class='callout hidden'>
<div class='callout-before'></div><div class='callout-main'>
This is the name of the person this form refers to.
</div>
</div>
<script src='this-form.js'></script>
...and inside of this-form.js:
var MyTeamCallout = function($control, $callout) {
var pub = {};
pub.$control = $control;
pub.$callout = $callout;
pub.RegisterClickEvent = function () {
pub.$control.click(function () {
e.preventDefault();
e.stopPropagation();
// Repositioning of the control removed for purposes of this post.
if(pub.$callout.is(':hidden')) {
pub.$callout.show();
}
else {
pub.$callout.hide();
}
});
}
return pub;
};
// --- Functional Code... -----------------------------------
var $link = $('#info-link'),
$callout = $('#info-callout');
$(document).ready(function () {
var calloutObject = new MyTeamCallout($link, $callout);
calloutObject.RegisterClickEvent();
});
...Finally, with the given CSS:
.hidden {
display: none;
}
.callout {
position: absolute;
z-index: 2;
/* Left/Top assigned by JavaScript, normally */
}
.callout-before {
position: absolute;
top: 0.5em;
left: -1em;
/* SNIP: Borders are used to create a CSS triangle. */
}
.callout-main
{
position: absolute;
top: 0;
width: 10em;
}
When I run this in IE9, I can cause the callout to appear, but not to hide again. I am showing no JavaScript errors in F12 Developer Tools.
Questions:
A) Are there known compatibility issues with the :hidden selector in IE9 Quirks Mode?
B) If so, what would be a better vehicle to overcome these limitations?*
*: The problem in question is a little more complex than I've posted here, but our current solution uses the :hidden selector. I'm trying to preserve that if at all possible.
jQuery does not support Quirks mode. The lowest browser they support (or have ever supported) is IE6 in Standards mode.
So the fact that something has broken is not a surprise; in fact, if anything in jQuery works in Quirks mode, you should consider it lucky.
I strongly recommend trying to bring the site into standards mode as soon as possible by adding a doctype. This doesn't necessarily mean you have to go all HTML5, but you should consider at least making the minimal switch to standards mode to be a priority.
If you're worried about your layout breaking in standards mode, try adding
* {box-sizing:border-box;}
to the top of your CSS file; this will set the standards mode box model to emulate quirks mode, and will mitigate a large portion of the layout glitches that occur due to the switch.
Hope that helps.
I don't see any documentation about it, but I doubt that :hidden works in QuirksMode as a psuedo selector. You probably need to instead make a direct comparison against the visibility / display state / opacity of the element.
Is it possible to detect CSS support by using Javascript?
For example, is it possible to detect if the browser supports attribute selectors like this?
input[type='text'] { }
Modernizr is designed to detect browser features and may well be able to help in this instance.
http://www.modernizr.com/
This is a bit speculative as I haven't tested it out, but I believe it would be possible via JS to add a style element followed by an element that it has an effect on, and then test the values:
Speculative untested code, may or may not work (jQuery used for brevity):
$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
//attr selector supported
}
$('#foo, #bar').remove();
document.querySelectorAll("input[type='text']")
But that fails for older browsers, naturally.
Other than that, you could just use the style property to check if a certain CSS property has been applied or not.
input[type='text'] {
background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}
and
if (myInputElem.style.backgroundRepeat == "no-repeat") {
// selector is supported
}
This is the stranges thing, this works:
$('#box').css({"backgroundPosition": "0px 250px"});
But this does not work, it just doesn't change position:
$('#box').animate({"backgroundPosition": "0px 250px"});
Tested in FF and chrome using jQuery 1.5.2 and 1.6.1.
FF reports "Warning: Error in parsing value for 'background-position'. Declaration dropped."
My CSS is:
#box { padding-left: 30px; background: url(../img/arrow.gif) 0px 30px no-repeat; }
Any ideas as to why animate won't work?
jsfiddle at http://jsfiddle.net/wyhqu/ try changing animate to css and you will see it works
I'm pretty sure you can't do this.
The animate documentation says this:
most properties that are non-numeric cannot be animated using basic
jQuery functionality
While you are passing 2 numbers, you could pass "center" or some other non-numeric value.
There does appear to be a plugin to allow you to do it:
http://plugins.jquery.com/project/backgroundPosition-Effect
I haven't used it though so I have no idea how good it is.
Try this:
$('#box').animate({"background-position": "0px 250px"});
In the CSS case, it's relying on the browser to parse "backgroundPosition", which it does just fine. In the animate case, jQuery has to do the parsing. Maybe the developers only added the hyphenated case.
I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.
Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx
It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!
For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/
Does this not work?
a
{
border: 0;
}
a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.
a {
outline: 0 none !important;
border: none;
}