We Keep Coding

-ms-high-contrast-adjust equivalent in IE9

One of our CSS files uses -ms-high-contrast-adjust: none to make sure some background features show up even under high contrast mode. It works fine on IE10 and IE11. Now we're trying to port the same CSS to IE9, and obviously it's not supported.
What's the equivalent of the -ms-high-contrast-*** property under IE9? Is there some other way to trick the browser to not change features with the "high contrast mode" setting?

There ain't an equivalent.
Remarks
The -ms-high-contrast media feature was introduced in Windows 8.
It's for ie10.
You can test it with media-queries like:
#media screen and (-ms-high-contrast: active) {/* ... */}
#media screen and (-ms-high-contrast: black-on-white) { /* */ }
#media screen and (-ms-high-contrast: white-on-black) { /* */ }
http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx
Some developers use it to target IE10 with media queries :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* i-love-ie */
}
PS, this is kind of freaky, you want a browser to force an OS to display in a specific way, or display in a specific way over the OS.
[HOLD ON]
i JUST found this article from Steve Faulkner : http://blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites/
CSS sprites using the before: pseudo element
An alternative to implementing CSS sprites using the traditonal
background-image method is available and it resolves the issue of
images not being displayed in high contrast mode. This alternative
method makes use of the CSS before: pseudo element (note: the after:
pseudo element could also be used). Example:
Link with a home icon and text with default display colors. Link with
a home icon and text with windows high contrast colors.
CSS
span.test1:before {
margin-right: -10px;
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
span.test1 {width:17px;
height:18px;
display:inline-block;
overflow:hidden;}
HTML
<span class="test1"></span>Home
I have no time to test it. Give it a try and come back to us so i can 'correct' this answer if needed.

Detect support for background-attachment: fixed?

Is there a way to detect browser support for background-attachment: fixed?
Edit: Although this feature is widely supported on desktop browsers it is poorly supported on portable devices which I why I would like to be able to detect the feature.

When you use { background-attachment:fixed } current mobile devices will not display the background image at all! To ensure the image is displayed on all mobile devices, you need to test for support, and if not supported to set the background-attachment property to either 'initial' (i.e. default state) or 'scroll' (which is the default state).
The bad news:
It's currently impossible to directly and specifically test for support of fixed backgrounds because mobile browsers will incorrectly report that they do support it. To see this bug for yourself, load this test in a mobile browser:
http://codepen.io/mattthew/pen/PwEqJa
function supportsCSS(value) {
try {
var style = document.body.style;
if (!("backgroundAttachment" in style)) return false;
var oldValue = style.backgroundAttachment;
style.backgroundAttachment = "fixed";
var isSupported = (style.backgroundAttachment === value);
style.backgroundAttachment = oldValue;
return isSupported;
}
catch (e) {
return false;
}
}
var el = document.getElementById('result');
var txt = '<b>This device & broswer supports:</b><br>';
txt += '{ background-attachment:fixed; } : ' + supportsCSS('fixed') + '<br>';
txt += { background-attachment:foo; } : ' + supportsCSS('foo');
el.innerHTML = txt;
based on code originally written by: #chao
The limited options:
It is possible to indirectly test for support with multiple methods.
Option 1: Remove fixed background on small screens
This option uses a CSS media query to target smaller screens to overwrite the style on devices with screen widths of 1024px or smaller (devices likely to render fixed backgrounds as invisible). The advantages of this option are: it's very lightweight and only requires a little bit of CSS:
#some_element {
background-attachment: fixed;
}
#media all and (max-device-width: 1024px) {
/*
overwrite property for devices with
screen width of 1024px or smaller
*/
#some_element {
background-attachment: scroll;
}
}
Unfortunately, there are a small number of tablet brands with screen widths of 1280px and 1366px, which overlap with the smallest desktop screens (sort this list by CSS Height). The safest play is to use a scrolling background for this overlap area so that the background image is guaranteed to display. If you want to play it safe, use max-device-width: 1366px. However, the number of people using these giant tablets is much smaller than the number of people with small screen laptops.
Option 2: test for touch events and mouse events
This option uses JS to test if the browser supports the touch events API, and is therefore more likely than not to be on a touch screen device (a device more likely than not to render fixed backgrounds as invisible). This is the heavy weight option. It requires Modernizr and jQuery:
if(Modernizr.touch) {
// this browser claims to support touch, so remove fixed background
$('#some_element').css('background-attachment','scroll');
}
Unfortunately, this option also has a gray area. Some browsers give a false positive and some give a false negative. You could test for a mouse event, such as:
$('body').mousemove(function(event){
// this device (touch or not) has a mouse, so revert to fixed background
$('#some_element').css('background-attachment','fixed');
$('body').unbind('mousemove');
});
However, it's possible that a mouse has been attached to a touch-screen laptop that doesn't support fixed backgrounds, so that code adds risk.

You might look at document.body.style and make sure that
there's a property there called "backgroundAttachment", and
you can set it to "fixed", and it retains its value when you do so.
Chrome, FF, Opera, and Safari all ignore attempts to set the property to an invalid value. IE9 throws an exception when you try. So if either one happens, that value definitely isn't supported. (If the browser just blindly sets the value and retains it, then it still might not work. But at that point, you really can't the browser to tell you much anyway.)
function supportsFixedBackground() {
try {
var style = document.body.style;
if (!("backgroundAttachment" in style)) return false;
var oldValue = style.backgroundAttachment;
style.backgroundAttachment = "fixed";
var isSupported = (style.backgroundAttachment === "fixed");
style.backgroundAttachment = oldValue;
return isSupported;
}
catch (e) {
return false;
}
}
I don't bother with IE6 anymore, and don't have another browser handy that doesn't support fixed backgrounds, so i'm unable to test setting "fixed".

I think I've got the solution for all devices. It's possible to detect clip-support, so I did just that and made a change in the DOM for when clip is supported. If it isn't, it falls back on background-attachment: fixed;
See the code at https://codepen.io/AartdenBraber/pen/gGmdWK

Support for any CSS property value can be detected via following steps:
create a temporary element (e.g. DIV);
set value of its style DOM property (element.style.backgroundAttachment in your case) to value to check (fixed in your case);
compare actual style value with specified string.
Something like this in your case:
var elem = document.createElement('div');
elem.style.backgroundAttachment = 'fixed';
var isSupported = 'fixed' === elem.style.backgroundAttachment;

#supports (background-attachment: fixed) will report true because the browser engine interpreted the property and value successfully. Then, mobile webkit decides to bind your background to the same stacking context (same rendering plane) as the element it is applied to for "better performance". (All z-indexes have their own stacking layer, and on desktop browsers, fixed backgrounds get their own layer.)
One could use JS to detect browsers with this rendering pattern, by checking for iPhone iPad iPod & Android in the user agent, which may target mobile browsers that render fixed backgrounds correctly, such as mobile Firefox which is constantly evolving. However, I found a better way in pure CSS:
CSS Only Solution for Mobile Safari & Chrome:
#supports (-webkit-overflow-scrolling: touch) targets all the same versions of mobile webkit that refuse to bind backgrounds to the viewport.
So with that in mind, you can fix your background by default, then append this #supports rule to apply a sort of mobile polyfill:
Example:
body {
background-image: url('bg.png');
background-size: cover; background-attachment: fixed;
}
#supports (-webkit-overflow-scrolling: touch) {
/* Detach problematic background */
body { background: none !important; }
/* Insert empty div at bottom of page */
#lonelyDiv {
position: fixed; top: 0px; left: 0px; z-index: -1;
width: 100%; height: 100%;
/* Using same background with size=cover may be possible in some situations */
background-image: url('bg.png'); background-size: cover;
/* Other designs may require a stretchable background...
or cropped versions for mobile aspect ratios applied after #media (orientation) rules */
background-image: url('mobile-bg.png'); background-size: 100%;
}
}

http://www.w3schools.com/cssref/pr_background-attachment.asp
There are pictures of the major browser icons a little bit down the page. The images aren't greyed out for any of the icons. It says that it is supported in all browsers

fixed is supported in all desktop browsers, except IE6 and older.
It is supported by most mobile browsers, but you may see some discrepencies due to viewport handling.
Source

Rotating a div element

Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.

I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts

You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate

If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";

PNG transparency issue in IE8

I'm having problems with a transparent PNG image showing black dithered pixel artifacts around the edge of the non transparent part of the image. It only does this in Internet Explorer and it only does it from a Javascript file it is used in.
Here's what I'm talking about...
http://70.86.157.71/test/test3.htm (link now dead)
...notice the girl in the bottom right corner. She has artifacts around her in IE8 (I haven't tested it in previous versions of IE, but I'm assuming it probably does the same). It works perfectly in Firefox and Chrome. The image is loaded from a Javascript file to produce the mouseover effect.
If you load the image all by itself, it works fine.
Here's the image...
http://70.86.157.71/test/consultant2.png
How to fix this?
The image was produced in Photoshop CS3.
I've read things about removing the Gama, but that apparently was in previous versions of Photoshop and when I load it in TweakPNG, it doesn't have Gama.

FIXED!
I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.

I put this into a jQuery plugin to make it more modular (you supply the transparent gif):
$.fn.pngFix = function() {
if (!$.browser.msie || $.browser.version >= 9) { return $(this); }
return $(this).each(function() {
var img = $(this),
src = img.attr('src');
img.attr('src', '/images/general/transparent.gif')
.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
});
};
Usage:
$('.my-selector').pngFix();
Note: It works also if your images are background images. Just apply the function on the div.

I know this thread has been dead some time, but here is another answer to the old ie8 png background issue.
You can do it in CSS by using IE's proprietary filtering system like this as well:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.

I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

PNG transparency prоblеm in IE8
Dan's solution worked for me. I was trying to fade a div with a background image. Caveats: you cannot fade the div directly, instead fade a wrapper image. Also, add the following filters to apply a background image:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */
Please note that the paths in the src attributes of the filters are absolute, and not relative to the css sheet.
I also added:
background: transparent\9;
This causes IE to ignore my earlier declaration of the actual background image for the other browsers.
Thanks Dan!!!

please try below code.
background: transparent\0/;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */

Dan Tello fix worked well for me.
One additional issue I found with IE8 was that if the PNG was held in a DIV with smaller CSS width or height dimensions than the PNG then the black edge prob was re-triggered.
Correcting the width and height CSS or removing them altogether fixed.

I use a CSS fix rather than JS to workaround my round cornered layer with transparent PNG inside
Try
.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}
This may require more work on ie9 or later.

Just want to add (since I googled for this problem, and this question popped first) IE6 and other versions render PNG transparency very ugly. If you have PNG image that is alpha transparent (32bit) and want to show it over some complex background, you can never do this simply in IE. But you can display it correctly over a single colour background as long as you set that PNG images (or divs) CSS attribute background-color to be the same as the parents background-color.
So this will render black where image should be alpha transparent, and transparent where alpha byte is 0:
<div style="background-color: white;">
<div style="background-image: url(image.png);"/>
</div>
And this will render correctly (note the background-color attribute in the inner div):
<div style="background-color: white;">
<div style="background-color: white; background-image: url(image.png);"/>
</div>
Complex alternative to this which enables alpha image over a complex background is to use AlphaImageLoader to load up and render image of the certain opacity. This works until you want to change that opacity... Problem in detail and its solution (javascript) can be found HERE.

My scenario:
I had a background image that had a
24bit alpha png that was set to an
anchor link.
The anchor was being
faded in on hover using Jquery.
eg.
a.button { background-image: url(this.png; }
I found that applying the mark-up provided by Dan Tello didn't work.
However, by placing a span within the anchor element, and setting the background-image to that element I was able to achieve a good result using Dan Tello's markup.
eg.
a.button span { background-image: url(this.png; }

CSS Cross-browser opacity from Javascript

I want to turn down the opacity on an element when a user performs an action.
The current code I have is:
document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.
This works on Firefox, Safari, etc. IE8 has different ideas about opacity. I have read a couple of articles but have yet to find a definitive answer on the most portable method to do this in a cross-browser way.

There are various browsers-specific settings and notations you need to take into consideration.
See Quirksmode.org: CSS2 - Opacity
I suggest using a Framework like JQuery, Prototype, MooTools or Dojo. I know it seems ridiculous to add dozens of kilobytes of code just for some opacity at first, but it's really worth it. It just works in one way for all browsers.

EDIT- Poster is using jquery..
Easy way:
$(el).css('opacity', '0.3');
(I checked the jquery sources, and it handles opacity for cross-browser compatibility automatically, so that should work)
Or for a CSS solution:
Just give it a class, e.g. 'transparent', and add this to your CSS file:
.transparent {
filter: alpha(opacity=30); /* for IE */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* old mozilla, netscape */
opacity: 0.3; /* good browsers: FF, safari, opera */
}

The equivalent should be document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';
By the way, even if you don't use a library like YUI or JQuery, you can download them and search their sources for the word
opacity
.