[javascript / css] margin wijzigen: firefox probleem - Softwareontwikkeling

maandag 13 februari 2006 14:25

Acties:

Verwijderd

Topicstarter

Hallo,
Ik heb volgens mij een probleem die heel veel mensen hebben. Nu ben ik al een heel eind gevorderd met de oplossing!
Mijn probleem is dat ik tekst binnen een DIV wil verticaal in het midden wil uitlijnen. Nu werkt vertical-align enzo natuurlijk niet.
De enigste mogelijkheid is om dmv javascript de hoogte van de div met tekst uit te lezen, en hem hierdoor te positioneren.

Mijn html code:

HTML:

<html>
<head>
<title>Untitled Document</title>
<script language="javascript">
function test() {
    x = document.getElementById('layer2');
    height = x.offsetHeight / 2;
    height = 0 - height;
    alert (height);
    x.style.marginTop = height; 
}
</script>
<style type="text/css">
<!--
#layer1 {
    border: 1px solid #000000;
    position: relative;
    width: 200px;
    height: 126px;
    z-index: 1;
    left: 220px;
    top: 160px;
}
#layer2 {
    position: absolute;
    left: 0;
    top: 50%;
    margin: 0;
    border: 1px solid #000000;
}
-->
</style>
</head>
<body onLoad="test()">
<div id="layer1"><div id="layer2">Dit is een test om te kijken of hij het doet.</div></div>
</body>
</html>

Dit werkt in IE prima. Maar in FireFox herkent hij x.style.marginTop = height; niet. Hij geeft geen foutmelding, maar hij lijnt hem niet goed (verticaal) uit.
Dmv de alert heb ik gekeken of hij het eerste gedeelte wel goed doet, en dat werkt prima. Ik kan hem dus alleen geen nieuwe marge meegeven.

Alvast bedankt!

maandag 13 februari 2006 14:27

Acties: