Daniel_: Probleme mit der Darstellung beim Internetexplorer

SELF-Forum

Probleme mit der Darstellung beim Internetexplorer

Daniel_ Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo,
Ich bin gerade dabei eine Website zu schreiben.Dafür habe ich bisher ein layout entworfen und dann eine weile gebraucht, bis dieses sowohl bei firefox als auch beim internetexplorer richtig angezeigt wurde.
jetzt habe ich aber vor kurzem festgestellt, dass der internetexplorer mein layout auseinander reißt, wenn die texte auf der seite lang(also viele zeilen) sind. Firefox tut dies nicht.
Ich habe jetzt schon eine ganze weile versucht das problem zu lösen aber ich bekomme es einfach nicht hin..
Vielleicht kennt ihr eine Lösung?

Hier ist ein Link zu einem Beispiel:
http://www.mtv-borsum.de/ogrein/test1.php

Es wäre sehr nett wenn mir jemand weiterhelfen würde
viele liebe grüße
Daniel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit der Darstellung beim Internetexplorer

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,
    warum verwendest Du eine Layout-Tabelle und dazu noch eine invalide?

    freundliche Grüße
    Ingo

    --
    [barrierefrei Ingo Webdesign » Suchmaschinenoptimierung | em? | IE7 - Bugs]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Probleme mit der Darstellung beim Internetexplorer

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Daniel_,

    Du verwendest eine Tabelle, um Deine Seite visuell zu strukturieren. Das ist wahrscheinlich Dein Hauptproblem. Soweit ich mich erinnere vergrößert der Internet-Explorer die Breite der Tabelle gerne einmal, wenn der Inhalt darin anscheinend mehr Platz braucht. Und wahrscheinlich ist genau das Dein Problem.

    http://www.mtv-borsum.de/ogrein/test1.php

    Genau hier versuchst Du eigentlich etwas unmögliches. Du verlangst, dass in einer Tabellenzeile (die eigentlich eine durchgehend gleiche Höhe hat!) eine Zelle sich gigantisch nach unten ausdehnen soll, während alle anderen Zellen ihre 40px Höhe beibehalten. Von der Idee einer Tabelle her ist das ein gigantischer Unsinn. Dass der IE sich hier weitestgehend an Deine Vorgaben hält, ist eigentlich bemerkenswert!

    Ich habe im IE auf der Seite

    http://www.mtv-borsum.de/ogrein/test.php

    einmal folgenden Code in die Adresszeile eingegeben, um zu testen, ob meine Vermutung sich bestätigt: javascript:alert(document.getElementsByTagName("table")[0].getElementsByTagName("tr")[1].getElementsbyTagName("td")[2].innerHTML);

    Prompt wird Dein DIV-Element mit dem ganzen Seiteninhalt durch ein kurzes Wort "test" ersetzt und prompt schnalzt auch Dein "Navigation"-Feld in seine gewollten Ausmaße zurück.

    Fazit: Deine Layouttabelle ist absolut nicht das geeignete Mittel, um das von Dir gewünschte Layout zu erreichen. Du möchtest Dich eingehender mit [ref:self812;css/layouts.htm@title=CSS-basierten Layouts] beschäftigen.

    Dazu möchtest Du Dich darum kümmern, dass Dein Code semantischer wird. Was soll dieses "semanitsch" nun bedeuten? Das bedeutet, dass Du für die Inhalte genau die HTML-Elemente wählst, die die Natur dieser Inhalte am treffendsten wiedergeben. Zum Beispiel ist eine Navigation eine Liste (<ul> oder gar <ol>) von Links (<li>-Elemente). Du machst das bisher anders.

    Weitergehend möchte ich Dir empfehlen, noch strenger zu trennen, ob ein Bild nun ein Inhaltselement (Grafik zur Veranschaulichung, Foto) ist, oder nur ein "Designelement" zur Ausschmückung Deines Layouts. In diesem Zusammenhang sind die rötlichen Quadrate vor Deinen Links eben keine <img>-Elemente, sondern Hintergrundbilder, die Du Deinen Links verpassen kannst. Im Falle einer [ref:self812;css/layouts/navigationsleisten.htm@title=sinnvoll erstellten Navigation] kannst Du die Hintergrundbilder den <li>-Elementen verpassen.

    Wie Du nun Deine "Kästen" in Reih' und Glied bringst, das können wir hier gerne wieder diskutieren, wenn Du Deine Seiten-Struktur umgemodelt hast. Ich mache hier für Dich einmal den Anfang, basierend auf dem Code der Seite test.php. Code ist im "Anhang"... weiter bin ich in der kurzen Zeit jetzt nicht gekommen.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta name="description" content="Die Startseite des MTV Borsum">
        <meta name="keywords" content="MTV, MTV Borsum, Aktuelles">
        <meta name="author" content="Daniel Lodahl">
        <title>MTV Eintracht Borsum: Home</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="shortcut icon" href="favicon.ico">
        <style type="text/css">
            /*
                Dieser Code gehört in eine externe CSS-Datei!
                Die Pfade zu Hintergrundbildern müssen dann entsprechend
                relativ zu dieser Datei sein...
            */
            body {
                margin: 0px;
                padding: 0px;
                background: #ffffff;
                font-family: Arial, sans-serif;
            }

            #seite {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/4.jpg) right repeat-y;
            }

            #header {
                margin: 0px;
                padding: 0px;
                height: 90px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/header_back.jpg) repeat-x;
            }

            #header span {
                float: right;
                width: 199px;
                height: 90px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/headers/home.jpg) no-repeat;
            }

            #header #logo {
                float: left;
                width: 479px;
                height: 90px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/logo.jpg) no-repeat;
            }

            #inhalt {
                border: 1px solid transparent;
                border-right: none;
                margin: 0px 0px 0px 200px;
                padding: 0px 36px 0px 0px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/2.jpg) right top no-repeat;
            }

            #navi {
                width: 196px;
                height: 100%;
                position: absolute;
                top: 90px;
                left: 0px;
                font-size: 80%;
                background: #ffdcec url(http://www.mtv-borsum.de/ogrein/images/layout/1.jpg) right top no-repeat;
            }

            #navi h2 {
                margin: 0;
                padding: 0px 0px 0px 1px;
                height: 40px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/navigation.jpg) left top no-repeat;
                font-size: 1px;
                color: #d77d7c;
            }

            #navi ul {
                position: relative;
                top: -40px;
                margin: 40px 0px 0px 0px;
                padding: 2px 41px 0px 5px;
                list-style: none;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/3.jpg) right repeat-y;
            }

            #navi ul li {
                padding: 3px 0px;
            }

            #navi ul li form,
            #navi ul li ul {
                position: static;
                margin: 0px auto;
                padding: 1px 0px;
                border: 1px solid #8a8a8a;
                background: #ffffff;
            }

            #navi ul li ul li {
                padding: 0px 0px 0px 25px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/navdot.jpg) 9px center no-repeat;
            }

            #navi ul li ul li a {
                text-decoration: none;
                color: #d30505;
            }

            #navi ul li ul li a:hover {
                text-decoration: underline;
                color: #ff8080;
            }

            #navi ul li form p {
                margin: 0px;
                padding: 1px;
                text-align: right;
            }

            #navi ul li form label {
                float: left;
            }

            #footer {
                position: relative;
                bottom: 0px;
                width: 100%;
                height: 30px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/footer_back.jpg) repeat-x;
            }

            #footer span {
                float: right;
                height: 30px;
                width: 200px;
                background: url(http://www.mtv-borsum.de/ogrein/images/layout/footer.jpg) no-repeat;
            }
        </style>
        <!--[if IE]>
            <style type="text/css">
                /* Für den IE... Auch das hier in eine externe Datei auslagern! */
                #navi ul li ul {
                    margin: 0px;
                }
            </style>
        <![endif]-->
    </head>
    <body>
        <div id="seite">
            <div id="header"><span id="logo"></span><span></span></div>
            <div id="inhalt">
                <h1>Überschrift</h1>
                <p>Text...</p>
                <p>
                    aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                    aaa<br>
                </p>
            </div>
            <div id="navi">
                <h2>Navigation</h2>
                <ul>
                    <li>Allgemein
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Trainingszeiten</a></li>
                            <li><a href="#">Gallerie</a></li>
                        </ul>
                    </li>
                    <li>Abteilungen
                        <ul>
                            <li><a href="#">Judo/Ju-Jutsu</a></li>
                            <li><a href="#">Leichtathletik</a></li>
                            <li><a href="#">Seniorensport</a></li>
                            <li><a href="#">Tennis</a></li>
                            <li><a href="#">Turnen</a></li>
                            <li><a href="#">Volleyball</a></li>
                            <li><a href="#">Wandern</a></li>
                        </ul>
                    <li>Über uns
                        <ul>
                            <li><a href="#">Vorstand</a></li>
                            <li><a href="#">Übungsleiter</a></li>
                            <li><a href="#">Formulare</a></li>
                            <li><a href="#">Impressum</a></li>
                        </ul>
                    </li>
                    <li>Member
                        <form action="index.php" method="post">
                            <p><label for="lg_name">Name: </label><input name="lg_name" id="lg_name" type="text" size="10" maxlength="20"></p>
                            <p><label for="lg_pass">Kennwort: </label><input name="lg_pass" id="lg_pass" type="password" size="10" maxlength="20"></p>
                            <p><input type="submit" id="einloggen" value="Einloggen"></p>
                        </form>
                    </li>
                </ul>
            </div>
            <div id="footer"><span></span></div>
        </div>
    </body>
</html>
    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit der Darstellung beim Internetexplorer

      Daniel_ Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Felix,
      Ich habe auf deinem Anfang aufgebaut und die Seite, soweit mir möglich, mit css formatiert. Hab heute eine ganze Menge über css dazugelernt ;) aber trotzdem komme ich am ende genau zu dem Problem, das mich auch dazu bewegt hat die Seite mit einer Tabelle zu formatieren. Aber dazu später mehr. Erstmal habe ich zwei Fragen zu deinem Code:

      #inhalt {  
  border: 1px solid transparent;  
  border-right: none;  
  margin: 0px 0px 0px 200px;  
  padding: 0px 36px 0px 0px;  
  background: url(http://www.mtv-borsum.de/ogrein/images/layout/2.jpg) right top no-repeat;  
}

      Warum ziehst du eine unsichtbare Linie um den Inhaltsbereich? Die sorgt nämlich im Firefox für Probleme, da dann das Hintergrundbild an der Stelle abgeschnitten wird und der "Untergrund" durchguckt.
      Ich hab die Linie entfernt, was dazu führte, dass das Hintergrundbild etwa um die Hälfte seiner Höhe nach unten verschoben wurde. Sowohl bei FF als auch beim IE. Um das zu verhindern, musste ich das padding wie folgt ändern...
      padding: 1px 36px 1px 1px;

      Und noch eine Frage hierzu:

      #navi ul {  
  position: relative;  
  top: -40px;  
  margin: 40px 0px 0px 0px;  
  padding: 2px 41px 0px 5px;  
  list-style: none;  
  background: url(http://www.mtv-borsum.de/ogrein/images/layout/3.jpg) right repeat-y;  
}

      Warum gehst du mit der Position erst um 40 nach oben und dann mit margin wieder nach unten? Ich hab das einfach mal durch ein "margin: 0px;" ersetzt;)

      Und nun zu meinem Problem. Wenn du dir die Seite ansiehst(http://www.mtv-borsum.de/ogrein/test.htm), wirst du feststellen, dass sie unten etwas zerzaust aussieht. Und vor allem, dass sie über die Anzeigefläche hinausgeht, obwohl sie theoretisch keinen Inhalt hat, der das fordert. Das ist auch der Grund, warum ich es mit einer tabelle machen wollte. die kann man nämlich, auch wenn es nicht konform ist, mit height="100%" auf die Seitenhöhe einstellen.
      Jetzt sorgt die höhenangabe in der navigation von 100% dafür, dass zusätzlich zum header noch einmal die komplette ansichtshöhe als navigation hinzukommt. Schön wäre es ja, wenn eine Angabe wie <div sytle="height:100% -90px;"> möglich wäre. Wobei 90px der Höhe des headers entspricht.
      Der Footer (den ich schon überlegt habe rauszunehmen, geändert wird er aber auf jeden fall) wird leider auch von browser zu browser unterschiedlich angezeigt. und nie wirklich da, wo er hin soll, nämlich ans ende der seite bzw. ans an den unteren rand wenn der text auf der seite nur kurz ist.

      Ich habe überlegt das ganze layout fixed zu machen, so das beim scrollen nur der inhalt mitscrollt. das sollte gehen, oder? aber irgendwie sträubt es mich dagegen.

      Viele liebe grüße
      Daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme mit der Darstellung beim Internetexplorer

        Daniel_ Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        Das Problem mit den Größen habe ich nun weitestgehend in den griff bekommen. Ich habe die komplette seite in einem div-Bereich. Diesen versuche ich nun auf die gesamte fläche auszudehnen bzw größer werden zu lassen, wenn der inhalt dies verlangt. Die elemente im inneren sind mit position:absolute und angaben zu top und bottom formatiert.

        Allerdings fehlt mir momentan die unterstützung für den IE6, weil ich für den äußersten div-bereich folgende style-definition verwende:

        #seite {  
  position: absolute;  
  width: 100%;  
  min-height: 100%;  
  margin: 0px;  
  padding: 0px;  
  background: url(http://www.mtv-borsum.de/ogrein/images/layout/4.jpg) right repeat-y;  
}

        Das Problem ist also die angabe zu min-height, die erst ab IE7 unterstützt wird.

        Weiß jemand wie ich einen vergleichbaren effekt für den IE6 hinbekomme?

        Viele Grüße
        Daniel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Probleme mit der Darstellung beim Internetexplorer

          Daniel_
          – Informationen zu den Bewertungsregeln

          Okay. Nicht.

          Ich weiß jetzt zwar eine Lösung für min-height beim IE6 aber dafür stimmt das nicht, was ich vorhergeschrieben hab. Weil der IE6 dooferweise nicht akzeptiert, dass ich als angabe zur position top und bottom gleichzeitig angebe..
          super und nun? das muss doch wohl irgendwie funktionieren...

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Probleme mit der Darstellung beim Internetexplorer

            Auge
            – Informationen zu den Bewertungsregeln

            Hallo

            Ich weiß jetzt zwar eine Lösung für min-height beim IE6 aber dafür stimmt das nicht, was ich vorhergeschrieben hab. Weil der IE6 dooferweise nicht akzeptiert, dass ich als angabe zur position top und bottom gleichzeitig angebe..

            Das kann er auch nicht.

            super und nun? das muss doch wohl irgendwie funktionieren...

            Der IE bis v6 interpretiert, wie du selbst festgestellt hast, min-height nicht. Er behandelt aber height so, wie es für min-height vorgesehen ist. Da, wo andere Browser den Block bei fest vorgegebener Höhe schließen (und je nach Vorgabe für overflow den Inhalt nach unten herausragen lassen oder auch nicht), erweitert der IE bis v6 den Block nach unten, um dessen gesamten Inhalt _im_ Block darzustellen.

            Du musst den alten IE-Versionen also extra CSS-Anweisungen geben, was du mit CSS-Hacks oder CCs machen kannst.

            Tschö, Auge

            --
            Die deutschen Interessen werden am Liechtenstein verteidigt.
            Veranstaltungsdatenbank Vdb 0.2
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Probleme mit der Darstellung beim Internetexplorer

              Daniel_ Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo Auge,
              Entschuldige, ich hab mich leider etwas undeutlich ausgedrückt.

              Du musst den alten IE-Versionen also extra CSS-Anweisungen geben, was du mit CSS-Hacks oder CCs machen kannst.

              Genau das habe ich jetzt ja auch gemacht. Mit den Von MS vorgegebenen Conditional Comments. Das Problem ist jetzt folgendes: Ich habe einen Block, den ich mit der eben genannten Methode über die ganze Seite spanne. In diesem Block befinden sich nun vier weitere Blöcke. Ein header ganz oben. gefolgt von einer navigation auf der linken seite und einer inhalt auf der rechten seite. und dadrunter ist nun noch ein footer. Der footer ist am Boden des eltern-elements verankert. der header logischer weise ganz oben. die frage stellt sich nun, wie ich die navigation und den inhalt auf die richtige größe bekomme. und das am allerliebsten noch ohne java-script. denn da könnte man ja sicherlich die Bildschirmauflösung auslesen und dann den benötigten wert berechnen..

              Also nochmal zusammenfassend:
              FF2 und IE7 stellen die seite korrekt dar.
              IE6 hat probleme und
              FF1 hab ich nicht getestet.

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

      2. Probleme mit der Darstellung beim Internetexplorer

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber Daniel_,

        Hab heute eine ganze Menge über css dazugelernt ;)

        das freut mich. Das war auch der Zweck meines langen Postings...

        Warum hast Du denn die <h2>Navigation</h2> entfernt? Aus der Sicht der Barrierefreiheit halte ich diese Unterüberschrift für sehr sinnvoll und notwendig! Ich meine mich auch zu erinnern, sie entsprechend mit CSS gestaltet zu haben, sodass Dein #navi-outer nicht notwendig ist, da Du mit #navi anstelle von #navi-outer arbeiten kannst.

        Die ganzen Darstellungsprobleme im IE kann ich heute Abend nicht mehr lösen, da ich gerade wenig Zeit habe, aber ich freue mich dafür sehr, wie weit Du in so kurzer Zeit gekommen bist!

        Liebe Grüße aus Ellwangen,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Probleme mit der Darstellung beim Internetexplorer

          Daniel_ Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Felix,

          Warum hast Du denn die <h2>Navigation</h2> entfernt? Aus der Sicht der Barrierefreiheit halte ich diese Unterüberschrift für sehr sinnvoll und notwendig! Ich meine mich auch zu erinnern, sie entsprechend mit CSS gestaltet zu haben, sodass Dein #navi-outer nicht notwendig ist, da Du mit #navi anstelle von #navi-outer arbeiten kannst.

          Die Überschrift kann ich eigentlich wieder einbauen. Die hat nur in einen meiner vielen Versuche Probleme bereiten und deshalb hab ich sie rausgeschmissen. Wenn ich jetzt so drüber nachdenke wahrscheinlich weil sie eine eigenen absatz erzwingt. aber das kann man ja sicherlich ausschalten:)
          den navi-outer brauche ich aber trotzdem, damit ich den hintergrund bei der navigation richtig hinbekomme. - Obwohl ich die beiden grafiken auch zusammenfassen kann.. okay wird geändert;)

          Die ganzen Darstellungsprobleme im IE kann ich heute Abend nicht mehr lösen

          Das kann auch keiner verlangen ;)

          Liebe Grüße
          Daniel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln