IE vs firefox - layer an verschiedene stellen - again!

    hallo!

    hab jetzt erst mal gelesen und anscheinend einen anfänger fehler begangen!
    hab meine page komplett nach firefox ausgrichtet und alles passt!
    checkt die seite unter: ********************

    und dann hat ein freund von mir sie mit IE "bewundert"!! grauenvoll... was kann ich jetzt noch retten??

    so schaun die layers bei mir normalerweise nicht aus, denn das style=position hab ich erst jetzt dann rein, führt aber leider auch kaum zum gewünschten ergebnis!

    vielen lieben dank,

    ralph

    Einmal editiert, zuletzt von admin (22. Juli 2009 um 18:12) aus folgendem Grund: URL Adresse gelöscht

    also, problem is ja nich weil es bloß 1,2 eben sind sondern ein ganzer haufen,...gibt es ein möglichkeit das noch in den griff zu bekommen oder heißt das ich muss von vorne beginnen - und gleichzeitig immer bei IE, firefox und am besten auch gleich opera schaun ob alles gleich aussieht??

    bitte um antwort!

    lg ralph

    ich denke mit css kannst du da noch einiges retten... wenn du den divs schon ne id oder class geben hast...---> externe css

    quelltext posten...

    Wer verliert, gewinnt an Erfahrung!

    ok, das wär mal der quellentext von meinem linken frame.. der wo das menü drinnen ist:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>


    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="generator" content="Microsoft FrontPage 5.0">
    <title>left_banner</title>
    <style type="text/css" media="screen"><!--
    #Layer1 { position: absolute; top: 260px; left: 46px; width: 100px; height: 248px; visibility: visible; display: block }
    #layer2 { position: absolute; top: 91px; left: 14px; width: 80px; height: 23px; visibility: visible; display: block }
    #layer3 { position: absolute; top: 18px; left: 14px; width: 80px; height: 21px; visibility: visible; display: block }
    #layer4 { position: absolute; top: 163px; left: 8px; width: 80px; height: 23px; visibility: visible; display: block }
    #layer5 { position: absolute; top: 127px; left: 5px; width: 80px; height: 23px; visibility: visible; display: block }
    #layer6 { position: absolute; top: 226px; left: 26px; width: 36px; height: 23px; visibility: visible; display: block }
    #layer8 { position: absolute; top: 22px; left: 44px; width: 100px; height: 31px; visibility: visible; display: block }
    #layer7 { position: absolute; top: 208px; left: -19px; width: 118px; height: 71px; visibility: visible; display: block }
    #layer9 { position: absolute; top: 54px; left: 11px; width: 118px; height: 71px; visibility: visible; display: block }

    a { text-decoration: none; color:black; }
    a:hover { text-decoration: underline }
    a:visited { text-decoration:none; color:black; }
    a:visited:hover { text-decoration: underline }
    a:active { text-decoration:none; color:red; }
    a:focus { text-decoration:none; color:red; }
    --></style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>

    <body background="webdata/background2.JPG">


    </p>

    <div id="layer1" style="width: 121px; height: 188px">
    <div id="layer2" style="width: 80; height: 23"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a href="JKU_start.html" target="main_frame">JKU
    Linz</a>    </font></div>


    </p>
    <div id="layer3"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Nachhilfe</font></div>
    <div id="layer9" style="width: 83; height: 16"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a href="sell&buy.htm" target="main_frame">Sell
    &amp; Buy</a>    </font></div>


    </p>


    </p>
    <div id="layer4"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Impressum</font></div>

    </p>
    <div id="layer5" style="width: 80; height: 23"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Search-Map</font>
    </div>



    <div id="layer7">
    <table width="117" border="0" cellspacing="1" cellpadding="0" bgcolor="black" background="webdata/grey-white.JPG" height="71">
    <tr>
    <td>
    <div align="center">
    <table width="82" border="0" cellspacing="1" cellpadding="0" bgcolor="black" height="44">
    <tr>
    <td>

    <div align="center">
    </div>
    </td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>

    </div>
    </p>

    </p>
    </div>
    <div id="layer8">
    <div align="left">
    <font size="4" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Home</font></div>
    </div>

    </body>

    </html>

    Es macht keinen großen Sinn, für jeden Link einen einzelnen Layer zu verwenden, der zudem noch absolut positioniert ist. Da blickst du irgendwann überhaupt nicht mehr durch und durch die Positionsangaben kann es schnell mal zu Fehlern und damit Überlagerungen kommen.
    Ich empfehle dir deshalb, deine gesamte Navi mit einem Listencode zu ersetzen.
    Zahlreiche Code-Beispiele findest du hier, mit Hintergrundgrafiken z.B. dieses.

    :) wenn ichs jetzt noch mal machen würd, würd ichs auch anders machen...
    ich hab einfach den text auf die buttons gesetzt (mit ebenen), di buttons normal dann in eine ebene die über das hintergrundbild geht.. und eine zusätzliche eben unten...

    gibt es da keine möglichkeit das hin zu kriegen..?

    Doch, es gibt eine saubere Lösung, siehe meinen letzten Link.
    Die Buttons fügst du dabei jedoch nicht als img sondern als background-image im a-Tag ein. Verwende doch einfach mal diesen Code, ersetze die Bilddatei mit deiner und ersetze den Linktext mit deinem. Ggf. sind dann noch der width-Wert und die Farben anzupassen.
    Wenn sich der Button dann beim a-Element befindet, kommt auch die Textbeschriftung drauf. Unterschiedliche Layer und Ebenen sind dabei nicht erforderlich.