HP in IE9, Chrome und FF sieht gut aus, Opera und IE7&8 aber nicht

  • geschlossen

  • LesS
  • 2500 Aufrufe 2 Antworten

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

  • HP in IE9, Chrome und FF sieht gut aus, Opera und IE7&8 aber nicht

    Hallo Ihr lieben,

    nachdem Ihr Hier mir schon so gut geholfen habt, habe ich nun das Style nochmal umgearbeitet und jetzt gibts mal wieder unerwartete probleme ;)

    Wie der Titel schon sagt sollte die HP aussehen wie im aktuellen FF, Chrome oder in IE9. Da bin ich Glücklich. Nur sollte die HP jetzt auch in Opera und IE7+8 gut ausschauen und ich hab keine ahnung was ich da an meinem Code noch ändern soll das das passt (da ich ja wie gesagt noch ein Anfänger bin..)

    Hab das ganze schon durch den W3C Validator laufen lassen, aber groß gemeckert hat er nicht..

    Ich hoffe das der Code nicht so stümperhaft ist, dass man alles umschreiben muss (zumal es in FF und Chrome doch tut..)

    Das CSS ist hier:

    HTML-Quellcode

    1. @charset "utf-8";
    2. /* CSS Document */
    3. html, body, div, span, applet, object, iframe,
    4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    5. a, abbr, acronym, address, big, cite, code,
    6. del, dfn, em, font, ins, kbd, q, s, samp,
    7. small, strike, strong, sub, sup, tt, var,
    8. dl, dt, dd, ol, ul, li,
    9. fieldset, form, label, legend,
    10. table, caption, tbody, tfoot, thead, tr, th, td {
    11. border: 0;
    12. font-family: inherit;
    13. font-size: 100%;
    14. font-style: inherit;
    15. font-weight: inherit;
    16. margin: 0;
    17. outline: 0;
    18. padding: 0;
    19. vertical-align: baseline;
    20. }
    21. html {
    22. overflow-y: scroll;
    23. }
    24. body {
    25. background-image:url(marmor.jpg);
    26. height:100%;
    27. width:100%;
    28. margin:0;
    29. }
    30. span.H1 {
    31. font-family: 'Yanone Kaffeesatz', sans-serif;
    32. font-size:1.3em;
    33. }
    34. p{
    35. font-family: 'Karla', sans-serif;
    36. font-size:0.9em;
    37. }
    38. #p2{
    39. font-family: 'Karla', sans-serif;
    40. font-size:1em;
    41. }
    42. #langtext {
    43. width:600px;
    44. text-align:left;
    45. float:left;
    46. width: 20em;
    47. margin-left: 40px; padding: 0;
    48. }
    49. #maintext {
    50. width:300px;
    51. text-align:left;
    52. float:left;
    53. margin-left: 40px; padding: 0;
    54. }
    55. #rechtinhalt {
    56. width:300px;
    57. text-align:left;
    58. float:right;
    59. margin: 0 20px 0 0;
    60. }
    61. #rechtinhalt2 {
    62. width:300px;
    63. text-align:right;
    64. float:right;
    65. margin: 0 80px 0 0;
    66. }
    67. #mittinhalt
    68. {
    69. width:300px;
    70. text-align:left;
    71. float:right;
    72. margin: 0 20px 0 0;
    73. position:relative;
    74. margin-top: 5px;
    75. float:center;
    76. }
    77. #page {padding:0;background-color:#EFEFEF; background-repeat:repeat;
    78. -webkit-box-shadow: 0px 5px 10px #000000; /* webkit browser*/ -moz-box-shadow: 0px 5px 10px #000000; /* firefox */ box-shadow: 0px 5px 10px #000000;}
    79. #page_margins {
    80. width: 800px;
    81. min-width: 800px;
    82. margin:0 auto;
    83. text-align:left;
    84. }
    85. #nav_main ul {
    86. list-style: none;
    87. padding: 0;
    88. margin: 0;
    89. }
    90. #nav_main li {
    91. float: left;
    92. margin: 0 0.15em;
    93. }
    94. #nav_main li a {
    95. height: 0.5em;
    96. line-height: 2em;
    97. float: left;
    98. width: 10em;
    99. display: block;
    100. border: 0px;
    101. color: #0d2474;
    102. text-decoration: none;
    103. text-align: center;
    104. }
    105. /* Hide from IE5-Mac \*/
    106. #nav_main li a {
    107. float: none
    108. }
    109. /* End hide */
    110. #nav_main {
    111. font-family: 'Yanone Kaffeesatz', sans-serif;
    112. font-size:1.2em;
    113. width:80em;
    114. }
    115. hr.trenner {
    116. position:relative;
    117. color: #060;
    118. background-color: #060;
    119. border: 0;
    120. border-top: 0;
    121. border-bottom:0;
    122. border-left: 0;
    123. border-right: 0;
    124. height: 3px;
    125. margin: -6px 1 16px;
    126. padding: 0px;
    127. width: 90%;
    128. -moz-box-sizing: border-box;
    129. -moz-float-edge: margin-box;
    130. display: -moz-inline-stack;
    131. left:35px;
    132. top:0px
    133. }
    134. #footer {
    135. color:black;
    136. height:30px;
    137. }
    138. #footer_nav {
    139. float: right;
    140. font-size: 95%;
    141. margin-top: 4px;
    142. padding: 2px 28px 3px 3px;
    143. font-family: 'Yanone Kaffeesatz', sans-serif;
    144. }
    145. #footer a {
    146. color:#060;
    147. }
    148. #nav_main2 ul {
    149. list-style: none;
    150. padding: 0;
    151. margin: 0;
    152. position:absolute;
    153. margin-top: 0px;
    154. margin-left: 180px;
    155. }
    156. #nav_main2 li {
    157. float: left;
    158. margin: 0 0.15em;
    159. }
    160. #nav_main2 li a {
    161. height: 0.5em;
    162. line-height: 2em;
    163. float: left;
    164. width: 4em;
    165. display: block;
    166. border: 0px;
    167. color: #0d2474;
    168. text-decoration: none;
    169. text-align: center;
    170. }
    171. /* Hide from IE5-Mac \*/
    172. #nav_main2 li a {
    173. float: none
    174. }
    175. /* End hide */
    176. #nav_main2 {
    177. font-family: 'Yanone Kaffeesatz', sans-serif;
    178. font-size:1em;
    179. width:100em;
    180. }
    Alles anzeigen


    Und hier der Lang erwartete Link zu der Live-Version. Da ich nicht (wieder) möchte das bei der Domain-Google-Suche dieser Thread auftaucht, das ganze etwas umständlicher ;) :
    Foto wo der Link draufsteht..

    Ich hoffe Ihr könnt mir helfen, vielen Dank auch jezt schonmal im Vorraus :)

    Grüßle
    LesS

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

  • Ich glaube, da kann keiner wirklich helfen. Gerade der IE7 ist voller Fehler. Es kommt halt drauf an, wie gravierend die Unterschiede sind.
    (Ich hätte übrigens ein CMS als Basis genommen, da wird zumindest der html-Code automatisch richtig erstellt und oft werden in den Stylesheets die Browser-"Besonderheiten" per Conditional-Comments berücksichtigt. Meine Empfehlung: contao)

    Du solltest auch noch mal Rechtschreibung (Gross- und klein-Schreibung), Grammatik und Satzbau der Seiten kontrollieren.
    Eine Seite mit Fehlern wirkt nicht seriös.

    dein css validiert nicht - 7 Fehler
    87 #mittinhalt Ungültige Nummer : float center ist kein float-Wert : center
    90 #page Die Eigenschaft -webkit-box-shadow existiert nicht : 0 5px 10px #000000
    90 #page Die Eigenschaft -moz-box-shadow existiert nicht : 0 5px 10px #000000
    140 hr.trenner Ungültige Nummer : margin nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : -6px 1 16px
    143 hr.trenner Die Eigenschaft -moz-box-sizing existiert nicht : border-box
    144 hr.trenner Die Eigenschaft -moz-float-edge existiert nicht : margin-box
    145 hr.trenner Ungültige Nummer : display -moz-inline-stack ist kein display-Wert : -moz-inline-stack


    und dein HTML auch nicht.
    Solange Fehler im Quelltext sind, bist du darauf angewiesen, dass die Browser den fehlerhaften Teil korrekt interpretiert.
    Das machen die Browser unterschiedlich gut.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von rost ()

  • Vielen Dank auf jeden Fall schonmal für die Fehler,

    habe bisher im Validator nur die HP immer direkt eingegeben und nicht das CSS. Habe das nachgeholt und die von dir bereits geschriebenen Fehler gefunden..
    Alles was -moz-..... ist, ist speziell für den Firefox und wurde mir von verschiedenen HP-Schatten-Generatoren so vorgeschlagen (zb. von dem hier
    Also im Prinzip kann das doch dann kein Fehler sein, wenn das von den anderen Browsern einfach ignoriert wird, und bei FF eigentlich notwendig ist?

    Lässt man die speziellen Fälle jetzt bei den Fehlerergebnissen weg sieht das ganze schon besser aus.

    Und nur durch einen Codeschnippsel:
    display: inline-block; bei hr.trenner (also den grünen Balken)
    sieht das ganze einigermassen besser aus.
    Jetzt liegen die Grünen balken bei Opera und IE8+9 schonmal da wo sie sollten, IE7 zickt natürlich..
    Sie liegen zwar noch zum Teil ziemlich nahe an der Schrift, aber darum kümmere ich mich dann jetzt..

    Noch jemand eine Idee oder einen gravierenden Fehler von mir (wie jetzt z.b. der Schnippsel der alles verändert hat)?


    Und:
    Für den Inhalt und die Texte der HP bin ich (leider) nicht verantwortlich. Da rede ich sprichwörtlich gegen die Wand..

    Vielen Dank schonmal =)
    Grüßle
    LesS:hy: