Image is falling out of container, CSS issue?
I'm stuck on this pretty simple problem and I know there must be a simple solution but I don't know what to do. I'm sure it is a CSS issue since everything else is functioning fine. Here is the page in question-
And the code used for the page
CSS:
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z - index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML/JS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; chars开发者_StackOverflowet=UTF-8" />
<title>
jQuery Hover Effect
</title>
<script type='text/javascript' src='jquery.js'>
</script>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({
"opacity": "0"
}, "slow");
}, function() {
jQuery(this).stop().animate({
"opacity": "1"
}, "slow");
});
});
</script>
<link rel="stylesheet" type="text/css" href="/js/mouseover.css" />
</head>
<body>
<div class="fadehover">
<img src="pre.jpg" alt="" class="a" />
<img src="post.jpg" alt="" class="b" />
</div>
</body>
</html>
I think because the two images have absolute positions the div.fadehover is failing to get a height. So adding height: 700px; to the div.fadehover class in the css seems to fix the problem. (From my point of view anyway :)
加载中,请稍侯......
精彩评论