StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Solid Background Only Solution Found</h2> <p>It took some digging around to piece it together. My first lead was <a href="http://viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved" rel="nofollow noreferrer">this site</a>, which yielded the following change of code. <em>Actually, I just now noticed, what I have below is the same code you said <strong>didn't work</strong> in your question, but yet <strong>it does for me</em></strong>... recheck my fiddles and see if it works for you now. Note that in <a href="http://jsfiddle.net/Hmyc2/27/" rel="nofollow noreferrer">this fiddle it worked for IE7 <strong>but not IE8</strong></a> (the <code>img</code> does not rotate).</p> <pre class="lang-css prettyprint-override"><code>.test-1{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF)";/* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */ clip:rect(0px 276px 267px 0px); /* top,right,bottom,left */ } </code></pre> <p><strong>So a little more digging</strong> and a <a href="https://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8">Stack Overflow answer</a> helped make <a href="http://jsfiddle.net/Hmyc2/37/" rel="nofollow noreferrer"><strong>a fiddle work for IE8 too</strong></a>! The IE8 final fix was that the item being transformed with the <code>Matrix</code> filter needed to have a <code>z-index</code> added in order to correct the bug of it not rotating the child <code>img</code> element. </p> <p><strong>However, this "fix" is apparently still only a partial one.</strong> <a href="http://jsfiddle.net/Hmyc2/39/" rel="nofollow noreferrer">The issue on the rotated element</a> remains at present for any transparency to the background itself, because if the alpha value for the gradient is set to transparent <code>#00FFFFFF</code> then it only functions on the non-rotated element.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload