Layout ohne Tabellen - Problem mit IE

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

  • Layout ohne Tabellen - Problem mit IE

    GESPLITTET von http://www.easy-coding.de/layout-ohne-tabellen-problem-mit-ie-t2689.html
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    Hm jetzt würde mich doch mal interessieren ob/wie man es hin bekommt, dass im INTERNET EXPLORER 6.X das hier richtig darzustellen:

    Quellcode

    1. <div class="tab" id="tab1">
    2. <div class="menu">
    3. <div class="option" style="width:20%">
    4. <div class="leftUpLeft">
    5. </div>
    6. <div class="leftUpRight">
    7. </div>
    8. <div class="leftUpMiddle">
    9. <span class="tabTitle">
    10. <a href="blub">
    11. Nr eins
    12. </a>
    13. </span>
    14. </div>
    15. </div>
    16. <div class="option" style="width:20%">
    17. <div class="downLeft">
    18. </div>
    19. <div class="downRight">
    20. </div>
    21. <div class="downMiddle">
    22. <span class="tabTitle">
    23. <a href="blub">
    24. Nr zwei
    25. </a>
    26. </span>
    27. </div>
    28. </div>
    29. <div class="option" style="width:20%">
    30. <div class="downLeft">
    31. </div>
    32. <div class="downRight">
    33. </div>
    34. <div class="downMiddle">
    35. <span class="tabTitle">
    36. <a href="blub">
    37. Nr drei
    38. </a>
    39. </span>
    40. </div>
    41. </div>
    42. <div class="option" style="width:20%">
    43. <div class="remainRight">
    44. </div>
    45. <div class="remainLeft">
    46. </div>
    47. </div>
    48. </div>
    49. </div>
    Alles anzeigen


    Quellcode

    1. div.menu
    2. {
    3. margin:0;
    4. }
    6. div.option
    7. {
    8. float:left;
    9. }
    11. div.leftUpLeft
    12. {
    13. height:33px;
    14. width:12px;
    15. float:left;
    16. background-image:url(../img/tlUp1.gif);
    17. background-repeat:no-repeat;
    18. }
    20. div.leftUpMiddle
    21. {
    22. height:33px;
    23. text-align:center;
    24. background-image:url(../img/tlUp2.gif);
    25. background-repeat:repeat-x;
    26. }
    28. div.leftUpRight
    29. {
    30. height:33px;
    31. width:10px;
    32. background-image:url(../img/tlUp3.gif);
    33. background-repeate:no-repeat;
    34. float:right;
    35. }
    37. div.downLeft
    38. {
    39. height:33px;
    40. width:12px;
    41. float:left;
    42. background-image:url(../img/tDown1.gif);
    43. background-repeat:no-repeat;
    44. }
    46. div.downMiddle
    47. {
    48. height:33px;
    49. text-align:center;
    50. background-image:url(../img/tDown2.gif);
    51. background-repeat:repeat-x;
    52. }
    54. div.downRight
    55. {
    56. height:33px;
    57. width:10px;
    58. background-image:url(../img/tDown3.gif);
    59. background-repeat:no-repeat;
    60. float:right;
    61. }
    63. div.remainLeft
    64. {
    65. height:33px;
    66. background-image:url(../img/tableft1.gif);
    67. background-repeat:repeat-x;
    68. }
    70. div.remainRight
    71. {
    72. height:33px;
    73. width:12px;
    74. float:right;
    75. background-image:url(../img/tableft2.gif);
    76. background-repeat:no-repeat;
    77. margin-right:-5px;
    78. }
    80. span.tabTitle
    81. {
    82. position:relative;
    83. left:0px;
    84. top:7px;
    85. letter-spacing:1px;
    86. }
    Alles anzeigen


    Bei den Bildern kann man nehmen, was man will.
    Die Div-Blöcke liegen nicht direkt aneinander, sondern es ist immer ein weißer Spalt dazwischen.
    Mfg
    Ubuntu Edgy * Kernel 2.6.17 * Gnome 2.16 * Beryl
    2 x Athlon MP 1900 * MSI K7D Master-L * 1024 MB ECC DDR333
    Hercules 9800XT 256 MB Ram * 1x 250 GB IDE
    Wasserkühlung

  • Ich habe das Problem nicht lösen können, aber man kann es mit deutlich weniger Code nachstellen.
    Zur Verdeutlichung habe ich den DIVs einen Border verpaßt:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4. <html>
    6. <head>
    8. <style type="text/css">
    9. div.left {
    10. margin: 0px;
    11. border: 1px solid black;
    12. padding: 0px;
    14. height: 50px;
    15. }
    17. div.right {
    18. margin: 0px;
    19. border: 1px solid black;
    20. padding: 0px;
    22. height: 50px;
    23. width: 500px;
    24. float: right;
    25. }
    26. </style>
    28. <title>CSS-Test</title>
    30. </head>
    32. <body>
    34. <div class="right"></div>
    35. <div class="left"></div>
    37. </body>
    39. </html>
    Alles anzeigen

  • Ist dir damit gedient?

    Ich hoffe das hilft dir irgendwie weiter...

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    3. <html>
    4. <head>
    5. <title>css layout13</title>
    6. <style type="text/css">
    7. <!--
    8. body{font:13px verdana}
    10. .box1, .box2 {
    11. padding:20px;
    12. border:1px solid black;
    13. width:500px;
    14. height: 50px;
    15. float:left;
    16. }
    18. .box1{
    19. background:gainsboro;
    20. }
    22. .box2{
    23. background:silver;
    24. }
    25. -->
    26. </style>
    27. </head>
    29. <body>
    30. <div class="box1"><strong>BOX1</strong>
    31. </div>
    33. <div class="box2"><strong>BOX2</strong>
    34. </div>
    36. </body>
    37. </html>
    Alles anzeigen

  • "border:0px;" funktioniert leider auch nicht

    und der Vorschlag, wie ich das Stylesheet effizienter gestalte, ist natürlich sehr sinnlos, solange es eh nicht funktioniert o_O

    Trotzdem thx
    Ubuntu Edgy * Kernel 2.6.17 * Gnome 2.16 * Beryl
    2 x Athlon MP 1900 * MSI K7D Master-L * 1024 MB ECC DDR333
    Hercules 9800XT 256 MB Ram * 1x 250 GB IDE
    Wasserkühlung

  • obaa

    Also Du willst eine Gallerie bauen, so sehe ich das zumindest.
    Ich habe dein Stylesheet nachgebaut... und es geht nicht.
    Man kann nicht ein Element float:left einen im Zentrum und einen float:right, ohne das es nicht einen Abstand gibt (IE).

    Hast du mein Vorschlag nachgebaut? :wink:
    Sonst kann ich dir einen Link angeben, der dir garantiert einen Wink weiterbringt.
    css.maxdesign.com.au/floatutorial/

  • Nein kam noch nicht dazu.
    Im eigentlichen ist es auch nicht wirklich ein Problem, da es ja mit Tabellen ohne weiteres klappt.
    Leider aber nicht mit div unterm internet explorer 6
    Mit FireFox und Internet Explorer 7 (angeblich) klappt es.
    Die Vorgabe ist halt Internet Explorer 6.

    Danke trotzdem
    Ubuntu Edgy * Kernel 2.6.17 * Gnome 2.16 * Beryl
    2 x Athlon MP 1900 * MSI K7D Master-L * 1024 MB ECC DDR333
    Hercules 9800XT 256 MB Ram * 1x 250 GB IDE
    Wasserkühlung

  • was soll ich denn da hochladen??
    das sind einfach nur drei div-blöcke die im ie6 mit nem weißen Spalt getrennt werden. Bei firefox und co. ist dieser Spalt nicht.
    Ubuntu Edgy * Kernel 2.6.17 * Gnome 2.16 * Beryl
    2 x Athlon MP 1900 * MSI K7D Master-L * 1024 MB ECC DDR333
    Hercules 9800XT 256 MB Ram * 1x 250 GB IDE
    Wasserkühlung

  • Pardon,

    wie gesagt, ich hatte es nicht ganz durchgelesen.
    Bei Bildern, hinter denen sich ein Link verbirgt, macht
    der IE gern einen Rand. Das border="0" würde aber in den
    <img>-Tag gehören.

    Es wäre wirklich einfacher, man müsste nicht immer
    hin und herscrollen.

    Die Reihenfolge soll wirklich so?
    <div class="leftUpLeft"></div>
    <div class="leftUpRight"> </div>
    <div class="leftUpMiddle">

    Zusammen mit relativen und absoluten Weiten
    bleibt da ein Rest.

    Siehe Michel

  • einziger, einzigster, am einzigsten ... :P

    Ich muss ehrlich sagen, ich find den code katastrofal. Aber auch so hab ich Probleme mich da durchzufuxen.

    Eine Idee: Hau mal dringend die Umbrüche weg. Der IE macht den altberüchtigten Fehler, dass er Umbrüche als Leerzeichen darstellt, auch wenn es sich um einfache Tags handelt.

    Beispiel:

    Quellcode

    1. <div>
    2. <img src="bla.gif" />
    3. <img src="bla.gif" />
    4. </div>

    So ziemlich jeder Browser stellt es korrekt da. Nur die IE Version kleiner 7 machen zwischen diesen beiden Bildern ein Leerzeichen, weil sich dort ein Umbruch befindet.

    Möglicherweise hilft das.