Horizontale Liste in IE immer 100% breit

  • Horizontale Liste in IE immer 100% breit

    Hallo,

    Mein Layout erfordert ein Horizontales Menü was ich (wie man es normal macht) wie folgt umgesetzt habe.
    Alle aktuellen Browser stellen das Menü korrekt da bis auf ;) Internet Explorer in allen Versionen - der skaliert die Liste immer auf 100% Breite.

    Wenn jemand das Problem kennt weis jemand vieleicht auch wie man es ohne meinen js-workaround lösen kann.


    Aktueller Code:

    Quellcode

    1. <style rel="stylesheet" type="text/css">
    2. #D_TestDiv
    3. {
    4. position: absolute;
    5. right: 5px;
    6. border: solid 1px blue;
    7. }
    8. #U_TestList
    9. {
    10. height: 24px;
    11. border: solid 1px red;
    12. }
    14. #U_TestList li
    15. {
    16. border: solid 1px lime;
    17. padding: 5px;
    18. float: left;
    19. }
    20. </style>
    21. </head>
    22. <body>
    23. <div id="D_TestDiv">
    24. <ul id="U_TestList">
    25. <li>Test</li>
    26. <li>Test2</li>
    27. <li>Test3</li>
    28. </ul>
    29. </div>
    30. ...
    Alles anzeigen


    Aktueller Workaround

    Quellcode

    1. // IE bad stuff.
    2. if ($.browser.msie)
    3. {
    4. // Hack to set proper menu width.
    5. var menuWidth = 0;
    6. $('#U_Menu li').each(function() {
    7. menuWidth += $(this).outerWidth() + 2;
    8. });
    10. $('#U_Menu').css('width', menuWidth);
    11. }
    Alles anzeigen



    Mit freundlichen Grüßen
    Tobias Anhalt
    Bilder

    • liste_ie.PNG

      4,65 kB, 375×85, 272 mal angesehen

    • testlist_chrome.PNG

      30,03 kB, 601×135, 340 mal angesehen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Torben Brodt () aus folgendem Grund: code inline eingefügt

  • Hi,
    ich hab deinen Code mal inline eingefügt. Hast du denn eine Live Demo, bei der man in bisschen mit Firebug spielen kann? Welchen Doctype nutzt du überhaupt HTML/XHTML?
    Ich glaube gerade der IE6 kommt manchmal durcheinander wenn du kein XHTML verwendest und Whitespaces zwischen </li> und <li> hast.

    Ansonsten bin ich gerade gar nicht so sicher, ob das Verhalten der "modernen" Browser so berechenbar ist.
    Mach <ul> mal zu einem Blockelement (display:block)