Absolute positioneren IE
Hoi iedereen
Ik zit met een vervelend probleempje.
Ik ben een website aan het bouwen voor een jeugdbeweging en hierbij stel ik de verschillende leeftijdsgroepen voor met een foto en daarbij de naam.
Het is de bedoeling dat de naam van de groep onderaan links in de foto komt te staan.
Dit op zich is helemaal geen probleem, althans voor chrome en firefox.
Maar in IE zet hij de naam steeds helemaal rechts vanboven.
Heeft iemand een ideetje hoe ik dit oplos?
Sample codes:
groepen bestand
CSS
Ik zit met een vervelend probleempje.
Ik ben een website aan het bouwen voor een jeugdbeweging en hierbij stel ik de verschillende leeftijdsgroepen voor met een foto en daarbij de naam.
Het is de bedoeling dat de naam van de groep onderaan links in de foto komt te staan.
Dit op zich is helemaal geen probleem, althans voor chrome en firefox.
Maar in IE zet hij de naam steeds helemaal rechts vanboven.
Heeft iemand een ideetje hoe ik dit oplos?
Sample codes:
groepen bestand
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="groupPicture">
<a href=<?="?page=groepen&groepId=". $groep->getId(); ?>>
<img src=<?=$groep->getPicture(); ?> alt=<?=$groep->getName()." foto"; ?> />
<div class="waterBrand"><?=$groep->getName(); ?></div>
</a>
</div>
<a href=<?="?page=groepen&groepId=". $groep->getId(); ?>>
<img src=<?=$groep->getPicture(); ?> alt=<?=$groep->getName()." foto"; ?> />
<div class="waterBrand"><?=$groep->getName(); ?></div>
</a>
</div>
CSS
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.groupPicture {
padding: 20px;
float: left;
position: relative;
display: block;
z-index: 0;
vertical-align: bottom;
}
.waterBrand {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 1;
position: absolute;
margin-top: -45px;
margin-left: 0px;
font-size: 30pt;
font-weight: bold;
color: red;
}
padding: 20px;
float: left;
position: relative;
display: block;
z-index: 0;
vertical-align: bottom;
}
.waterBrand {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 1;
position: absolute;
margin-top: -45px;
margin-left: 0px;
font-size: 30pt;
font-weight: bold;
color: red;
}
.waterBrand {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 1;
position: absolute;
bottom:1px;
right:1px;
font-size: 30pt;
font-weight: bold;
color: red;
}
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 1;
position: absolute;
bottom:1px;
right:1px;
font-size: 30pt;
font-weight: bold;
color: red;
}
omdat je nu niet aangaf waar hij vanuit die margin moest toepassen.
bijv. je staat geblinddoekt op een gras veld en je weet niet waar op dat veld en iemand zegt dat je 60 stappen van de rechter bosrand moet af staan
bijv. je staat geblinddoekt op een gras veld en je weet niet waar op dat veld en iemand zegt dat je 60 stappen van de rechter bosrand moet af staan