iFrame met java werkt niet in IE, wel in FF

Hobbit · 12 mrt 2009

Hallo,

Ik zit nu al een tijdje te stuntelen met een dropdown menu met een landen selectie.
In FireFox werkt m'n menu fantastisch en ziet er mooi gestyled uit.

Wanneer ik m'n menu in IE bekijk, komt wel m'n iframe in zicht, maar zonder inhoud.
Ik weet nu niet of het probleem bij de script ligt of bij de CSS.

Wie-O-wie kan mij helpen hiermee??

Ik heb de volgende codes.

De pagina:

HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body{margin:0px;font-family:verdana;font-size:11px;background-color:#ffffff}

a{
	position:relative;
	z-index:24;
	width: 30;
}
a:hover{
	z-index: 25; 
	background-color: #ffffff}
a span{
	display: none
}
a:hover span{
	display: block;
	position:absolute;
    top: 18px;
    left: 0px;
    width: 200px;
    border: 1px solid #cccccc;
}

input{
	width:203px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
	background-color: #FFFFFF;
	height: 22px;
	border: 1px solid #999999;
	vertical-align: middle;
	text-decoration: none;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
}
td {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
}
</style>

</head>
<body>
	<p align="center">&nbsp;</p>
	<div align="center">
	  <table>
        <tr>
          <td>            
		  <form id="countrysel" method="get" name="countrysel">
          Select country: <a href="javascript:void(0)">
          <input name="country" type="text" size="30" value="Select Country" readonly>
          <span>
          <iframe src="index.html" frameborder="0" scrolling="auto" height="150" width="200" style="overflow-x: hidden;"></iframe></span></a>
          </form>
		  </td>
        </tr>
      </table>
</div>
	<p align="center">&nbsp;</p>
</body>
</html>

Content voor het iframe:

HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">


body{margin:0px;background-color: #ffffff}

ul{border-bottom:margin:0px;padding:0px;margin-left: 2px;padding-left: 0;list-style-type: none;font-family: verdana;font-size:9px;text-transform: capitalize;}
img{ vertical-align: middle}
a{border-bottom:1px solid #CCCCCC; display: block;width: 200px;background-color: #ffffff;padding:4px;}
a:link, a:visited{color: #666666;text-decoration: none;}
a:hover{background-color: #D5EAFF;color: #999999;font-weight:bold;}
</style>
</head>
<body>

<ul>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Nederland'"><img src="flags/nl.gif" alt="" width="16" height="11" border="0" />  Nederland</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Deutschland'"><img src="flags/de.gif" alt="" width="16" height="11" border="0" />  Deutschland</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Spain'"><img src="flags/es.gif" alt="" width="16" height="11" border="0" />  Spain</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Belgium'"><img src="flags/be.gif" alt="" width="16" height="11" border="0" />  Belgium</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Nederland'"><img src="flags/nl.gif" alt="" width="16" height="11" border="0" />  Nederland</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Deutschland'"><img src="flags/de.gif" alt="" width="16" height="11" border="0" />  Deutschland</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Spain'"><img src="flags/es.gif" alt="" width="16" height="11" border="0" />  Spain</a>
<li><a href = "http://www.sokkia.net" target="_blank" onclick = "parent.document.countrysel.country.value = 'Belgium'"><img src="flags/be.gif" alt="" width="16" height="11" border="0" />  Belgium</a>



</ul>
</body>
</html>

Alvast erg bedankt.

Glest · 13 mrt 2009

Waarom gebruik je hier een iframe voor? Je kunt denk ik beter een div gebruiken. iframes doen soms erg vreemd, maar div's zijn betrouwbaarder.

Verder had je een iframe een span staan. Een iframe is een block element en een span is inline. span vervangen door een div dus. Verder is een a element niet nodig om een hover effect te krijgen. Alleen in IE zonder een DTD is dat nodig, maar een DTD erbij en elk element kan een hover effect krijgen. Ook vervangen door een div dus

Dit werkt in FF, IE8 en Chrome (ik heb het een beetje uitgekleed):

Code:

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body
{
	font-family:arial;
	background-color:#ffffff;
}

.dropdown
{
  z-index:100;
	position: relative;
	display: block;
}

.dropdown:hover
{
}

div.dropdown .frame
{
	display:none;
	width: 200px;
	max-height: 150px;
	border: 1px solid black;
	overflow: scroll;
	overflow-x: hidden;
}

div.dropdown:hover .frame
{
	display: block;
}


</style>

</head>
<body>
<br />
  
<form id="countrysel" method="get" name="countrysel">
	Select country:
	<div href="" class="dropdown">
		<input name="country" type="text" size="30" value="Select Country" />
		<div class="frame">
			<ul>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Nederland'"><img src="flags/nl.gif" alt="" width="16" height="11" border="0" />  Nederland</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Deutschland'"><img src="flags/de.gif" alt="" width="16" height="11" border="0" />  Deutschland</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Spain'"><img src="flags/es.gif" alt="" width="16" height="11" border="0" />  Spain</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Belgium'"><img src="flags/be.gif" alt="" width="16" height="11" border="0" />  Belgium</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Nederland'"><img src="flags/nl.gif" alt="" width="16" height="11" border="0" />  Nederland</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Deutschland'"><img src="flags/de.gif" alt="" width="16" height="11" border="0" />  Deutschland</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Spain'"><img src="flags/es.gif" alt="" width="16" height="11" border="0" />  Spain</a>
				<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Belgium'"><img src="flags/be.gif" alt="" width="16" height="11" border="0" />  Belgium</a>				
			</ul>
		</div>
	</div>
</form>

</body>
</html>

Hobbit · 20 mrt 2009

Hey Glest,

Fantastisch!!!!
Hoe simpel kan het zijn;-)))

Nog een klein vraagje. In FF is het invulvakje geel. Is dit te veranderen??
Zo'n geel vakje kan een design best naar z'n kl*te helpen

Alvast super bedankt voor de oplossing!!!:thumb:

Hobbit · 20 mrt 2009

hmm, ik was iets te enthousiast

Op zich werkt het goed. Alleen wanneer ik het in m'n website plaats gaat het niet goed.
Onder m'n country selector staat een flash file. Als de selector uitklapt dan drukt het m'n flash file en de rest van de website naar beneden. Is het mogelijk om de selector over de flash file te laten vallen?

Alvast bedankt.

Glest · 20 mrt 2009

Oepsie, ik zie het al. Het moet uit de normale structuur van het document, dus absoluut gepositioneerd. Om het toch op de goede plek te houden zal er nog een div omheen moeten, relatief gepositioneerd. Dus zo:

HTML:

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body
{
	font-family:arial;
	background-color:#ffffff;
}

.dropdown
{
  z-index:100;
	position: relative;
	display: block;
}

.dropdown:hover
{
}

div.dropdown .container
{
	position: relative;
}

div.dropdown .frame
{
	position:absolute;
	top:0px;
	background-color: #FFFFFF;
	display:none;
	width: 200px;
	max-height: 150px;
	border: 1px solid black;
	overflow: scroll;
	overflow-x: hidden;
	z-index: 200;
}

div.dropdown:hover .frame
{
	display: block;
}



</style>

</head>
<body>
<br />
  
<form id="countrysel" method="get" name="countrysel">
	Select country:
	<div href="" class="dropdown">
		<input name="country" type="text" size="30" value="Select Country" />
		<div class="container">
			<div class="frame">
				<ul>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Nederland'"><img src="flags/nl.gif" alt="" width="16" height="11" border="0" />  Nederland</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Deutschland'"><img src="flags/de.gif" alt="" width="16" height="11" border="0" />  Deutschland</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Spain'"><img src="flags/es.gif" alt="" width="16" height="11" border="0" />  Spain</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Belgium'"><img src="flags/be.gif" alt="" width="16" height="11" border="0" />  Belgium</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Nederland'"><img src="flags/nl.gif" alt="" width="16" height="11" border="0" />  Nederland</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Deutschland'"><img src="flags/de.gif" alt="" width="16" height="11" border="0" />  Deutschland</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Spain'"><img src="flags/es.gif" alt="" width="16" height="11" border="0" />  Spain</a>
					<li><a href = "http://www.sokkia.net" target="_blank" onclick = "document.countrysel.country.value = 'Belgium'"><img src="flags/be.gif" alt="" width="16" height="11" border="0" />  Belgium</a>				
				</ul>
			</div>
		</div>
	</div>
	Text
</form>

</body>
</html>

Hobbit · 23 mrt 2009

Hoi Glest,

Goed bezig!!!:thumb:
Ik had zelf al geknoeit met position alleen niet in een container div gezet. Dit werkt goed!!!

Alleen uhm, valt m'n pulldown achter de flash file. Ik heb al wat geprobeert met de z-index maar ik krijg het niet voor elkaar. Ik heb de div waarin de flashfile staat een lagere z-index gegeven maar hij blijft voor m'n menu staan. De positions heb ik op relative gezet.
Zie ik nog iets over het hoofd??

Alvast erg bedankt voor al je inspanning:thumb:

Groet,

Glest · 23 mrt 2009

Hmm, kun je een link naar de pagina geven? Kwam het iframe er wel voor overigens?

Hobbit · 23 mrt 2009

Hey Glest,

Ik heb nog niks online staan. Alleen in m'n test omgeving.
Maar ik heb nog even de overige CSS opgeschoont en kwam hier nog wat problemen tegen. Dit verstoorde het pulldown menuutje.

Alles werkt nu goed in IE. Hij valt netjes voor de flash file.

Echter in FF valt hij er nog achter. Is hier een aparte oplossing voor?
Anders zet ik hem alsnog even online voor je.

Thanks

Glest · 23 mrt 2009

Hmm hier iets interessants:
http://jonathanleighton.com/blog/2007/07/12/flash-z-index-bug-firefox/

In kort, het zegt dat (in Firefox) een absoluut gepositioneerd element met overflow:hidden nooit boven een flash element komt ook als de z-index hoger is.

Hier staat geen overflow:hidden maar:
overflow: scroll;
overflow-x: hidden;

Misschien dat dit hetzelfde effect geeft. Ik zou dus de overflow-x op visible zetten en width: 200px; veravanger door min-width: 200px;

Code:

div.dropdown .frame
{
    position:absolute;
    top:0px;
    background-color: #FFFFFF;
    display:none;
    min-width: 200px;
    max-height: 150px;
    border: 1px solid black;
    overflow: scroll;
    overflow-x: visible;
    z-index: 200;
}

Verder schijnt het dat je ook een wmode parameter met de waarde transparant moet toevoegen aan het object om er voor te zorgen dat er uberhaupt boven het flash object getekend kan worden:
<param name="wmode" value="transparent">

Hier is het in ieder geval iemand gelukt:
http://www.duoh.com/csstutorials/flazindex/index3.html

Hobbit · 23 mrt 2009

Hey Glest,

Je hebt vast geen idee hoe blij ik nu ben

Het is opgelost.

Het flash bestand werd aangeroepen met een javascript. Deze heb ik eruit gemieterd. Toen de .swf keihard in de code gezet, wmode parameter tegevoegd en toen werkte het.
overflow-x: visible; was niet nodig. Deze kon gewoon op hidden blijven.

Het werkt voor FF, IE, Opera, Chrome en Safari. Allen voor PC.
En werkt voor FF en Safari op de Mac. Andere heb ik nog niet kunnen testen.

Ontzettend bedankt hiervoor!!!!!!:thumb::thumb:

Cheers,

Glest · 23 mrt 2009

Mooi

Mocht je nog op andere problemen stuiten helpen we je natuurlijk graag verder

Hobbit · 25 mrt 2009

Thanks,

Voor een sneak preview. http://www.sokkia.net/eu/

Dit is de testversie. Is nog niet klaar.
Deze wordt wel binnenkort verwijdert.

Groet,

ErikBooy007 · 25 mrt 2009

Ziet er heel goed uit.

Hobbit · 25 mrt 2009

Thanks Eric!!!
Ben zelf niet zo'n webfreak, zoals je ziet ben ik meer thuis in ontwerp

Maar samen met helpmij kom ik er meestal wel uit. Goede site!!

Groet,

ErikBooy007 · 25 mrt 2009

Ik ben juist het tegenovergestelde. Qua vormgeving niet zo heel erg creatief, maar als ik een plan heb, kan ik vrij eenvoudig de juiste (combinatie van) codes vinden om de server / site te laten doen wat ik wil.

iFrame met java werkt niet in IE, wel in FF

Hobbit

Gebruiker

Glest

Gebruiker

Hobbit

Gebruiker

Hobbit

Gebruiker

Glest

Gebruiker

Hobbit

Gebruiker

Glest

Gebruiker

Hobbit

Gebruiker

Glest

Gebruiker

Hobbit

Gebruiker

Glest

Gebruiker

Hobbit

Gebruiker

ErikBooy007

Terugkerende gebruiker

Hobbit

Gebruiker

ErikBooy007

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy