Kan vandaag (dit is een 2e poging) iemand me uitleggen waarom in onderstaand simpele HTML/javascript scriptje de border (expres dik gemaakt) onderbroken wordt (in IE, ik heb geen andere browsers kunnen testen) als je op de knop toggle visibility klikt.
In de code hieronder treedt het effect NU niet op. Maar haal de commentaar haken (<!-- -->) rond de laatste drie datum inputs in de linkerhelft div weg en verbaas je als je weer op de knop drukt.
Het hangt dus echt af van de hoeveelheid items in de linkerkant div. Zover ben ik al wel na een uur of 3 testen.
Maar waarom?
En hoe kan ik zorgen dat dit effect niet optreedt?
alvast bedankt
grt I.
p.s. nodeloos te zeggen dat dit een voorbeeldscript is waar het effect in uitvergroot is...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>gebroken border voorbeeld</title>
<style type="text/css">
body{
background-color: #f0f0f0;
}
#main{
margin: 0 auto;
width: 800px;
background-color: white;
font: 10px verdana, arial, sans-serif;
border: 1px solid silver;
}
#linkerhelft{
float:left;
width: 47%;
padding-left: 5px;
border: 1px dotted red;
}
#rechterhelft{
float:right;
width:47%;
padding-right: 5px;
border: 1px dotted red;
}
#onderblok{
clear:both;
border: 1px solid silver;
}
#controls,
#submitknop{
text-align: center;
clear: both;
}
#inhoud {
border: 13px solid lime;
}
.invoerlabel{
display: block;
width: 110px;
float: left;
}
.mv_inv_datums{
width: 24%;
float: left;
padding-left: 5px;
}
</style>
<script language="javascript">
function datumblok_zichtbaar(toggle)
{
if (toggle.style.display == "none")
{
toggle.style.display = "";
}
else
{
toggle.style.display = "none";
}
}
</script>
</head>
<body id="invoer">
<div id="main">
<div id="inhoud">
<div id="controls">
<input type="button" value="toggle visibilty" class="controlknop" onclick="datumblok_zichtbaar(datumblok)">
</div><!--eind van controls-->
<form name="invoer" method="post" action="invoeropslaan.php" onsubmit="return checkinvoer()">
<div id="linkerhelft">
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<!--
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
<label class="invoerlabel" >datum *</label>
<input type="text" >
<input type="button" >
-->
</div><!-- eind van linkerhelft-->
<div id="rechterhelft">
</div><!--eind van rechterhelft------------>
<div id="onderblok">
<div id="datumblok" style="display: none">
<p class="mv_inv_datums">
<label class="invoerlabel">datum 1</label>
<input type="text">
<label class="invoerlabel">datum 2</label>
<input type="text">
</p>
<p class="mv_inv_datums">
<label class="invoerlabel">datum 3</label>
<input type="text">
<label class="invoerlabel">datum 4</label>
<input type="text">
</p>
<p class="mv_inv_datums">
<label class="invoerlabel">datum 5</label>
<input type="text">
<label class="invoerlabel">datum 6</label>
<input type="text">
</p>
<p class="mv_inv_datums">
<label class="invoerlabel">datum 7</label>
<input type="text">
<label class="invoerlabel">datum 8</label>
<input type="text">
</p>
</div><!-- eind van datumblok-->
<p id="submitknop">
<input type="hidden">
</p>
</div><!-- eind van onderblok-->
</form>
</div><!-- eind van de inhoud-->
</div><!-- eind van de main-->
</body>
</html>