IE macht ne Lücke zwischen zwei DIV's...

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

  • IE macht ne Lücke zwischen zwei DIV's...

    Hallo,

    ich habe ein Problem was mich seit einigen Tagen richtig aufregt!
    Und zwar erstellt IE eine Lücke zwischen zwei DIVs...
    Hier mal der Quellcode von dem Abschnitt

    Quellcode

    1. <div class="header">
    2. <img src="../images/logo_acp.png" width="243" height="81" border="0" alt="">
    3. </div>
    5. <div class="header_abschnitt"></div>


    In der Klasse header_abschnitt steht folgendes drin:

    Quellcode

    1. .header_abschnitt {
    2. background-image: url('../../images/header_abschnitt.png');
    3. background-repeat: repeat-x;
    4. width: 100%;
    5. }


    Ich habe für IE und FF zwei verschiedene css aber ich verstehe nicht warum er da eine Lücke im IE macht und im FF net oo!

    Wenn ich das <div> vom header_abschnitt weg mache und mein navi DIV und content DIV dransetzte geht alles...

    Woran kann das liegen?

  • Welche DIVs sind denn eigentlich vom Problem betroffen? Klingt ja so als würde der Teilcode das ganze Problem gar nicht repräsentieren.

    Dann lass uns das entweder richtig abstrahieren:

    Quellcode

    1. <html>
    2. <head>
    3. <style type="text/css">
    4. div {
    5. border:1px solid #00ff00;
    6. }
    7. </style>
    8. </head>
    9. <body>
    11. <div>a</div>
    12. <div>b</div>
    14. </body>
    15. </html>
    Alles anzeigen


    ...oder im ganzen sehen. Dann können wir auch sicherstelen, dass alles HTML/XHTML valide ist.

  • Ich hätte jetzt knallhart behauptet, dass für das img-Tag ein display: block; fehlt, weil er ohne das Bild als Element eines Textes betrachtet und dann die Zeilenhöhe berücksichtigt. Vielleicht hilft es auch hier, wäre dann aber seltsam, warum es im FF funktioniert und im IE nicht.

  • Baby Herman schrieb:

    Ich hätte jetzt knallhart behauptet, dass für das img-Tag ein display: block; fehlt, weil er ohne das Bild als Element eines Textes betrachtet und dann die Zeilenhöhe berücksichtigt. Vielleicht hilft es auch hier, wäre dann aber seltsam, warum es im FF funktioniert und im IE nicht.


    Das mit der Zeilenhöhe hatte ich auch schon. Setz einfach nen leeren html-Kommentar rein, das sollte gehen (wenn's acuh nicht valide ist).

  • Also, nachdem ich so ne Pause vom coden gemacht habe weil mich dieses Problem so aufgeregt hat bin ich jetzt wieder hier und hab immer noch das Problem...leider lösen die sich ja net selbst :(!

    Ich hab jetzt mal kein Bild mehr als Trennbalken gemacht sondern mit einem div kasten xD!

    Trotzdem, hier schonmal der Quellcode der Datei und von den der CSS...

    Quellcode

    1. <html>
    2. <head>
    3. <title>{$ACP_SITE_TITLE}</title>
    4. <meta name="author" content="AquinasX">
    5. <link rel="stylesheet" type="text/css" href="templates/style.css" />
    6. <script src="templates/java.js" type="text/javascript"></script>
    7. <!--[if IE]>
    8. <script defer type="text/javascript" src="templates/js/pngfix.js"></script>
    9. <link rel="stylesheet" type="text/css" href="templates/style_ie.css" />
    10. <![endif]-->
    11. </head>
    12. <body>
    14. <div class="header">
    15. <img src="../images/logo_acp.png" width="243" height="81" border="0" alt="">
    16. </div>
    18. <div class="header_abschnitt"></div>
    20. <div>
    21. <div class="navi">
    22. <div class="navi_box_title">{$USER_LOGGED_IN}</div>
    23. </div>
    24. <div class="navi_abschnitt">
    25. </div>
    26. <div class="content_acp">meintext
    27. </div>
    28. </div>
    29. <br style="clear:both;" />
    31. </body></html>
    Alles anzeigen


    style.css

    Quellcode

    1. body {
    2. background-color: #FFFFFF;
    3. font-family: Verdana, Arial, Helvetica, sans-serif;
    4. font-size: 11px;
    5. color: #000000;
    6. padding: 0px;
    7. margin: 0px;
    8. }
    10. body.login {
    11. background-color: #78a6eb;
    12. font-family: Verdana, Arial, Helvetica, sans-serif;
    13. font-size: 11px;
    14. color: #000000;
    15. }
    17. .normalfont {
    18. font-family: Verdana, Arial, Helvetica, sans-serif;
    19. font-size: 11px;
    20. }
    22. .boldfont {
    23. font-family: Verdana, Arial, Helvetica, sans-serif;
    24. font-size: 11px;
    25. font-weight: bold;
    26. }
    28. .titlefont {
    29. font-family: Verdana, Arial, Helvetica, sans-serif;
    30. font-size: 22px;
    31. font-weight: bold;
    32. }
    34. .error {
    35. font-family: Verdana, Arial, Helvetica, sans-serif;
    36. font-size: 11px;
    37. font-weight: bold;
    38. color: red;
    39. }
    41. .accept {
    42. font-family: Verdana, Arial, Helvetica, sans-serif;
    43. font-size: 11px;
    44. font-weight: bold;
    45. color: green;
    46. }
    51. .title_head_out {
    52. border: 1px solid #000;
    53. }
    55. .title_head_in {
    56. color : #FFF;
    57. font-family : Verdana, Arial, Helvetica, sans-serif;
    58. font-size : 11px;
    59. font-weight : bold;
    60. border: 1px solid #FFF;
    61. background-image:url('../../images/title_bg.png');
    62. height: 23px;
    63. padding-top: 7px;
    64. padding-left: 5px;
    65. }
    67. .tableb {
    68. border: 1px solid #000000;
    69. background-color: #FFFFFF;
    70. font-family: Verdana, Arial, Helvetica, sans-serif;
    71. font-size: 11px;
    72. padding: 4px;
    73. }
    77. .header {
    78. text-align: left;
    79. background: url('../../images/header_bg.png') 243px;
    80. width: 100%;
    81. }
    83. .header_abschnitt {
    84. }
    86. .navi {
    87. text-align: center;
    88. background-image: url('../../images/navi_bg.png');
    89. width: 218px;
    90. float: left;
    91. height: 87.9%;
    92. }
    94. .navi_abschnitt {
    95. background-image: url('../../images/navi_abschnitt.png');
    96. padding-left: 9px;
    97. padding-top: 3px;
    98. float: left;
    99. height: 87.5%;
    100. }
    102. .navi_box_title {
    103. background-image: url('../../images/navi_title.png');
    104. width: 204px;
    105. height: 25px;
    106. }
    108. .content_acp {
    109. float: left;
    110. height: 87.5%;
    111. padding-top: 2px;
    112. }
    Alles anzeigen


    styleIE.css

    Quellcode

    1. body {
    2. background-color: #FFFFFF;
    3. font-family: Verdana, Arial, Helvetica, sans-serif;
    4. font-size: 11px;
    5. color: #000000;
    6. }
    8. body.login {
    9. background-color: #78a6eb;
    10. font-family: Verdana, Arial, Helvetica, sans-serif;
    11. font-size: 11px;
    12. color: #000000;
    13. text-align: center;
    14. }
    16. a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; }
    17. a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; }
    18. a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: underline; }
    19. a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; }
    21. .normalfont {
    22. font-family: Verdana, Arial, Helvetica, sans-serif;
    23. font-size: 11px;
    24. }
    26. .boldfont {
    27. font-family: Verdana, Arial, Helvetica, sans-serif;
    28. font-size: 11px;
    29. font-weight: bold;
    30. }
    32. .titlefont {
    33. font-family: Verdana, Arial, Helvetica, sans-serif;
    34. font-size: 22px;
    35. font-weight: bold;
    36. }
    38. .error {
    39. font-family: Verdana, Arial, Helvetica, sans-serif;
    40. font-size: 11px;
    41. font-weight: bold;
    42. color: red;
    43. }
    45. .accept {
    46. font-family: Verdana, Arial, Helvetica, sans-serif;
    47. font-size: 11px;
    48. font-weight: bold;
    49. color: green;
    50. }
    52. .div_login {
    53. width: 50%;
    54. padding-top: 25px;
    55. }
    57. .title_head_out {
    58. border: 1px solid #000;
    59. }
    61. .title_head_in {
    62. color : #FFF;
    63. font-family : Verdana, Arial, Helvetica, sans-serif;
    64. font-size : 11px;
    65. font-weight : bold;
    66. text-align : left;
    67. border : 1px solid #FFF;
    68. background-image:url('../../images/title_bg.png');
    69. height : 30px;
    70. padding-top : 7px;
    71. padding-left : 5px;
    72. }
    74. .header {
    75. text-align: left;
    76. background: url('../../images/header_bg.png') 243px;
    77. width: 100%;
    78. }
    81. .header_abschnitt {
    82. border-top: 1px solid #000;
    83. height: 5px;
    84. background-color: #FF7F00;
    85. border-bottom: 1px solid #000;
    86. }
    88. .header_abschnitt_zwei {
    89. border-top: 1px solid #000;
    90. border-bottom: 1px solid #000;
    91. background-color: #ECEADB;
    92. width: 100%;
    93. }
    95. .header_abschnitt_drei {
    96. border-top: 1px solid #FFFFFF;
    97. width: 100%;
    98. }
    100. .navi {
    101. text-align: center;
    102. background-image: url('../../images/navi_bg.png');
    103. width: 218px;
    104. float: left;
    105. }
    107. .navi_abschnitt {
    108. background-image: url('../../images/navi_abschnitt.png');
    109. padding-left: 9px;
    110. padding-top: 3px;
    111. float: left;
    112. }
    114. .navi_box_title {
    115. background-image: url('../../images/navi_title.png');
    116. width: 204px;
    117. height: 25px;
    118. }
    120. .content_acp {
    121. float: left;
    122. padding-top: 2px;
    123. }
    Alles anzeigen


    Da sind einige unnötigen Sachen drin, am besten einfach net beachten :S!

    Also das Problem ist ja wie gesagt der er ne bestimmte Höhe macht obwohl ich eine Höhe von 5px angegeben habe. Er macht trotzdem 10-15px (oder so)..

    Woran kann das liegen? Ich weiß da echt gar net mehr weiter =/