CSS: IE 6 verdreifacht Div-Box Höhe trotz Angaben

  • CSS: IE 6 verdreifacht Div-Box Höhe trotz Angaben

    Hallo erstmal,
    ich code meine erste CSS Seite jetzt, also nicht wundern, wenn der Code miserabel ist.
    Hier zur Seite:
    klick mich

    In Opera und FireFox wird sie korrekt dargestellt, im IE wird die Box #menu statt 39px Höhe, mit Backgroundimage von 639x39px, mit 107px angezeigt, also das dreifache, dabei sind zweidrittel, also 78px untere Höhe leer.

    Hier der CSS Code:

    Quellcode

    1. /* WERTE FÜR ALLES */
    2. body {
    3. font-family:Verdana;
    4. font-size:10px;
    5. color:#e1e1e1;
    6. background-color:#7a7a7a;
    7. text-align:center;
    8. margin:0px;
    9. text-decoration: none;
    10. }
    12. /*DIE BOX DER GESAMTEN SEITE */
    13. #box {
    14. margin:0px auto;
    15. padding:0px;
    16. width:636px;
    17. height:670px;
    18. border:1px;
    19. }
    21. /* DER HEADER */
    22. #logo {
    23. background-image: url(logo.jpg);
    24. background-repeat:no-repeat;
    25. padding:0px;
    26. margin:0px;
    27. border:0px solid #000000;
    28. float:top;
    29. width:638px;
    30. height:220px;
    31. }
    33. /* TITLEBAR */
    34. #titlebar {
    35. padding:0px;
    36. margin:0px;
    37. border-right:1px solid #000000;
    38. border-left:1px solid #000000;
    39. float:top;
    40. width:636px;
    41. height:12px;
    42. background-color:#e1e1e1;
    43. }
    45. /* MENU PUNKTE */
    46. #menu {
    47. padding:0px;
    48. margin:0px;
    49. border-left:0px solid #000000;
    50. border-right:0px solid #000000;
    51. float:top;
    52. width:638px;
    53. height:39px;
    54. background-image:url(menu.jpg);
    55. background-repeat:no-repeat;
    56. }
    58. #links {
    59. padding:0px;
    60. margin:0px;
    61. border-left:0px solid #000000;
    62. width:68px;
    63. height:33px;
    64. float:left;
    65. }
    67. .button {
    68. text-decoration: none;
    69. line-height: 51px;
    70. padding:0px;
    71. margin:0px;
    72. border:0px solid #000000;
    73. width:100px;
    74. height:32px;
    75. float:left;
    76. text-align: right;
    77. }
    79. a.url, a.url:link, a.url:visited, a.url:active {
    80. color: #e1e1e1;
    81. text-decoration: none;
    82. }
    84. a.url:hover {color: #80ba4d;}
    86. #home {
    87. width:101px;
    88. height:32px;
    89. }
    91. .link_position {
    92. position: relative;
    93. right:5px;
    94. }
    96. #rechts {
    97. padding:0px;
    98. margin:0px;
    99. border-right:0px;
    100. width:69px;
    101. height:33px;
    102. float:right;
    103. }
    104. /* FREIRAUM */
    105. #space {
    106. padding:0px;
    107. margin:0px;
    108. border-left:1px solid #000000;
    109. border-right:1px solid #000000;
    110. background-color:#e1e1e1;
    111. width:636px;
    112. height:13px;
    113. }
    114. /* CONTENT BERREICH */
    115. #content {
    116. padding-left:5px;
    117. padding-right:5px;
    118. margin:0px;
    119. border-left:1px solid #000000;
    120. border-right:1px solid #000000;
    121. width:626px;
    122. height:371px;
    123. color:#000000;
    124. background-color:#e1e1e1;
    125. float:top;
    126. text-align: justify;
    127. }
    129. /* FOOTER */
    130. #footer {
    131. padding:0px;
    132. margin:0px;
    133. border:1px solid #000000;
    134. width:636px;
    135. height:12px;
    136. color:#000000;
    137. background-color:#e1e1e1;
    138. text-align: right;
    139. line-height:10px;
    140. }
    141. /* IMPRESSUM */
    142. .impressum, .impressum:link, .impressum:visited, .impressum:active {
    143. color: #6A6A6A;
    144. text-align: left;
    145. text-decoration: none;
    146. position: relative;
    147. right:342px;
    148. }
    150. .impressum, .impressum:hover {
    151. color: #000000;
    152. }
    153. /* BILDBOX */
    154. #img_box {
    155. padding:0px;
    156. margin-left:5px;
    157. background-image: url(img_box.jpg);
    158. width:212px;
    159. height:122px;
    160. float:right;
    161. position:relative; left:6px;
    162. }
    164. /* BILD */
    165. #img {
    166. padding:0px;
    167. margin-top:10px;
    168. width:202px;
    169. height:102px;
    170. float:right;
    171. background-color:#e1e1e1;
    172. background-image: url(img.jpg);
    173. }
    Alles anzeigen


    Ihr seit meine aller letzte Hoffnung hier, das ist das vierte Forum, in das ich mein Problem schreibe.
    In den anderen hat man mir nicht geholfen.

  • hi,

    hab mir jetzt noch keine details angeschaut, aber auf den ersten blick sind die kommentare in deinem html code falsch geschlossen:
    so sehen html kommentare aus: <!-- inhalt //-->

    ein scan mit http://validator.w3.org zeigt noch weitere fehler
    link: hier klicken

    korrigiere erstmal diese fehler, dann sehen wir weiter

    btw: das !important im css code hab ich vorher noch nie gesehen- scheint aber erlaubt zu sein ;)

  • habe es nochmal bearbeitet.
    Im Opera funktioniert es.
    Ich habe grade opera 9.01 installiert, und die Seite funktioniert damit wunderbar, ich weiss nicht was du hast.

    Und was meinst du mit "Works as Designed"?

    was soll eine Mindesthöhe bringen mit min-height:13px; in #space?

    Wäre schön, wenn jemand den Fehler findet.
    Danke

    EDIT: Wie kann man einen Absatz einer Liste <ul> unterdrücken?

  • Hier klicken

    Hier ist die Seite mit einem Menu in einer Liste.

    Quellcode

    1. /* WERTE FÜR ALLES */
    2. body {
    3. font-family:Verdana;
    4. font-size:10px;
    5. color:#e1e1e1;
    6. background-color:#7a7a7a;
    7. text-align:center;
    8. margin:0px;
    9. text-decoration: none;
    10. }
    12. /*DIE BOX DER GESAMTEN SEITE */
    13. #box {
    14. margin:0px auto;
    15. padding:0px;
    16. width:636px;
    17. height:670px;
    18. border:1px;
    19. }
    21. /* DER HEADER */
    22. #logo {
    23. background-image: url(logo.jpg);
    24. background-repeat:no-repeat;
    25. padding:0px;
    26. margin:0px;
    27. border:0px solid #000000;
    28. float:top;
    29. width:638px;
    30. height:220px;
    31. }
    33. /* TITLEBAR */
    34. #titlebar {
    35. padding:0px;
    36. margin:0px;
    37. border-right:1px solid #000000;
    38. border-left:1px solid #000000;
    39. float:top;
    40. width:636px;
    41. height:12px;
    42. background-color:#e1e1e1;
    43. }
    45. /* MENU PUNKTE */
    46. #menu {
    47. padding:0px;
    48. margin:0px;
    49. border-left:0px solid #000000;
    50. border-right:0px solid #000000;
    51. border:0px solid #000000;
    52. width:638px;
    53. height:39px;
    54. background-image:url(menu.jpg);
    55. background-repeat:no-repeat;
    56. }
    58. #links {
    59. padding:0px;
    60. margin:0px;
    61. border-left:0px solid #000000;
    62. width:68px;
    63. height:33px;
    64. float:left;
    65. }
    67. .button {
    68. text-decoration: none;
    69. line-height:0px;
    70. padding:0px;
    71. margin:0px;
    72. border:0px solid #000000;
    73. width:100px;
    74. height:33px;
    75. float:left;
    76. text-align: right;
    77. }
    79. .link-position {
    80. line-height:0px;
    81. padding-right:5px;
    82. }
    84. a.url, a.url:link, a.url:visited, a.url:active {
    85. color: #e1e1e1;
    86. text-decoration: none;
    87. }
    89. a.url:hover {color: #80ba4d;}
    91. ul {
    92. list-style-type:none;
    94. }
    96. #home {
    97. width:101px;
    98. }
    100. .link_position {
    101. position: relative;
    102. right:5px;
    103. }
    105. #rechts {
    106. padding:0px;
    107. margin:0px;
    108. border-right:0px;
    109. width:69px;
    110. height:33px;
    111. float:right;
    112. }
    113. /* FREIRAUM */
    114. #space {
    115. padding:0px;
    116. margin:0px;
    117. border-left:1px solid #000000;
    118. border-right:1px solid #000000;
    119. background-color:#e1e1e1;
    120. width:636px;
    121. height:13px;
    122. }
    123. /* CONTENT BERREICH */
    124. #content {
    125. padding-left:5px;
    126. padding-right:5px;
    127. margin:0px;
    128. border-left:1px solid #000000;
    129. border-right:1px solid #000000;
    130. width:626px;
    131. height:371px;
    132. color:#000000;
    133. background-color:#e1e1e1;
    134. float:top;
    135. text-align: justify;
    136. }
    138. /* FOOTER */
    139. #footer {
    140. padding:0px;
    141. margin:0px;
    142. border:1px solid #000000;
    143. width:636px;
    144. height:12px;
    145. color:#000000;
    146. background-color:#e1e1e1;
    147. text-align: right;
    148. line-height:10px;
    149. }
    150. /* IMPRESSUM */
    151. .impressum, .impressum:link, .impressum:visited, .impressum:active {
    152. color: #6A6A6A;
    153. text-align: left;
    154. text-decoration: none;
    155. position: relative;
    156. right:342px;
    157. }
    159. .impressum, .impressum:hover {
    160. color: #000000;
    161. }
    162. /* BILDBOX */
    163. #img_box {
    164. padding:0px;
    165. margin-left:5px;
    166. background-image: url(img_box.jpg);
    167. width:212px;
    168. height:122px;
    169. float:right;
    170. position:relative; left:6px;
    171. }
    173. /* BILD */
    174. #img {
    175. padding:0px;
    176. margin-top:10px;
    177. width:202px;
    178. height:102px;
    179. float:right;
    180. background-color:#e1e1e1;
    181. background-image: url(img.jpg);
    182. }
    Alles anzeigen


    Die Liste scheint in Opera einen Absatz zu machen, in dem das Hintergrundbild nach unten verschoben wird, obwohl es in einem anderen Div-Container ist.
    Ich kapiers nicht mehr. Bald blick ich nicht mehr durch.

  • sorry, wenn ich so penibel bin.
    aber falscher html code führt zu einer falschen anzeige

    und so lange der html code noch falsch ist, hat die arbeit am css gar keinen sinn

    ein <a> tag direkt unterhalb vom <ul> tag gibts halt nicht.. selbes problem beim <div>
    das muss alles ins <li> rein

    Quellcode

    1. <ul>
    2. <a class="url" href="http://kenubi.milten.lima-city.de/kenubis_folder/unzip_code/code/html_datei.htm">
    4. <div id="home" class="button">
    5. <li><span class="link-position">Home</span></li>
    6. </div>
    7. </a>
    8. ...
    9. </ul>

  • warum brauchst denn überhaupt das div mit der id "home"?
    und wozu eigentlich eine aufzählungsliste?

    also wenn ich mehrere spalten nebeneinander machen will, dann nehm ich meistens eine tabelle

    könnte es vielleicht sein, dass du das <div> nur im <a> hast, damit die klickfläche größer ist???

    dann wäre das hier ne alternative

    Quellcode

    1. <a href="#" style="display: block;width:100px;height:40px;border:1px solid #a9a9a9;">testlink</a>

  • Hier neue Seite

    Wow, danke für den Tip !!
    Jez hat meine Seite keine Fehler mehr :D und funktioniert sogar aufm IE wie in Opera!

    Hab deinen Code eingefügt und alles hat wunderbar geklappt.

    Hier der CSS Code:

    Quellcode

    1. /* WERTE FÜR ALLES */
    2. body {
    3. font-family:Verdana;
    4. font-size:10px;
    5. color:#e1e1e1;
    6. background-color:#7a7a7a;
    7. text-align:center;
    8. margin:0px;
    9. text-decoration: none;
    10. }
    12. /*DIE BOX DER GESAMTEN SEITE */
    13. #box {
    14. margin:0px auto;
    15. padding:0px;
    16. width:636px;
    17. height:670px;
    18. border:1px;
    19. }
    21. /* DER HEADER */
    22. #logo {
    23. background-image: url(logo.jpg);
    24. background-repeat:no-repeat;
    25. padding:0px;
    26. margin:0px;
    27. border:0px solid #000000;
    28. float:top;
    29. width:638px;
    30. height:220px;
    31. }
    33. /* TITLEBAR */
    34. #titlebar {
    35. padding:0px;
    36. margin:0px;
    37. border-right:1px solid #000000;
    38. border-left:1px solid #000000;
    39. float:top;
    40. width:636px;
    41. height:12px;
    42. background-color:#e1e1e1;
    43. }
    45. /* MENU PUNKTE */
    46. #menu {
    47. padding:0px;
    48. margin:0px;
    49. border-left:0px solid #000000;
    50. border-right:0px solid #000000;
    51. float:top;
    52. width:638px;
    53. height:39px;
    54. background-image:url(menu.jpg);
    55. background-repeat:no-repeat;
    56. }
    58. #links {
    59. padding:0px;
    60. margin:0px;
    61. border-left:0px solid #000000;
    62. width:68px;
    63. height:33px;
    64. float:left;
    65. }
    67. .url {
    68. text-decoration: none;
    69. border:0px solid #000000;
    70. width:100px;
    71. height:33px;
    72. float:left;
    73. text-align: right;
    74. }
    76. a.url, a.url:link, a.url:visited, a.url:active {
    77. color: #e1e1e1;
    78. text-decoration: none;
    79. }
    81. a.url:hover {color: #80ba4d;}
    83. #home {width:101px;}
    85. .link_position {
    86. position: relative;
    87. right:5px;
    88. top:20px;
    89. }
    91. #rechts {
    92. padding:0px;
    93. margin:0px;
    94. border-right:0px;
    95. width:69px;
    96. height:33px;
    97. float:right;
    98. }
    99. /* FREIRAUM */
    100. #space {
    101. padding:0px;
    102. margin:0px;
    103. border-left:1px solid #000000;
    104. border-right:1px solid #000000;
    105. background-color:#e1e1e1;
    106. width:636px;
    107. height:13px;
    108. }
    109. /* CONTENT BERREICH */
    110. #content {
    111. padding-left:5px;
    112. padding-right:5px;
    113. margin:0px;
    114. border-left:1px solid #000000;
    115. border-right:1px solid #000000;
    116. width:626px;
    117. height:371px;
    118. color:#000000;
    119. background-color:#e1e1e1;
    120. float:top;
    121. text-align: justify;
    122. }
    124. /* FOOTER */
    125. #footer {
    126. padding:0px;
    127. margin:0px;
    128. border:1px solid #000000;
    129. width:636px;
    130. height:12px;
    131. color:#000000;
    132. background-color:#e1e1e1;
    133. text-align: right;
    134. line-height:10px;
    135. }
    136. /* IMPRESSUM */
    137. .impressum, .impressum:link, .impressum:visited, .impressum:active {
    138. color: #6A6A6A;
    139. text-align: left;
    140. text-decoration: none;
    141. position: relative;
    142. right:342px;
    143. }
    145. .impressum, .impressum:hover {
    146. color: #000000;
    147. }
    148. /* BILDBOX */
    149. #img_box {
    150. padding:0px;
    151. margin-left:5px;
    152. background-image: url(img_box.jpg);
    153. width:212px;
    154. height:122px;
    155. float:right;
    156. position:relative; left:6px;
    157. }
    159. /* BILD */
    160. #img {
    161. padding:0px;
    162. margin-top:10px;
    163. width:202px;
    164. height:102px;
    165. float:right;
    166. background-color:#e1e1e1;
    167. background-image: url(img.jpg);
    168. }
    Alles anzeigen


    Super vielen dank, hab schon gedacht, eine neue Navi zu machen ;)

    Und noch ne frage:
    Kann man Texte in einer externen Datei in den Content einfügen?
    Und da es meine erste Seite ist, die überhaupt schonmal funktioniert,
    muss ich jetzt für jede mögliche Seite, also Home, About, Works, Guestbook und Contact eine zusätzliche Html machen mit dem Inhalt?[/url]