ik heb 2 geneste divs, met daarin nog twee divjes die ik dmv document.getElementById().style.display wil kunnen showen en hiden. het vreemde is echter dat de eerste keer dat ik de toggle-functie aanroep, in IE de padding-bottom van de buitenste div verdubbelt, onafhankelijk van welke div ik probeer te showen of hiden. klik hier voor een voorbeeld.
dit is de code:
Het probleem treedt niet meer op wanneer ik
1) de float van de div.inner verwijder (maar dat is geen optie omdat ik die float nodig heb voor meerdere kolommen in de niet-uitgeklede versie).
2) de breedte van div.inner een paar pixels kleiner maak (maar dat is niet mooi)
3) de padding van div.outer vervang door een margin op div.inner en div.outer een border geef om de margin-collapsing te voorkomen (dit is wat ik ga doen)
Ik heb dus wel een workaroud gevonden, maar kent iemand dit probleem, of heeft iemand een idee hoe dit komt?
dit is de code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>home</title>
<style type="text/css">
div.outer {
padding: 20px;
background: #666;
/* boxmodel-hack */
width:240px;
height: 240px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height: 200px;
}
div.inner {
float: left;
width: 200px;
height: 200px;
background: #ccc;
}
div#nr1 {
display: block;
background: #f00;
}
div#nr2 {
display: none;
background: #0f0;
}
</style>
<script type="text/javascript">
function toggle() {
var isHidden = (document.getElementById('nr1').style.display == "none");
document.getElementById('nr1').style.display = (isHidden ? "block" : "none");
document.getElementById('nr2').style.display = (isHidden ? "none" : "block");
}
</script>
</head>
<body>
<div class="outer">
<div class="inner">
<a href="javascript:toggle();">klik voor toggle</a>
<div id="nr1">
nr1
</div>
<div id="nr2">
nr2
</div>
</div>
</div>
</body>
</html> |
Het probleem treedt niet meer op wanneer ik
1) de float van de div.inner verwijder (maar dat is geen optie omdat ik die float nodig heb voor meerdere kolommen in de niet-uitgeklede versie).
2) de breedte van div.inner een paar pixels kleiner maak (maar dat is niet mooi)
3) de padding van div.outer vervang door een margin op div.inner en div.outer een border geef om de margin-collapsing te voorkomen (dit is wat ik ga doen)
Ik heb dus wel een workaroud gevonden, maar kent iemand dit probleem, of heeft iemand een idee hoe dit komt?
:strip_icc():strip_exif()/u/59957/got-icon.jpg?f=community){kind=icon}
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}