jQuery Effekt zerstört Layout im IE

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • jQuery Effekt zerstört Layout im IE

    Ich grüße euch ..

    Ich möchte euch um Hilfe bitten, da ich nach langem Hin und Her einfach nicht mehr den Überblick habe und keine Ideen mehr habe.
    Es handelt sich hierbei um eine Schülerhomepage, nur als grundlegende Information.

    Zum Problem:

    Grundlage: xs4all.nl/~peterned/examples/cssmenu.html

    Dieses CSS Menü habe ich nach meinen Bedürfnissen angepasst.
    Im Firefox sieht alles super aus, allerdings macht der IE mal wieder was er will.
    Da ich alles bis jetzt nur lokal auf der Festplatte habe, geb ich euch ein paar Codeausschnitte und Screenshots um die ganze Sache zu verdeutlichen.

    Normale Ansicht, nachdem die Seite geladen wurde:
    [Blockierte Grafik: http://bobek.bplaced.net/screen1.PNG]

    Nachdem man im IE auf den "Abschicken" Button klickt, erscheint ein div mit der Auswertung der Eingaben.
    Lasst euch nicht von dem Fehler ablenken. Die Datei zur Aswertung liegt nicht lokal.
    Das Menü bleibt an derselben Position, wie vorher auch.
    [Blockierte Grafik: http://bobek.bplaced.net/screen2.PNG]

    Wenn man nun mit dem Mauszeiger über das Menü fährt, hüpft es in die richtige Position:
    [Blockierte Grafik: http://bobek.bplaced.net/screen3.PNG]

    Wenn man jetzt auf den "Zurücksetzen" Button klickt, fährt die Auswertung wieder ein.
    Das Menü bleibt allerdings, wer hätte es erwartet, an derselben Position stehen bis man mit der Maus drüber fährt.
    [Blockierte Grafik: http://bobek.bplaced.net/screen4.PNG]


    Hier der dazugehörige Code Ausschnitt:

    Quellcode

    1. <table border="0" cellspacing="1" width="128">
    2. <tbody>
    3. <tr>
    4. <td valign="top">
    5. <div id="menuu">
    6. <ul id="menu">
    7. <li><a href="index.php">Willkommen</a></li>
    8. <li><a href="ae_stoffkatalog.php">AE Stoffkatalog</a></li>
    9. <li><a href="stundenplan.php">Stundenplan</a></li>
    10. <li class="folder">
    11. <a href="aufgaben.php" class="submenu">Aufgaben</a>
    12. <ul class="menu">
    13. <li style="margin-left:8px;"><a href="umfrage.php" target="_top">Umfrage</a></li>
    14. <li style="margin-left:8px;"><a href="umfrage1.php" target="_top">Umfrage1</a></li>
    15. <li style="margin-left:8px;"><a href="umfrage2.php" target="_top">Umfrage2</a></li>
    16. </ul>
    17. </li>
    19. <li><a href="ordner.php">Ordner</a></li>
    20. </ul>
    21. </div>
    22. </td>
    23. </tr>
    24. </tbody>
    25. </table>
    Alles anzeigen


    Und hier der CSS Code:

    Quellcode

    1. #menuu ul {
    2. display:block;
    3. margin:0;
    4. padding:0;
    5. border:0;
    6. width:105px;
    7. border:0px solid #E0DEDE;
    8. background:white;
    9. list-style:none;
    10. }
    12. #menuu ul.menu {
    13. border:1px solid #5F5F5F;
    14. width:120px;
    15. margin:0;
    16. padding:0;
    17. }
    19. #menuu ul.menu a {
    20. font-size:11px;
    21. }
    23. #menuu li {
    24. display:block;
    25. margin:0;
    26. padding:0;
    27. border:0;
    28. position:relative;
    29. padding:1px;
    30. padding-left:12px;
    31. background:url("../images/bullet_y.gif") center left no-repeat;
    32. z-index:1;
    33. font-weight:normal;
    34. }
    36. #menuu li.red {
    37. display:block;
    38. margin:0;
    39. padding:0;
    40. border:0;
    41. position:relative;
    42. padding:1px;
    43. padding-left:12px;
    44. background:url("../images/bullet_r.gif") center left no-repeat;
    45. z-index:1;
    46. font-weight:bold;
    47. }
    49. #menuu li.folder { background:url("../images/bullet_y.gif") center left no-repeat; }
    50. #menuu li.folder ul {
    51. position:absolute;
    52. left:92px; /* IE */
    53. top:1px;
    54. }
    55. #menuu li.folder>ul { left:104px; } /* others */
    57. #menuu li.folderbold { background:url("../images/bullet_r.gif") center left no-repeat; }
    58. #menuu li.folderbold ul {
    59. position:absolute;
    60. left:105px; /* IE */
    61. top:1px;
    62. font-weight:bold;
    63. }
    64. #menuu li.folderbold>ul { left:115px; } /* others */
    66. #menuu a {
    67. display:block;
    68. margin:0;
    69. padding:0;
    70. border:0;
    71. padding:2px;
    72. border:0px solid white;
    73. text-decoration:none;
    74. color:#000;
    75. width:100%; /* IE */
    76. }
    77. #menuu li>a { width:auto; } /* others */
    79. #menuu li a.submenu {
    80. background:url("../images/sub.png") right no-repeat;
    81. }
    83. /* regular hovers */
    85. #menuu a:hover {
    86. border-color:#E0DEDE;
    87. background-color:#E3E1E1;
    88. color:black;
    89. }
    90. #menuu li.folder a:hover, #menuu li.folderbold a:hover {
    91. background-color:#E3E1E1;
    92. }
    94. /* hovers with specificity */
    96. #menuu li.folder:hover, #menuu li.folderbold:hover { background-color:#E3E1E1;z-index:10; }
    98. #menuu li:hover, #menuu li.red:hover { background-color:#E3E1E1; }
    100. #menuu ul ul, li:hover ul ul {
    101. display:none;
    102. }
    104. #menuu li:hover ul, li:hover li:hover ul {
    105. display:block;
    106. }
    Alles anzeigen


    Übrigens existiert der Fehler auf jeder Seite, in der ich einen jQuery slideUp, -Down, fadeOut etc. habe.
    Also überall wo der Content in die Länge gezogen wird und hinterher wieder zurück.
    Vor dem Menü hatte ich ein schlichtes Menü, bei dem diese Fehler nicht aufgetreten sind.
    Ich hoffen jemand nimmt sich die Zeit und schaut sich mein Anliegen an.
    Vielen Dank im Voraus.

  • Ich habs schnell mal hochgeladen.

    Schülerhomepage

    Edit 19.11.2010:
    Es scheint an der Zentrierung der Seite in der Höhe zu liegen.
    Dafür wurde ein kleiner und mir bisher einzig bekannt funktionierender Trick angewandt

    Quellcode

    1. <table border="0" cellpadding="0" cellspacing="0" style="height:100%;">
    2. <tbody valign="middle">


    Scheint dann Konflikte mit dem Menü zu geben, da es nicht wirklich weiß wo es stehen muss.
    Wenn ihr noch andere Vorschläge habt wäre ich dankbar dafür ;)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von MasterKKK ()