div-layer probleem

  • Onderwerp starter Onderwerp starter Olav
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

Olav

Terugkerende gebruiker
Lid geworden
8 sep 2000
Berichten
2.249
Wie weet de oplossing voor het volgende probleem?
Ik heb doormiddel van een div een layer gemaakt voor een uitklap menu.
Echter wanneer het menu uitklapt, hoort die over een dropdownbox heen te vallen.
In Firefox doet hij dat ook netjes, alleen in Internet Explorer wordt de dropdownbox over het uitklap menu gezet.
(zie bijlage)

De code die ik gebruikt heb is de volgende:
het bijhorende javascript
PHP:
function big(lyr) {
document.all[lyr].style.height='180px'; }

function small(lyr) {
document.all[lyr].style.height='14px';
}

/* start() makes all layers short to start with (height property)*/
function start() {
document.all.Layer1.style.height='14px';
 }

de layer
PHP:
<body leftmargin="0" topmargin="0"  onLoad="start()">
<div id="Layer1" style="position:absolute; width:116px; height:180px; z-index:1; left: 235px; top: 119px; background-color: #D6DEEF; layer-background-color: #D6DEEF; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')"> 
 <div align="left">
    <font face="Verdana"><span class="style1">Continenten</span></font><font face="Verdana" size=2><br>
    <a href="continent.php?conid=1">Afrika</a>
    <br>
    <a href="continent.php?conid=2">Azië</a>
    <br>
    <a href="continent.php?conid=8">Caribbean</a>
    <br>
    <a href="continent.php?conid=3">Europa</a>
    <br>
    <a href="continent.php?conid=4">Noord Amerika</a>
    <br>
    <a href="continent.php?conid=5">Midden Amerika</a>
    <br>
    <a href="continent.php?conid=6">Zuid Amerika</a>
    <br>
    <a href="continent.php?conid=9">Midden Oosten</a>
    <br>
    <a href="continent.php?conid=7">Oceanië</a>
    <br>
    <a href="continent.php?conid=10">Overige</a>
    </font></div>
</div>

de selectbox
PHP:
<td width="20%" valign="top"><form name="form1" action="land.php" method="post"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><strong>Selecteer een land</strong></td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><select name="selland" style="width: 200px;z-index:2;">
                  <?php 
				  	while(list($lid,$land,$cid,$code) = mysql_fetch_row($result1))
				  	{
				  		echo("<option value=". $lid .">". $land ."</option>");
				  	} 
				  ?>
                 </select></td>
                <td><input type="submit" name="Submit" value="Go"></td>
              </tr>
              <tr>
                <td class="style1">&nbsp;</td>

Olav
 

Bijlagen

  • layerprobleem.jpg
    layerprobleem.jpg
    14,6 KB · Weergaven: 38
oei..

form items zoals drop downs worden door het OS gerenderd en dit soort glitches komen dus wel eens voor..

wat je kan proberen (ik heb het niet getest) is de z-index van je drop down naar beneden te gooien:
document.getElementById(jouw_drop_down).style.z-index = '10';

of je display op none te zetten:
document.getElementById(jouw_drop_down).style.display = 'none';

t.
 
Geplaatst door teacher
oei..

form items zoals drop downs worden door het OS gerenderd en dit soort glitches komen dus wel eens voor..

wat je kan proberen (ik heb het niet getest) is de z-index van je drop down naar beneden te gooien:
document.getElementById(jouw_drop_down).style.z-index = '10';

of je display op none te zetten:
document.getElementById(jouw_drop_down).style.display = 'none';

t.

Helaas hielp geen van twee.
Maar in ieder geval bedankt :thumb:

Olav
 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor  -->
<!--        [url]http://www.coffeecup.com/[/url]         -->
<!--       Brewed on 6-7-2005 10:59:57        -->
<head>
  <title></title>
</head>
<body>
<form name="blup">
<select name="blaat">
  <option value="">hoi</option>
  <option value="">melp</option>
  <option value="">woei</option>
  <option selected value="">flap</option>
</select>
</form>
<a href="#" onclick="document.getElementById('blaat').style.display='none'";>doe het</a>
</body>
</html>

en nu ga ik op vakantie!!

t.

oh ja.. met een display='none' verdwijnt dus ook de container. Wil je de ruimte (ivm lay out) nu behouden, kies dan voor visibility='hidden'
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan