document.getElementById funktioniert nicht

[beststart]

Hallo, ich bin noch ein ziemlicher Javascript-Anfänger und habe Probleme mit folgendem Javascript-Code

<script type="text/javascript">
//<![CDATA[
function st(){document.getElementById('st').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function st2(){document.getElementById('st').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function mu(){document.getElementById('mu').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function mu2(){document.getElementById('mu').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function ga(){document.getElementById('ga').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function ga2(){document.getElementById('ga').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function ch(){document.getElementById('ch').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function ch2(){document.getElementById('ch').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function fu(){document.getElementById('fu').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function fu2(){document.getElementById('fu').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function wi(){document.getElementById('wi').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function wi2(){document.getElementById('wi').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function gb(){document.getElementById('gb').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function gb2(){document.getElementById('gb').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function fo(){document.getElementById('fo').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function fo2(){document.getElementById('fo').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}



function ko(){document.getElementById('ko').style='border:1px solid black; border-bottom:none; background:white;color:black; border-top-left-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-topleft: 1000px; -moz-border-radius-topright: 1000px; -khtml-border-top-left-radius: 1000px; -khtml-border-top-right-radius: 1000px;'}

function ko2(){document.getElementById('ko').style='display: block; padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid transparent; border-left-color: transparent; border-top-color: transparent; color: white; background:transparent;'}
//]]>
</script>

und hier der HTML-Code

<ul id="Navigation" style="margin-bottom:30px;margin-top:-2.5em;">
                <li>
                    <a href="/" accesskey="s" tabindex="1" id="st" name="st" onmouseover="st()" onmouseout="st2();">x</a>
                    <ul>
                        <li style="width:10em;">
                            <a href="#" onmouseover="st(); this.style.background=document.getElementById('header').style.background" onmouseout="st2(); this.style.background='white'" style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;">
                            ...</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#" accesskey="m" tabindex="2" id="mu" name="mu" onmouseover="mu()" onmouseout="mu2()">x</a>
                    <ul>
                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout="mu2(); this.style.background='white'">x</a>
                        </li>

                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout=
                            "mu2(); this.style.background='white'">x</a>
                        </li>

                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout=
                            "mu2(); this.style.background='white'">x</a>
                        </li>

                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout="mu2(); this.style.background='white'">x</a>
                        </li>

                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout="mu2(); this.style.background='white'">Hip
                            x</a>
                        </li>

                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout="mu2(); this.style.background='white'">x</a>
                        </li>

                        <li style="width:10em;">
                            <a href="#" onmouseover="mu(); this.style.background=document.getElementById('header').style.background" onmouseout="mu2(); this.style.background='white'"
                            style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;">
                            x</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#" accesskey="g" tabindex="3" id="ga" name="ga" onmouseover="ga()" onmouseout="ga2()"><u>G</u>AMES</a>
                    
                </li>

                <li>
                    <a href="/chat" accesskey="c" tabindex="4" id="ch" name="ch" onmouseover="ch()" onmouseout="ch2()"><u>C</u>HAT</a>
                    
                </li>

                <li>
                    <a href="/fun" accesskey="f" tabindex="5" id="fu" name="fu" onmouseover="fu()" onmouseout="fu2()"><u>F</u>UN</a>
                    <ul>
                        <li style="width:10em;">
                            <a onmouseover="fu(); this.style.background=document.getElementById('header').style.background" onmouseout="fu2(); this.style.background='white'" style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;"
                            href="#">...</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="/wissen" accesskey="w" tabindex="5" id="wi" name="wi" onmouseover="wi()" onmouseout="wi2()"><u>W</u>ISSEN</a>
                    <ul>
                        <li style="width:10em;">
                            <a onmouseover="wi(); this.style.background=document.getElementById('header').style.background" onmouseout="wi2(); this.style.background='white'" style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;"
                            href="#">...</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="/g%C3%A4stebuch" accesskey="e" tabindex="6" id="gb" name="gb" onmouseover="gb()" onmouseout="gb2()">GÄST<u>E</u>BUCH</a>
                    <ul>
                        <li style="width:10em;">
                            <a onmouseover="gb(); this.style.background=document.getElementById('header').style.background" onmouseout="gb2(); this.style.background='white'" style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;"
                            href="#">...</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#" id="fo" name="fo" onmouseover="fo()" onmouseout="fo2()" accesskey="f" tabindex="7"><u>F</u>ORUM</a>
                    <ul>
                        <li style="width:10em;">
                            <a onmouseover="fo(); this.style.background=document.getElementById('header').style.background" onmouseout="fo2(); this.style.background='white'" style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;"
                            href="#">...</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="/kontakt" id="ko" name="ko" onmouseover="ko()" onmouseout="ko2()" accesskey="k" tabindex="8"><u>K</u>ONTAKT</a>
                    <ul>
                        <li style="width:10em;">
                            <a onmouseover="ko(); this.style.background=document.getElementById('header').style.background" onmouseout="ko2(); this.style.background='white'" accesskey="k" style=
                            "border-bottom-width:1px;border-bottom-left-radius:100px;border-bottom-right-radius:100px; -moz-border-radius-bottomleft: 1000px; -moz-border-radius-bottomright: 1000px; -khtml-border-bottom-left-radius:100px; -khtml-border-bottom-right-radius:100px;"
                            href="#">...</a>
                        </li>
                    </ul>
                </li>
            </ul>

Also mein Problem:
Das ganze funktioniert in Opera, aber weder im FF oder IE noch in Safari oder Google Chrome.
In den Fehler konsoloen von IE und FF steht z.B. st is not defined.

Weiss jemand woran das liegt, oder ob ich das anders machen kann?
Danke im Vorraus!!!

[wildmieze]

hmm .. vielleicht liegts gar nicht am getElementById .. ich hab zB noch nie gesehen, daß man hinter "style" ganz normale css-angaben schreiben kann .. ich kenns nur so: http://de.selfhtml.org/javascript/objekte/style.htm

.. aber ob das die "is not defined"-Fehlermeldung beheben könnte, weiß ich nicht ..

[blueGirl]

jetzt mal auf die schnelle: was willste eigentlich erreichen? ehe ich mir das gesamte script und das ganze html durchlese und nicht mal mehr weiß, wo der fehler liegt oder was genau funktionieren soll... welche ID soll denn bitte was machen, oder noch einfacher runtergebrochen: wat soll bei deiner Oma auf'm bildschirm passieren, wenn sie was macht?
danke, blue