SuicidalCow
New Member
My colleague wrote some CSS to position a small PNG of an arrow with a transparent background over an image. However, he applied it to the anchor tag's :after pseudo-element.This works on all modern browsers except IE8. He claims this was working in IE8, but neither of us can figure out why this no longer works.HTML\[code\]<html><head><title>IE8 PNG transparency test with :after</title></head><body><div id="channel-feat-lists" class="feat-lists feat-stories is-invisible mod with-border"><h4>TOP 3 STORIES</h4><ul class="tout-stack"><li id="c1" class="tout"> <div class="tout-image size-160x165"><a href="http://stackoverflow.com/questions/14512927/#" class="video-link"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg" alt="#" width="160" height="165" /></a></div> <h6><a href="http://stackoverflow.com/questions/14512927/#" class="has-number"><span class="tout-title-number">7 </span><span class="tout-title-remainder">Ideas for Kids' Forts</span></a></h6> <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div> <div class="tout-jump"><a class="jump">SEE MORE FUN VIDEOS</a></div></li><li id="c2" class="tout"> <div class="tout-image size-160x165"><a href="http://stackoverflow.com/questions/14512927/#"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg" alt="#" width="160" height="165" /></a></div> <h6><a href="http://stackoverflow.com/questions/14512927/#" class="has-number"><span class="tout-title-number">8 </span><span class="tout-title-remainder">Ideas for Kids' Forts</span></a></h6> <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div> <div class="tout-jump"><a class="jump" href="http://stackoverflow.com/questions/14512927/#">SEE MORE FUN VIDEOS</a></div></li><li id="c3" class="tout"> <div class="tout-image size-160x165"><a href="http://stackoverflow.com/questions/14512927/#"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg" alt="#" width="160" height="165" /></a></div> <h6 class="has-no-number"><a href="http://stackoverflow.com/questions/14512927/#">Example numberless title</a></h6> <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div> <div class="tout-jump"><a class="jump" href="http://stackoverflow.com/questions/14512927/#">SEE MORE FUN VIDEOS</a></div></li><li id="c4" class="tout"> <div class="tout-image size-160x165"><a href="http://stackoverflow.com/questions/14512927/#"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg" alt="#" width="160" height="165" /></a></div> <h6><a href="http://stackoverflow.com/questions/14512927/#" class="has-number"><span class="tout-title-number">8 </span><span class="tout-title-remainder">Ideas for Kids' Forts</span></a></h6> <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div> <div class="tout-jump"><a class="jump" href="http://stackoverflow.com/questions/14512927/#">SEE MORE FUN VIDEOS</a></div></li></ul></div></body></html>\[/code\]CSS\[code\].feat-lists .tout { min-height: 165px; margin-top: 14px; }.feat-lists .tout + .tout { border-top: 1px dotted #7f7f7f; padding-top: 14px; } .feat-lists .tout-image { float: left; margin-left: 7px; }.feat-lists .tout-image a { display: block; position: relative; }.feat-lists .video-link:after { background: transparent url('http://img4.realsimple.com/static/i/play-overlay.png') 0 0; content: ''; height: 24px; left: 70px; position: absolute; top: 70px; width: 19px; }.feat-lists h6 { margin-left: 181px; }.feat-lists h6 a { color: #333333; font: normal 1.8em Georgia, sans-serif; }.feat-lists h6 a.has-number:hover { text-decoration: none; }.feat-lists h6 a.has-number:hover .tout-title-remainder { text-decoration: underline; }.feat-lists .tout-title-number { color: #999999; display: block; font: normal 2.777em Georgia, sans-serif; margin-bottom: -4px; position: relative; top: -6px; } /* 2.777 x 1.8 = 5 = 50px */.feat-lists .tout-dek { color: #666666; font: normal 1.3em Georgia, sans-serif; margin: 5px 0px 5px 181px; }.feat-lists .tout-jump { margin-left: 181px; }.feat-lists h6.has-no-number { padding: 2.5em 0 0 0; }\[/code\]Here is the JSFiddle version:http://jsfiddle.net/tangst/gByMb/The first image is supposed to have that overlay.I've tried some solutions in PNG Transparency Problems in IE8, but they do not work.Has anybody encountered this before?