Absolutely Positioned Element Disappears in IE
Question
I have an ASP.NET page that has an absolutely positioned span which acts as a button for hiding a div. It works fine in Firefox, Chrome, and Safari but it disappears in IE. I copied the same HTML structure and CSS to a text editor using normal HTML (not web forms) and it doesn't disappear.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Instructions</title>
<style type="text/css">
*
{
margin:0;
outline:0;
padding:0
}
body
{
font:normal 12px/1.4 Sans-Serif
}
#wrapper
{
margin:0 auto;
width:940px
}
.instructions-container
{
overflow:hidden;
position:relative
}
.instructions
{
border:3px solid #eee;
margin:10px 0 0;
padding:7px;
position:relative
}
.hide-instructions
{
background:url(../images/icon/cancel.png) no-repeat scroll 0 0 red;
cursor:pointer;
display:block;
height:16px;
position:absolute;
right:7px;
top:7px;
width:16px;
zoom:1
}
.show-instructions
{
background:#eee;
display:none;
color:#666;
float:right;
padding:10px;
text-decoration:none
}
.show-instructions:hover
{
background:#ccc
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function () {
InitializeInstructions();
});
function InitializeInstructions() {
var instructions = $('.instructions'),
hide = $('.hide-instructions'),
show = $('.show-instructions');
instructions.hide();
show.show();
hide.click(function () {
instructions.slideUp('slow');
show.slideDown('fast');
});
show.click(function () {
instructions.slideDown('slow');
show.slideUp('fast');
});
}
</script>
</head>
<body>
<div id="wrapper">
<div class="instructions-container">
<div class="instructions">
<h2>
Instructions
</h2>
<p>
Nulla vehicula volutpat nibh at semper. Praesent sem odio, dignissim eget scelerisque ut, ornare in enim.
Fusce pellentesque rhoncus egestas. Vestibulum lobortis nunc ligula, a elementum ligula. Pellentesque luctus
convallis sagittis. Nunc ut justo vitae elit luctus cursus a sed odio. Nam nec consectetur neque.
</p>
<span class="hide-instructions"></span>
</div>
<a class="show-instructions" href="#">
Show Instructions
</a>
</div>
</div>
</body>
</html>
When you click on a.show-instructions , the div.instructions appears along with span.hide-instructions . Thing is, it disappears after the div has finished sliding.
I really don't understand why span.hide-instructions disappears when it's in an aspx page; the code is the same. Help would be greatly appreciated.
Thank you!
UPDATE: The span reappears when you try to highlight text and hover over the blue thingy in IE8
2 answers
solution1
0 2012-08-13 05:52:42
Try adding a z-index property. Might be a layer problem. So your .hide-instructions shall look like this:
.hide-instructions
{
background:url(../images/icon/cancel.png) no-repeat scroll 0 0 red;
cursor:pointer;
display:block;
height:16px;
position:absolute;
right:7px;
top:7px;
width:16px;
zoom:1;
z-index: 10000; /* Added a lot, because you never know */
}
solution2
0 2014-09-10 16:32:43
Add the following style to your element that is disappearing, this is an ie-quirk.
overflow: visible!important;
That should do it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.