For some reason, IE won't execute this script (the 'else' part). I tried almost everything, but I can't manage it working.
$(document).ready(function(){
if (navigator.appName != "Microsoft Internet Explorer") {
$(".f-top").corner("round 10px");
$(".s-top").corner("round 10px");
}
else {
$('.f-top').css('background-image', 'url(../images/block-bg.png)');
}
});
I am assuming you are using jQuery - if so...
Use:
!$.browser.msie
Instead of:
navigator.appName != "Microsoft Internet Explorer"
If you are using jQuery, why don't you use the following?
if ($.browser.msie) {
// do your thing if browser is Internet Explorer
}
else {
// do your thing if browser is not Internet Explorer
}
Not directly answering your question, but it looks like you're trying to use JQuery to hack in rounded corners into your elements.
If you must use JQuery for this, there are plenty of good plugins already available which are better than your solution. Here's one: http://www.jqueryplugins.com/plugin/61/
But frankly, the best way to do rounded corners in IE (all versions) is to forget about using JQuery, and use CSS3Pie instead.
CSS3Pie is a small IE-specific hack which goes in your stylesheet, and makes IE work with the standard border-radius CSS property (which already works in all other browsers).
So all you need to have rounded corners is the following CSS:
#myElement {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.htc);
}
Very easy, works well, and allows you to use standard CSS for all browsers.
See the examples and documentation on the CSS3Pie website for more details.
Related
I have the following code, that simply creates a div, which when hovered over, should change its background color to red:
setTimeout(function() {
document.getElementById('example-id').className = 'example-class';
}, 1);
.example-class:hover {
background: red;
}
<body>
<div id="example-id">example text</div>
</body>
This code seems to work in all of the browsers that I've tested it in, with the exception of google chrome. Specifically, I've tested it with the following operating systems and browsers:
Windows 10 Home: Version 1703
Chrome: 62.0.3202.94
Firefox: 57.0
Firefox ESR: 52.5.0
Edge: 40.15063.674.0
IE11: 11.726.15063.0
OS X El Capitan: Version 10.11.6
Safari: Version 11.0.1
However, if I remove the use of the setTimeout function, so that the class is added to the div immediately, then the code works as expected in all browsers.
So why is this happening? Is this a bug in google chrome, or an ambiguity in some spec somewhere, or is it something else?
It's definitely a bug in Chrome, props for finding it.
I've filed it here and in less than 24 hours it was marked as duplicate of another bug, which is a duplicate of another bug, in the end tracing back to this one. It appears to have to do with a constants naming conflict, or at least that's what I made of it. (I've spent a fair amount of time last evening following the bug trail, out of sheer curiosity).
It has been reported as fixed by this revision, but I don't know enough on Chromium/Chrome versioning to tell you when that will make it into stable Chrome.
Meanwhile, the fix I found is to force a repaint on the element, after the :hover rule has been declared. For example: transform:scale(1);.
Test for fix, until proper bugfix makes it into stable Chrome:
setTimeout(function() {
document.getElementById('foo').className = 'bar';
});
.bar:hover {
color: red;
}
.bar {
transform: scale(1);
}
<div id="foo">example text</div>
Using Chrome Version 90.0.4430.212 (Official Build) (x86_64), just had to add:
.my_element ul li {
transform: scale(1);
}
Now all links work on Chrome. Before only some links on the page worked with Chrome, although everything worked on Safari Version 13.1.2 (13609.3.5.1.5). Thanks! Great Solution.
When I come down on touch devices I don't want the hover behavior. Is it possible to disable all hover effects at once for a whole website?
Given that you use Modernizr to detect touch and set the class.
This is what I came up with but it gives a lot of inconsistency:
html.touch *:hover {
color: inherit !important;
background: inherit !important;
}
Is there a way to do this with pure CSS? If not, how can it be done with javascript?
Update
This is now supported very decent across all mobile browsers, here is the Can I use link:
html.touch *:hover {
all:unset!important;
}
Old answer
This is good but not supported very well:
html.touch *:hover {
all:unset!important;
}
But this has a very good support:
html.touch *:hover {
pointer-events: none !important;
}
Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.
Try the all:unset or all:initial
html.touch *:hover {
all:unset!important;
}
Support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)
Attempting a catch-all solution is probably going to be tricky. I would just convert anywhere in your css where you defined a hover:
.thing:hover {}
to include the Modernizr class:
html.no-touch .thing:hover {}
Although you should be aware that any solution that uses Modernizr will not be a 'pure CSS solution', as Modernizr is javascript.
As far as I can tell, there's no solution for getting consistent padding-left within select boxes (dropdowns) across all modern browsers.
<select class="dropdown">
<option>Planes</option>
<option>Trains</option>
<option>Automobiles</option>
</select>
The solution I've heard is to use text-indent, but that breaks entirely in Firefox, let alone is supported sporadically across other browsers. If you use a combination, you actually get completely different results across all major browsers.
.dropdown {
padding-left: 10px;
text-indent: 10px;
}
IE: only padding renders
Chrome: both render
Safari: only text-indent renders
Firefox: padding, with weird text-indent bug
Is there another way to resolve this issue? It seems like the best approach is to ditch text-indent and try and figure out a way to indent in Safari without it, since everything else can handle the padding just fine.
Relevant Fiddle: http://jsfiddle.net/s3Lrh/1/
Trust me, there is no good way to do this. Styling select boxes has always been buggy, with limited support.
Since you can use jQuery, I would suggest something like Select2 or Chosen, which both can style your select box by including a "fake" select box, while hiding the real one.
Here is the best thing that I have found to work:
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 10px;
}
At the time of writing, this works on Chrome, Safari, and Firefox.
The only way I made this work without using a select plugin is to add empty spaces before the text like this:
<option> Some Text Here</option>
This will have similar effect to padding-left
You'll have to approach this in a different way. This is what you should do:
option
{
position: relative;
padding-left: 5px; /*or whatever*/
}
This is a universal approach, and it gets the job done.
One of the projects which I am working uses CSS "attribute" selector [att]
CSS Selectors
which is not supported by ie6:
Support for CSS selectors in IE6 (look for text "Attribute Selectors")
Is there any workaround/hack which is of course valid html/css to overcome this problem?
This isn't possible without peppering your HTML with a stack of extraneous class selectors, sadly.
I'd recommend designing your site so that your entirely valid CSS works for people using modern browsers, and that it's still usable in the IE6, albeit visually not quite right. You just have to find the right balance between getting your site up to standard and bending over backwards for users who won't upgrade. It's a broken browser, treat it as such.
Since IE6 is essentially limited to:
class selectors
ID selectors
(space) descendant selectors
a:-only pseudo-selectors
your only options are:
Use more classes to identify your elements
Use JavaScript (strongly not recommended except in highly specialized cases)
I find it very helpful to take advantage of the ability to assign multiple classes to an element by separating them with a space: class="foo bar"
If you want attribute selector in IE6, you can use Dean Edward IE.js.
http://dean.edwards.name/IE7/
That will make IE 5+ behave much more like IE7
supports the following CSS selectors:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()
I didn't have IE6 (use IE7) so i can't said it worked, but give it a try
You can use Internet Explorer CSS expressions combined with the safe underscore ("_", IE6 and earlier) CSS hack:
/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */
abbr {
_border-bottom: expression(this.title ? '1px dotted' : 'none');
}
abbr[title] {
border-bottom: 1px dotted;
}
I do understand, that you did ask for "valid" CSS, but if the CSS hack above freaks you out, please read about Safe CSS Hacks.
The above could be changed to:
.ie6 abbr {
_border-bottom: expression(this.title ? '1px dotted' : 'none');
}
abbr[title] {
border-bottom: 1px dotted;
}
That is if your HTML began as:
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]> <html class="ie7"><![endif]-->
<!--[if IE 8]> <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
Dean Edwards' IE7 JavaScript library provides attribute selector support for IE 5 and 6.
Use classes, that's the only workaround, sadly.
If you're using jQuery on your site, another option is SuperSelectors - it goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.
This question already has answers here:
How to disable text selection highlighting
(45 answers)
Closed 9 years ago.
I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.
I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.
In most browsers, this can be achieved using CSS:
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
EDIT
Code apparently comes from http://www.dynamicdrive.com
All of the correct CSS variations are:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Try this:
<div onselectstart="return false">some stuff</div>
Simple, but effective... works in current versions of all major browsers.
For Firefox you can apply the CSS declaration "-moz-user-select" to "none".
Check out their documentation, user-select.
It's a "preview" of the future "user-select" as they say, so maybe Opera or WebKit-based browsers will support that. I also recall finding something for Internet Explorer, but I don't remember what :).
Anyway, unless it's a specific situation where text-selecting makes some dynamic functionality fail, you shouldn't really override what users are expecting from a webpage, and that is being able to select any text they want.
I'm finding some level of success with the CSS described here http://www.quirksmode.org/css/selection.html:
::selection {
background-color: transparent;
}
It took care of most of the issues I was having with some ThemeRoller ul elements in an AIR application (WebKit engine). Still getting a small (approx. 15 x 15) patch of nothingness that gets selected, but half the page was being selected before.
Absolutely position divs over the text area with a z-index higher and give these divs a transparent GIF background graphic.
Note after a bit more thought - You'd need to have these 'covers' be linked so clicking on them would take you to where the tab was supposed to, which means you could/should do this with the anchor element set to display:box, width and height set as well as the transparent background image.
For an example of why it might be desirable to suppress selection, see SIMILE TImeline, which uses drag-and-drop to explore the timeline, during which accidental vertical mouse movement causes the labels to be highlighted unexpectedly, which looks weird.
For Safari, -khtml-user-select: none, just like Mozilla's -moz-user-select (or, in JavaScript, target.style.KhtmlUserSelect="none";).
"If your content is really interesting, then there is little you can
ultimately do to protect it"
That's true, but most copying, in my experience, has nothing to do with "ultimately" or geeks or determined plagiarists or anything like that. It's usually casual copying by clueless people, and even a simple, easily defeated protection (easily defeated by folks like us, that is) works quite well to stop them. They don't know anything about "view source" or caches or anything else... heck, they don't even know what a web browser is or that they're using one.
Here's a Sass mixin (scss) for those interested. Compass/CSS 3 doesn't seem to have a user-select mixin.
// #usage use within a rule
// ex. img {#include user-select(none);}
// #param assumed valid user-select value
#mixin user-select($value)
{
& {
-webkit-touch-callout: $value;
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
}
Though Compass would do it in a more robust way, i.e. only add support for vendors you've chosen.
If it looks bad you can use CSS to change the appearance of selected sections.
Any JavaScript or CSS method is easily circumvented with Firebug (like Flickr's case).
You can use the ::selection pseudo-element in CSS to alter the highlight color.
If the tabs are links and the dotted rectangle in active state is of concern, you can remove that too (consider usability of course).
There are many occasions when turning off selectability enhances the user experience.
For instance allowing the user to copy a block of text on the page without copying the text of any interface elements associated with it (that would become interspersed within the text being copied).
Images can be selected too.
There are limits to using JavaScript to deselect text, as it might happen even in places where you want to select. To ensure a rich and successful career, steer clear of all requirements that need ability to influence or manage the browser beyond the ordinary... unless, of course, they are paying you extremely well.
The following works in Firefox interestingly enough if I remove the write line it doesn't work.
Anyone have any insight why the write line is needed.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>