Hover IE FF probleem.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Koh do

koh do

10/04/2011 19:28:11
Quote Anchor link
Hallo phphulp,
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
PHP hulp

PHP hulp

10/05/2021 20:09:08
 
Peter  paul

peter paul

11/04/2011 16:39:43
Quote Anchor link
Als je de Height:116px; verwijderd uit de class .full-wrapper dan werkt hij gewoon in Firefox.
 
Koh do

koh do

11/04/2011 17:22:22
Quote Anchor link
Ik zie het. Maar hierdoor loop ik meteen weer tegen het volgende probleem aan, hoe krijg ik hier een footer onder. want wanneer ik er een footer onder zet dan komt deze onder de andere divs te staan.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.