Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property.
Currently working on a website with promo panels displayed within a UL. Each LI contains a promo image and one or more anchor elements positioned over different areas of it. Both the IMG and A elements are absolutely positioned in the LI element, resulting in a structure like UL > LI > IMG A A A.
While this setup functions smoothly in Firefox and Chrome, IE seems to have trouble with it. Attempted use of z-index has been unsuccessful in resolving the issue.
Seeking assistance in understanding the problem that IE faces and finding a better CSS solution. A simplified example of the issue has been created using a div, img, and a single anchor for demonstration purposes. Feel free to copy/paste the code onto your system for testing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="Description" content="" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="" />
<style type="text/css">
#div {
z-index:1;
display: block;
background:red;
position:relative;
}
#image {
z-index:2;
position:absolute;
top:0;
left:0;
display:block;
}
#anchor {
z-index:3;
display:block;
overflow:hidden;
position: absolute;
top:0;
left:0;
text-indent:-9999px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
<a href="#" id="anchor">clicky</a>
</div>
</body>
</html>
Limited control over the UL > LI > IMG A layout is available. This setup allows for easy updating of images when new promos are introduced, as well as simple addition or removal of anchors based on the number of 'calls to action' the image requires. Inline injection is used for positioning the A elements.
Thank you!