iFrame in a drop down

HTML & CSS
1

Hi all,

I’m trying to get an iFrame to show in a dropdown when hovering over an element. Of course, it works just find in FF and Chrome, but IE8 is being a pain. The dropdown just goes away in IE, sticks like it’s supposed to in the other browsers.

.vote-list {
	width: 942px;
	margin: 0 auto;
	padding: 0;
	list-style-type:none;
}
.vote-list li {
	width: 468px;
	margin-left: 5px;
	text-align: center;
	position: relative;
	float: left;
}
.vote-list li:first-child {
	margin-left: 0px;
}
.vote-list li a {
	color: #FFFFFF;
	background-color: #CC0000;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: 5px 0px;
}
.vote-list li .vote-widget {
	width: 520px;
	height: 424px;
	position: absolute;
	left: -2000em;
	z-index: 20;
	border: 2px solid #CC0000;
	overflow:hidden;
}
.vote-list li:hover .vote-widget {
	left: -30px;
}

<ul class="vote-list">
  <li><a href="#">Vote for Site</a>
    <div class="vote-widget">
        <iframe frameborder="0" src="http://www.google.com" style="height: 447px; width: 520px;"></iframe>
	</div>
  </li>
</ul>

Is this possible to accomplish in IE? Thanks for any help!

2

Hi,

I don’t think its possible due to the way IE handles the iframe.

You could overlay the iframe with an absolutely positioned div to keep the site in view when hovered but you wouldn’t be able to interact with it.

3

Thanks for the reply Paul. I suppose there’s always javascript.