IE div's buiten div
IE doet weer eens vreemd. Wanneer ik een rij div's allemaal display: inline; meegeef komen ze buiten hun parent div. Een voorbeeldje is hier te bekijken.
Wanneer ik het "display: inline;" gedeelte weghaal staan ze wel netjes in de div, maar dan gaat het verkeerd met het vergrotings effect. De afbeelding valt dan niet meer over de andere afbeeldingen maar duwt de rest gewoon opzij.
De bijbehoorende code:
Code (php)
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
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
#previews {
width: 335px;
margin-bottom: 5px;
height: 350px;
overflow: auto;
float: left;
margin-right: 15px
}
#thumbnails {
clear: both;
margin: 10px auto;
}
#thumbnails div {
position: relative;
width: 80px;
height: 80px;
float: left;
margin: 8px;
padding: 0;
float: left;
display:inline;
}
#thumbnails img {
width: 80px;
height: 80px;
position: absolute;
border-top: solid 1px #999;
border-right: solid 1px #404040;
border-bottom: solid 1px #333;
border-left: solid 1px #404040;
}
width: 335px;
margin-bottom: 5px;
height: 350px;
overflow: auto;
float: left;
margin-right: 15px
}
#thumbnails {
clear: both;
margin: 10px auto;
}
#thumbnails div {
position: relative;
width: 80px;
height: 80px;
float: left;
margin: 8px;
padding: 0;
float: left;
display:inline;
}
#thumbnails img {
width: 80px;
height: 80px;
position: absolute;
border-top: solid 1px #999;
border-right: solid 1px #404040;
border-bottom: solid 1px #333;
border-left: solid 1px #404040;
}
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="previews">
<div id="thumbnails" spry:region="dsPhotos">
<div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}" /></a></div>
<p class="ClearAll"></p>
</div>
</div>
<div id="thumbnails" spry:region="dsPhotos">
<div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}" /></a></div>
<p class="ClearAll"></p>
</div>
</div>
Groet
Newb
