I want to remove the z-index property in internet explorer only as because it does not work properly in internet explorer.
I designed a site with eBook flip functionality. It works well in all browsers except Internet explorer
so I want to use z-index for all other browsers except IE
like: use of -webkit-, -moz- ,
but it doesn't work with z-index
$(document).ready(function()
{
var ie_check = msieversion();
if (ie_check != true )
{
$(selector).css('z-index',11)
}
}
function msieversion()
{
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
return true;
else
return false;
return false;
}
Try This It's May help you
The z-index bug in old Internet Explorer editions are well documented.
Try giving the parent a higher z-index.
This is a work around that works most of the times.
try this:
div {
zoom: 2; /* for all browsers */
zoom: normal\9; /* for IE, set zoom to default value "normal" */
}
I would like to determine if particular elements on a page are visible when printed as controlled by CSS #media rules.
Is there a way to do this with Selenium?
I know there is the isDisplayed method, which takes the CSS into account, but there is nothing I can find to tell Selenium which media type to apply.
Is there a way to do this?
Or is there another way to test web pages to make sure the elements you want are printed (and those you don't aren't)?
Update:
For clarity, there are no plans to have a javascript print button. The users will print using the normal print functionality of the browser (Chrome, FF and IE). #media css rules will be used to control what is shown and hidden. I would like Selenium to pretend it is a printer instead of a screen, so I can test if certain elements will be visible in what would be the printed version of the page.
I've managed to write a script that does just what you want: it hides screen-only styles and sets print-only styles to be screen-only.
You need to inject the following JavaScript with Selenium:
(function pretendToBeAPrinter() {
//For looking up if something is in the media list
function hasMedia(list, media) {
if (!list) return false;
var i = list.length;
while (i--) {
if (list[i] === media) {
return true;
}
}
return false;
}
//Loop though all stylesheets
for (var styleSheetNo = 0; styleSheetNo < document.styleSheets.length; styleSheetNo++) {
//Current stylesheet
var styleSheet = document.styleSheets[styleSheetNo];
//Output debug information
console.info("Stylesheet #" + styleSheetNo + ":");
console.log(styleSheet);
//First, check if any media queries have been defined on the <style> / <link> tag
//Disable screen-only sheets
if (hasMedia(styleSheet.media, "screen") && !hasMedia(styleSheet.media, "print")) {
styleSheet.disabled = true;
}
//Display "print" stylesheets
if (!hasMedia(styleSheet.media, "screen") && hasMedia(styleSheet.media, "print")) {
//Add "screen" media to show on screen
styleSheet.media.appendMedium("screen");
}
// Get the CSS rules in a cross-browser compatible way
var rules;
try {
rules = styleSheet.cssRules;
} catch (error) {
console.log(error);
}
try {
rules = styleSheet.rules;
} catch (error) {
console.log(error);
}
// Handle cases where styleSheet.rules is null
if (!rules) {
continue;
}
//Second, loop through all the rules in a stylesheet
for (var ruleNo = 0; ruleNo < rules.length; ruleNo++) {
//Current rule
var rule = rules[ruleNo];
//Hide screen-only rules
if (hasMedia(rule.media, "screen") && !hasMedia(rule.media, "print")) {
//Rule.disabled doesn't work here, so we remove the "screen" rule and add the "print" rule so it isn't shown
console.info('Rule.media:');
console.log(rule.media)
rule.media.appendMedium(':not(screen)');
rule.media.deleteMedium('screen');
console.info('Rule.media after tampering:');
console.log(rule.media)
}
//Display "print" rules
if (!hasMedia(rule.media, "screen") && hasMedia(rule.media, "print")) {
//Add "screen" media to show on screen
rule.media.appendMedium("screen");
}
}
}
})()
You can see it in action at JSFiddle.
Bookmarklet
You can also install it as a bookmarklet.
More information:
About mediaList
About document.styleSheets
Note: I've only tested this in Google Chrome and Mozilla Firefox. It may or may not work in other browsers.
There is some cases that it can be useful to use visual automation tools such as applitools.
We implements it in some of our tests, and it's great so far.
//jquery
function printDetail() {
window.print();
}
//html
<button type="button" class="btn" value="Print Div" onclick="printDetail()"><i class="icon-print"></i> Print</button>
//css
#media print{
.header{display:none;}
.footer{display:none;}
.leftside{display:none;}
.rightside{display:block;}
}
// http://jsfiddle.net/kisspa/52H7g/
I think I have a little clever way to accomplish this:
Can I assume that the PRINT button is going to be on the html page as is the case in the jsfiddle.net link above?
Basically, can I EXCLUDE the FILE->PRINT or RIGHT CLICK->PRINT options and only assume that the only way someone can print your page is by clicking on a print button embedded in your html page as shown in the jsfiddle link above if not what are other test cases?
Finally, can I assume that your selenium tests will ONLY run in the Chrome browser and not firefox? This is important because the PRINT command behaves different in Chrome as it does in Firefox. My fix will only work w/ Chrome.
IE10+ no longer supports browser detection tags to identify a browser.
For detecting IE10 I am using JavaScript and a capability-testing technique to detect certain ms prefixed styles are defined such as msTouchAction and msWrapFlow.
I want to do the same for IE11, but I am assuming that all the IE10 styles will be supported in IE11 as well. Can anyone help me identify IE11 only styles or capabilities that I could use to tell the two apart?
Extra Info
I don't want to use User Agent type detection because it's so spotty, and can be changed, as well as I think I've read that IE11 is intentionally trying to hide the fact it's Internet Explorer.
For an example of how the IE10 capability testing works, I used this JsFiddle (not mine) as a basis for my testing.
Also I am expecting a lot of answers of "This is a bad idea...". One of my needs for this is that IE10 claims it supports something, but it is very badly implemented, and I want to be able to differentiate between IE10 and IE11+ so I can move on with a capability-based detection method in the future.
This test is coupled with a Modernizr test that will simply make some functionality "fallback" to less glamorous behavior. We are not talking about critical functionality.
I am already using Modernizr, but it doesn't help here.
In the light of the evolving thread, I have updated the below:
IE 6
* html .ie6 {property:value;}
or
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}
IE 6 and 7
#media screen\9 {
.ie67 {property:value;}
}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}
IE 6, 7 and 8
#media \0screen\,screen\9 {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
or
#media \0screen {
.ie8 {property:value;}
}
IE 8 Standards Mode Only
.ie8 { property /*\**/: value\9 }
IE 8,9 and 10
#media screen\0 {
.ie8910 {property:value;}
}
IE 9 only
#media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 and above
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 and 10
#media screen and (min-width:0) {
.ie910{property:value;}
}
IE 10 only
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10 and above
_:-ms-lang(x), .ie10up { property:value; }
or
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
The use of -ms-high-contrast means that MS Edge will not be targeted, as Edge does not support -ms-high-contrast.
IE 11
_:-ms-fullscreen, :root .ie11up { property:value; }
Javascript alternatives
Modernizr
Modernizr runs quickly on page load to detect features; it then
creates a JavaScript object with the results, and adds classes to the
html element
User agent selection
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to html element:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Footnote
If possible, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.
Attribution / Essential Reading
Jeff Clayton | Browserhacks.com
Keith Clarke
Paul Irish
Web Devout
The Spanner
To target IE10 and IE11 only (and not Edge):
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* add your IE10-IE11 css here */
}
So I found my own solution to this problem in the end.
After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal
In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.
Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
/**
Target IE 10 with JavaScript and CSS property detection.
# 2013 by Tim Pietrusky
# timpietrusky.com
**/
// IE 10 only CSS properties
var ie10Styles = [
'msTouchAction',
'msWrapFlow',
'msWrapMargin',
'msWrapThrough',
'msOverflowStyle',
'msScrollChaining',
'msScrollLimit',
'msScrollLimitXMin',
'msScrollLimitYMin',
'msScrollLimitXMax',
'msScrollLimitYMax',
'msScrollRails',
'msScrollSnapPointsX',
'msScrollSnapPointsY',
'msScrollSnapType',
'msScrollSnapX',
'msScrollSnapY',
'msScrollTranslation',
'msFlexbox',
'msFlex',
'msFlexOrder'];
var ie11Styles = [
'msTextCombineHorizontal'];
/*
* Test all IE only CSS properties
*/
var d = document;
var b = d.body;
var s = b.style;
var ieVersion = null;
var property;
// Test IE10 properties
for (var i = 0; i < ie10Styles.length; i++) {
property = ie10Styles[i];
if (s[property] != undefined) {
ieVersion = "ie10";
createEl("IE10 style found: " + property);
}
}
// Test IE11 properties
for (var i = 0; i < ie11Styles.length; i++) {
property = ie11Styles[i];
if (s[property] != undefined) {
ieVersion = "ie11";
createEl("IE11 style found: " + property);
}
}
if (ieVersion) {
b.className = ieVersion;
$('#versionId').html('Version: ' + ieVersion);
} else {
createEl('Not IE10 or 11.');
}
/*
* Just a little helper to create a DOM element
*/
function createEl(content) {
el = d.createElement('div');
el.innerHTML = content;
b.appendChild(el);
}
/*
* List of IE CSS stuff:
* http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
*/
body {
font: 1.25em sans-serif;
}
div {
background: red;
color:#fff;
padding: 1em;
}
.ie10 div {
background: green;
margin-bottom:.5em;
}
.ie11 div {
background: purple;
margin-bottom:.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Detect IE10 and IE11 by CSS Capability Testing</h1>
<h2 id="versionId"></h2>
I will update the code example with more styles when I discover them.
NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.
I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.
This seems to work:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/
Here's an answer for 2017 on, where you probably only care about distinguishing <=IE11 from >IE11 ("Edge"):
#supports not (old: ie) { /* code for not old IE here */ }
More demonstrative example:
body:before { content: 'old ie'; }
/**/#supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}
This works because IE11 doesn't actually even support #supports, and all other relevant browser/version combinations do.
You can write your IE11 code as normal and then use #supports and check for a property that isn't supported in IE11, for example grid-area: auto.
You can then write your modern browser styles within this. IE doesn't support the #supports rule and will use the original styles, whereas these will be overridden in modern browsers that support #supports.
.my-class {
// IE the background will be red
background: red;
// Modern browsers the background will be blue
#supports (grid-area: auto) {
background: blue;
}
}
This worked for me
if(navigator.userAgent.match(/Trident.*rv:11\./)) {
$('body').addClass('ie11');
}
And then in the css file things prefixed with
body.ie11 #some-other-div
When is this browser ready to die?
Try this:
/*------Specific style for IE11---------*/
_:-ms-fullscreen, :root
.legend
{
line-height: 1.5em;
position: relative;
top: -1.1em;
}
Take a look at this article: CSS: User Agent Selectors
Basically, when you use this script:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
You can now use CSS to target any browser / version.
So for IE11 we could do this:
FIDDLE
html[data-useragent*='rv:11.0']
{
color: green;
}
Use the following properties:
!!window.MSInputMethodContext
!!document.msFullscreenEnabled
You should use Modernizr, it will add a class to the body tag.
also:
function getIeVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
else if (navigator.appName == 'Netscape')
{
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
Note that IE11 is still is in preview, and the user agent may change before release.
The User-agent string for IE 11 is currently this one :
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
Which means your can simply test, for versions 11.xx,
var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)
Perhaps Layout Engine v0.7.0 is a good solution for your situation. It uses browser feature detection and can detect not only IE11 and IE10, but also IE9, IE8, and IE7. It also detects other popular browsers, including some mobile browsers. It adds a class to the html tag, is easy to use, and it's performed well under some fairly deep testing.
http://mattstow.com/layout-engine.html
If you're using Modernizr - then you can easily differntiate between IE10 and IE11.
IE10 doesn't support the pointer-events property. IE11 does. (caniuse)
Now, based on the class which Modernizr inserts you could have the following CSS:
.class
{
/* for IE11 */
}
.no-pointerevents .class
{
/* for IE10 */
}
You can use js and add a class in html to maintain the standard of conditional comments:
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Or use a lib like bowser:
https://github.com/ded/bowser
Or modernizr for feature detection:
http://modernizr.com/
Detecting IE and its versions actually is extremely easy, at least extremely intuitive:
var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;
if (uA.indexOf('MSIE 6') >= 0) {
browser = 'IE';
ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
browser = 'IE';
ieVersion = 7;
}
if (document.documentMode) { // as of IE8
browser = 'IE';
ieVersion = document.documentMode;
}
.
This way, ou're also catching high IE versions in Compatibility Mode/View. Next, its a matter of assigning conditional classes:
var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
htmlTag.className += ' ie11-';
You can try this:
if(document.documentMode) {
document.documentElement.className+=' ie'+document.documentMode;
}
I ran into the same problem with a Gravity Form (WordPress) in IE11. The form's column style "display: inline-grid" broke the layout; applying the answers above resolved the discrepancy!
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}
Step back: why are you even trying to detect "internet explorer" rather than "my website needs to do X, does this browser support that feature? If so, good browser. If not, then I should warn the user".
You should hit up http://modernizr.com/ instead of continuing what you're doing.
CSS cursor property is not working in chrome and ff ? I am using the following code :
cursor: url(customMouse.cur), auto;
Please, Let me know what is the issue ?
Try these,
CSS
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
Detail http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/
JQUERY (If you want)
// custom cursor
$(".portfolio-images img").css('cursor', function() {
if (jQuery.browser.mozilla) {
return 'url(image/cursor.cur), -moz-zoom-in';
}
else if (jQuery.browser.webkit) {
return 'url(image/cursor.cur), -webkit-zoom-in';
}
else {
return 'pointer';
}
});
DEMO http://yeyenedesignstudio.com/logo_design
Hi I've cross browser fixed a site on all thinkable PC browsers, including Safari.
Now my smart ass designer sent me a screen shot of the whole layout collapsing on mac.
I have an idea how to solve it (reduce the margin on an element by a few pix), but i don't know how to target Safari only, preferably Safari mac only.
What's the best way to do this?
Here's a script you can include on your page (or in a separate js file) that will add a class to the html element so that you can add safari-mac specific css to your css file.
(function($){
// console.log(navigator.userAgent);
/* Adjustments for Safari on Mac */
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
// console.log('Safari on Mac detected, applying class...');
$('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
}
})(jQuery);
Example css fixes, which can be in page or in your external css file etc:
/* Safari Mac specific alterations
* (relies on class added by js browser detection above),
* to take into account different font metrics */
.safari-mac #page4 .section p.fussyDesigner { margin-right: -15px; }
.safari-mac #page8 .section-footer { width: 694px; }
Thanks to other answers for ideas, I've tried to wrap everything up into a complete solution in this answer.
The user agent string contains operating system information, and you are probably already checking the user agent string for the browser type.
A mac browser will have the string "Mac OS X 10." in the user agent string.
I think the selected right answer is outdated and does not work now.
Here is the output of navigator.vendor
Safari on iPad
Mozilla/5.0 (iPad; CPU OS 8_3 like Mac OS X) AppleWebKit/600.1.4
(KHTML, like Gecko) Version/8.0 Mobile/12F69 Safari/600.1.4
Safari on Mac
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5
(KHTML, like Gecko) Version/8.0.2 Safari/600.2.5 Safari/600.1.4
As you can see Mac appears in navigator.vendor of both scenarios.
Here is my version
var isSafariMac = /Safari/.test(navigator.userAgent) &&
!/Mobile/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
So you can use this to target Safari on Mac:)
Building off of #Tim Abell's solution, you can use a similar approach to get classes for all of the major platforms and browsers for broader detection and flexibility.
This snippet will add a class for the browser name and another for the platform name to the <html> element. So, for example, Safari on Mac would end up being <html class="safari mac">.
Javascript/jQuery
//Search for keywords within the user agent string. When a match is found, add a corresponding class to the html element and return. (Inspired by http://stackoverflow.com/a/10137912/114558)
function addUserAgentClass(keywords) {
for(var i = 0; i < keywords.length; i++) {
if(navigator.userAgent.indexOf(keywords[i]) != -1) {
$("html").addClass(keywords[i].toLowerCase());
return; //Once we find and process a matching keyword, return to prevent less "specific" classes from being added
}
}
}
addUserAgentClass(["Chrome", "Firefox", "MSIE", "Safari", "Opera", "Mozilla"]); //Browsers listed generally from most-specific to least-specific
addUserAgentClass(["Android", "iPhone", "iPad", "Linux", "Mac", "Windows"]); //Platforms, also in order of specificity
With this approach, you can do things like:
CSS
.safari { /* Safari only */ }
.mac { /* Mac only */ }
.safari.mac { /* Safari Mac */ }
html:not(.safari) { /* All browsers except for Safari */ }
html:not(.safari.mac) { /* All browsers except for Safari Mac */ }
Glad I found this page, I feel your pain anytime you use padding with font based navigation or tabs you run into these Mac/PC issues because they render fonts differently.
if (navigator.userAgent.indexOf('Mac') >= 0) {
$(element).addClass('mac_os')
}
// targets macs only`
You probably need to run a regex query against the User-Agent and selectively load a CSS file just for Safari for Mac.
Also: Are you sure that Safari for mac and safari for windows render the same page drastically different?
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Add your Safari-specific styles here. */
}
An example of providing dynamic styles for various browsers:
<?php
$str = $_SERVER['HTTP_USER_AGENT'];
$pos1 = strpos($str, "Safari");
$pos2 = strpos($str, "Chrome");
$pos3 = strpos($str, "MSIE");
$pos4 = strpos($str, "Firefox");
if($pos1 != '' && $pos2 == '') // Safari
$style = "width:200px; height:100px;";
else if($pos2 != '') // Chrome
$style = "width:180px; height:90px;";
else if($pos3 != '') // IE
$style = "width:180px; height:90px;";
else if($pos4 != '') // Firefox
$style = "width:180px; height:90px;";
?>
<div style="<?php echo $style; ?>">Hello world</div>
for this question i have solution with the help of CSS, please find the below code fixes..
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none) {
.classname{
padding: 1px 0px; // css styles
}
}
}
Please try this in .scss file.
Use this in css. it will be rendered only in Safari
/*\*/
.some-class {
/* Here comes some options */
}
/**/