Hover IE FF probleem.
Ik heb een klein probleem waar ik nu al een tijd lang naar aan het staren ben om te kijken hoe ik het moet oplossen. Onder aan de pagina zie je de code van mijn versimplde script. In IE werkt het zo als ik wil maar in FF doet hij helemaal niets. Ten zei ik de "full-wrapper" class een float:links; mee geef. Maar dat wil ik niet want hij moet gecentreerd blijven.
Ik weet niet of de fout in het float gedeelte ligt maar dat is het enige waar ik achter ben gekomen. Ziet iemand waar mijn probleem kan zitten?
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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>voorbeeld</title>
<style type="text/css">
.full-wrapper{
position: relative;
z-index:-6;
height: 116px;
width: 380px;
background: black;
margin: 0px auto;}
.wrapper{
position: relative;
height: 116px;
width: 182px;
background: green;
z-index: -4;
float: left;
margin: 0px 4px;}
.container{
position:relative;
top: 75px;
height: 34px;
width: 174px;
background: purple;
z-index: -3;
margin: 4px;
overflow: hidden;}
.container:hover{
margin-top: -75px;
height: 116px;}
.box, .box2, .box3{
top: 83px;
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;
cursor: hand;}
.hover, .hover2{
position:relative;
top: -66px;
width: 174px;
height: 95px;
visibility: hidden;
z-index: -1;
cursor: default;}
.hover{
left: -4px;
background: orange; }
.hover2{
left: -62px;
background: yellow;}
.box:hover, .box2:hover, .box3:hover{
background: blue;}
.box:hover .hover, .box2:hover .hover2 {
visibility: visible;}
</style>
</head>
<body>
<div class="full-wrapper">
<div class="wrapper">
<div class="container">
<div class="box">
<div class="hover">
</div>
</div>
<div class="box2">
<div class="hover2">
</div>
</div>
<div class="box3">
<div class="hover3">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="box">
<div class="hover">
</div>
</div>
<div class="box2">
<div class="hover2">
</div>
</div>
<div class="box3">
<div class="hover3">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>voorbeeld</title>
<style type="text/css">
.full-wrapper{
position: relative;
z-index:-6;
height: 116px;
width: 380px;
background: black;
margin: 0px auto;}
.wrapper{
position: relative;
height: 116px;
width: 182px;
background: green;
z-index: -4;
float: left;
margin: 0px 4px;}
.container{
position:relative;
top: 75px;
height: 34px;
width: 174px;
background: purple;
z-index: -3;
margin: 4px;
overflow: hidden;}
.container:hover{
margin-top: -75px;
height: 116px;}
.box, .box2, .box3{
top: 83px;
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;
cursor: hand;}
.hover, .hover2{
position:relative;
top: -66px;
width: 174px;
height: 95px;
visibility: hidden;
z-index: -1;
cursor: default;}
.hover{
left: -4px;
background: orange; }
.hover2{
left: -62px;
background: yellow;}
.box:hover, .box2:hover, .box3:hover{
background: blue;}
.box:hover .hover, .box2:hover .hover2 {
visibility: visible;}
</style>
</head>
<body>
<div class="full-wrapper">
<div class="wrapper">
<div class="container">
<div class="box">
<div class="hover">
</div>
</div>
<div class="box2">
<div class="hover2">
</div>
</div>
<div class="box3">
<div class="hover3">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="box">
<div class="hover">
</div>
</div>
<div class="box2">
<div class="hover2">
</div>
</div>
<div class="box3">
<div class="hover3">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Als ik dat probeer op te lossen met met <div class="clear"></div> dan staat de div er mooi onder maar dan werkt de hover weer niet :s
Heeft iemand ene ander idee?
Gewijzigd op 11/04/2011 17:23:23 door koh do