JavaScript style.height shaking unintentionally

Question

http://stadskoll.nu/restaurang.php

If you press the string of text called Visa/dölj mer information which is in a grey font, you will see that the effect occurring is shaking. This is not intentional and I cant figure out what's wrong.

To clarify, I want to know what's causing this "shaky" effect and be able to remove it.

HTML :

<!--VAL1-->
<div id="val1">
    <div id="information">
        <namn>
            <a href=""></a>
        </namn>
        <br>
        <a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
        <br>
        <div id="star2" style="background-position:0 -0px">
            <div id="stars1">
                <div class="first"  onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
                <div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
                <div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
                <div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
                <div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
            </div>
        </div>
        <div id="txt"></div>
        <br>
        <br>
        <information></information>
    </div>
    <div id="bilder">
        <a href = "javascript:void(0)" onclick="popup('bildval1');fade('fadebild1')"><img src="" /></a>
        <br/>
        <a href = "javascript:void(0)" onclick="popup('kartaval1');fade('fadekarta1')"><img src="http://stadskoll.nu/bilder/karta.jpg" /></a>
    </div>
</div>

CSS :

#val1 {
    width:83%;
    height:75px;
    border-top:1px;
    border-top-style:groove;
    margin-left:40px;
    overflow:hidden;
    padding-top:10px;
    padding-left:20px;
    -webkit-transition: all 0.5s ease-in-out;    
    transition: height 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
    -o-transition: all 0.5s ease-in-out; /* Opera */                
}

JavaScript :

<script>   
    function toggle(id) {
       var e = document.getElementById(id);
       if(e.style.height == '175px')
          e.style.height = '75px';
              else
          e.style.height = '175px';         
    }
</script>

Answer 1

The issue appears to be with the display:inline on the maincontentbox. If you add vertical-align:top it will disappear.

What I believe is happening is that, since by default it is aligned to the baseline, the browser is making the div taller. Since the div is taller it has to resize the parent container and then move the div to the bottom of the line.