IE zeigt Homepage nicht richtig an


  • Joacheg
  • 990 Aufrufe 10 Antworten

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

  • IE zeigt Homepage nicht richtig an

    Hallo liebe Community,
    ich bastle zur zeit an einer kleinen Homepage, die langsam vom Design her das Endstadium erreicht, sowohl im Firefox als auch in Opera wird das ganze angezeigt wie ich will, nur IE macht wie immer Probleme. Leider habe ich zu wenig Ahnung von HTML um zu wissen welche Tags dieses Problem verursachen.

    Die Site wäre hier zu finden.

    Wer gerade nicht beide Browser zur Hand hat, findet hier 2 Screens:

    Internet Explorer 7
    Firefox 2

    Wie man hoffentlich sehen kann, zieht der IE die "divs" auseinander, vielleicht kann mir bitte jemand sagen wie ich das ändern kann.

    Vielen Dank dafür!

    PS: Wer will kann das Design auch gerne bewerten, bin offen für Kritik!

  • mal ne frage....

    was sollen die / am ende deiner img tags!?

    <img width="980" height="10" border="0" alt="" src="right-top.png"/>


    die sind unnötig....

    mfg michi


    EDIT:

    SO... jetzt hab ich´s... beim table zu menu2 muss noch die breite rein!

    <table width="980" class="menu2">



    das gleiche dann noch beim 2. table ;)

    EDIT2:

    oder auch net... :(

  • Das / ist da schon richtig, er macht ja XHTML anscheinend

    SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML

    Warum mischt du Tabellen mit Divs?

    #php/QuakeNet Tutorial - 3-Spalten-Layout

    PS:
    CSS sollte man auslagern...

    EDIT2:
    @michi

    dazu hat er ja normalerweise die div Eigenschaften... er sollte wen dann halt nur divs verwenden und keine Tabellen
    [SIZE=1]
    Was ist der Unterschied zwischen einem U-Boot und MS Windows?
    Keiner, sobald man ein Fenster aufmacht, fangen die Probleme an
    Alle Tips von mir ohne Gewähr und auf eigenes Risiko !!
    UP1 UP2 UP3[/SIZE][SIZE=1]
    [/SIZE]

  • Das kann was mit dem Prob zu tun haben, besonders nach dem EDIT Teil von Michi...

    Wirds den richtig wenn du die Angaben in die Tabellen reinmachst?

    CSS Teil

    Quellcode

    1. @charset "UTF-8";
    3. #banner {
    4. height: 100px;
    5. background-image: url(ic_laengs.jpg);
    6. }
    7. #menue {
    8. height: 500px;
    9. width: 20%;
    10. float: left;
    11. line-height: 1.5;
    12. /*background-image: url(ic_hoch.jpg);
    13. background-repeat:no-repeat;*/
    14. }
    15. #inhalt {
    16. width: 79%;
    17. float:left;
    18. }
    Alles anzeigen


    index.html

    Quellcode

    1. <div id="root">
    3. <div id="menue">
    4. Hier steht das Banner (oben drüber)
    5. </div>
    7. <div id="menue">
    8. Hier steht das Menü (links )
    9. </div>
    11. <div id="inhalt">
    12. Hier steht der Inhalt
    13. </div>
    16. </div>
    Alles anzeigen


    So hab ich das bei mir drin
    [SIZE=1]
    Was ist der Unterschied zwischen einem U-Boot und MS Windows?
    Keiner, sobald man ein Fenster aufmacht, fangen die Probleme an
    Alle Tips von mir ohne Gewähr und auf eigenes Risiko !!
    UP1 UP2 UP3[/SIZE][SIZE=1]
    [/SIZE]

  • Ich hab mich jetz einfach mal dran gemacht das Kernproblem als einzelne HTML-Datei zu schreiben, einmal mit HTML, einmal mit Divs:

    Klick mich!

    Beim IE wird bei den Divs und bei Tabellen alles auseinandergeschoben.

    Dass muss doch ganz einfach zu lösen sein, oder?

    Hat keiner eine Lösung für mich? :( :(

  • Was passiert wenn du die Tabellen/Divs auf zB 1200 verbreiterst...

    Vlt packt der IE da noch irgendwo Ränder dazu...
    [SIZE=1]
    Was ist der Unterschied zwischen einem U-Boot und MS Windows?
    Keiner, sobald man ein Fenster aufmacht, fangen die Probleme an
    Alle Tips von mir ohne Gewähr und auf eigenes Risiko !!
    UP1 UP2 UP3[/SIZE][SIZE=1]
    [/SIZE]

  • Problem mit HTML - IE zeigt DIV oder Tabellen falsch an

    habe Deine beiden Screenshots angesehen und das Problem nur dort erkannt.
    Der link selber auf die Seite bzw.. auf die kleine Testseite (DIV und Tablelle) wird in meinem IE einwandfrei angezeigt. (Bildschirmauflösungsproblem ?)
    Leider kann ich den Quellcode dieser Seiten nicht anschauen, so kann ich auch keinen etwaigen Fehler suchen...
    Der Ansatz von DOCean scheint mir gut;
    den Tabellen-Einträgen eine prozentuale Breite mitgeben zB. oder eine feste Breite falls gewünscht (dann meist Scrollbarn horizontal, aber alles dargestellt...)

  • Grundsätzlich ist zu sagen, das auch <div> zu HTML gehört.

    Aber wie andere schon richtig angedeutet haben, sollte man auf Tabellen als Designkrücke verzichten, da man heutzutage auf CSS zurückgreifen kann.

    Eine Lösung wäre, wenn du den Leerraum zwischen den <td> und den <img entfernst. Also:
    <td><img .../></td>


    Außerdem müsstest du der Tabelle noch die "border-collapse: collapse;" Definition verpassen, dann sollte da kein Abstand mehr sein.

    Allerdings enthält dein Quelltext noch einige Fehler.
    • <style> braucht eine type=""-Angabe
    • width="" hat keine Maßeinheit 'px', entweder ohne, dann sind es Pixelwerte oder % als Maßeinheit
    • Misch nicht HTML und XHTML, wenn du schon leere Elemente schließt, dann alle (siehe <br>, <img>)
    • <br> darf nicht in <table> stehen



    Alternativ biete auch ich dir meinen Lösungsweg an:

    HTML

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6. <link type="text/css" rel="stylesheet" media="screen" href="screen.css">
    8. <title>Page Title</title>
    9. </head>
    11. <body>
    12. <div id="header">
    13. <h1>Page<em>Name</em></h1>
    14. </div>
    16. <div id="menu">
    17. <ul>
    18. <li class="current"><a href="#">Current</a></li>
    19. <li><a href="#">Site 1</a></li>
    20. <li><a href="#">Site 2</a></li>
    21. <li><a href="#">Site 3</a></li>
    22. <li style="float: none;"><a href="#">Site 4</a></li>
    23. </ul>
    24. </div>
    26. <div id="main">
    27. <ul id="sidebar">
    28. <li>Diese Liste</li>
    29. <li>kann dein</li>
    30. <li>Nebenmenü werden.</li>
    31. </ul>
    33. <div id="content">
    34. <h2>Tolle Überschrift</h2>
    35. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ultrices leo ullamcorper ipsum.
    36. Nam dictum adipiscing velit. Sed eget ligula id lacus dapibus facilisis. Donec dapibus ultrices
    37. arcu. Curabitur non dolor. Pellentesque rhoncus tellus. Integer nonummy. Nullam quam nunc,
    38. ultricies vel, sagittis in, auctor sed, mauris. Pellentesque habitant morbi tristique senectus et
    39. netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per
    40. conubia nostra, per inceptos hymenaeos. Donec nonummy elementum libero. Donec mattis libero sed
    41. sem. Ut et dui. Suspendisse potenti. Duis felis. Vestibulum dictum, orci nec auctor facilisis,
    42. ipsum pede pharetra felis, a posuere eros ante sit amet sem. Sed a nibh. Praesent in nibh a lectus
    43. aliquam convallis.</p>
    44. </div>
    45. </div>
    46. </body>
    47. </html>
    Alles anzeigen


    CSS

    Quellcode

    1. * {
    2. margin: 0;
    3. padding: 0;
    4. }
    6. body {
    7. background: #ADCFF2 url('http://v2.waltraud-spaeth.de/back2.jpg') repeat-x;
    8. margin-left: auto;
    9. margin-right: auto;
    10. width: 980px;
    11. }
    15. #header {
    16. background: url('http://v2.waltraud-spaeth.de/head.png') no-repeat center center;
    17. height: 100px;
    18. margin: 1em 0;
    19. }
    21. #header h1 {
    22. color: #ADCFF2;
    23. font-size: 2.8em;
    24. font-weight: normal;
    25. line-height: 100px;
    26. padding-right: .5em;
    27. text-align: right;
    28. }
    30. #header h1 em {
    31. color: #76B0EC;
    32. font-style: normal;
    33. }
    37. #menu {
    38. background: url('http://v2.waltraud-spaeth.de/right-top.png') no-repeat top;
    39. padding-top: 10px;
    40. }
    42. #menu ul {
    43. background: url('http://v2.waltraud-spaeth.de/right-bottom.png') no-repeat bottom;
    44. padding-bottom: 10px;
    45. list-style: none;
    46. }
    48. #menu ul li {
    49. background: #000000;
    50. float: left;
    51. padding: 1em 0;
    52. width: 20%;
    53. }
    56. #menu ul li a {
    57. background: #202931;
    58. border: 1px solid #AFD6F4;
    59. color: #ffffff;
    60. display: block;
    61. font-family: Verdana, sans-serif;
    62. font-size: .8em;
    63. margin: 0 5%;
    64. text-align: center;
    65. text-decoration: none;
    66. text-transform: uppercase;
    67. }
    69. #menu ul li a:hover,
    70. #menu ul li.current a {
    71. background: #AFD6F4;
    72. border: 1px solid #FFFFFF;
    73. color: #000000;
    74. }
    78. #main {
    79. background: url('http://v2.waltraud-spaeth.de/right-top.png') no-repeat top;
    80. color: #ffffff;
    81. margin: 1em 0;
    82. padding-top: 10px;
    83. }
    86. #sidebar {
    87. float: right;
    88. width: 190px,
    89. }
    91. #content {
    92. background: #444444 url('http://v2.waltraud-spaeth.de/right-bottom.png') no-repeat bottom;
    93. padding-bottom: 10px;
    94. padding-right: 200px;
    95. }
    Alles anzeigen


    ist aber nicht getestet, allerdings hab ich keine Formatierungsinfos im HTML bzw. Designbilder.


    Naja, bei Fragen... einfach ruas oder PM an mich.

    PS: Nein, man designed auch nicht mit <div> :würg:

  • Vielen dank für die Antworten!!!

    Lustigerweise hat es tatsächlich geholfen den Zeilenumbruch bei <td> und <div> rauszumachen. Ich bin jetzt erstmal froh dass es so aussieht wie es aussehen soll, ich werde mich aber bestimmt demnächst durch deb obrigen Quelltext durchwühlen und die Site dann ohne Tabellen bauen, ich mach das eben nur weil ichs noch nicht besser kann^^

    Ich danke euch allen für die schnelle un kompetente Hilfe! :) :)

    Hier can CECLOSED werden.