IE für Win intepretiert div-padding anders

Diskutiere mit über: IE für Win intepretiert div-padding anders im Web Page Design Forum

  1. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Beiträge:
    9.958
    Zustimmungen:
    1.657
    Registriert seit:
    20.02.2005
    Hallo NG,

    nachdem mir durch die ganze Fehlersuche der Kopf raucht, mal ne Frage an die Experten..

    Ich habe ne Seite mit verschachtelten divs.

    Ein Elterndiv in dem per float: left; zwei Inhaltsdivs nebeneinander sind.
    Elterndiv soll 780px breit sein, die Inhaltsdivs 150 und 630 (150 + 630 = 780). Das 630er Inhaltsdiv soll ein padding von 15px haben.

    Wenn ich das so programmiere, wird es im IE für Win korrekt angezeigt. In Firefox, Safari und Opera sind die beiden Inhaltsdivs zu breit, so dass sie untereinander erscheinen.

    Ergo habe ich das 630er div auf 600 verkleinert (150 + 600 + padding links 15 + padding rechts 15 = 780). Damit wird's in Firefox, Safari und Opera korrekt angezeigt, im IE ist das 600er div dann aber zu schmal.

    Meine Frage: Interpretieren die Browser unterschiedlich oder hab ich möglicherweise nen Denkfehler drin?

    Bei Interesse: der Quellcode liegt unter www.mpa.uni-kassel.de/china/index.html, die css Datei heißt www.mpa.uni-kassel.de/china/china.css

    (und ja, ist ein angepasstes Rapidweaver css, soll da dann auch als Theme wieder rein ;), aber erstmal muss die Seite laufen)
     
  2. joachim14

    joachim14 MacUser Mitglied

    Beiträge:
    7.295
    Zustimmungen:
    433
    Registriert seit:
    08.02.2005
    Ohne mir Deine Seite weiter angesehen zu haben: Der IE ist bekannt und berüchtigt dafür, dass er hier anders interpretiert (bei einigen anderen Dingen auch noch).
    Deshalb bittet Microsoft für den kommenden IE 7 ja auch, alle Webseiten ohne IE Spezilitäten umzuschreiben. Offenbar möchte man sich doch einmal den allgemeinen Gepflogenheiten anschließen. (kein Witz)

    Für die Besonderheiten von IE ist zB die Darstellung von http://de.selfhtml.org/ ganz nützlich
     
  3. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Beste Lösung ist sicherlich so gut es geht auf padding und margin oder gleich pixelbasiertes Layout zu verzichten. Klar geht das manchmal garnich, dann ist meiner Meinung nach die beste Lösung diese (von dms Link):

    Code:
    #bereich {
      width:200px; padding:20px; border:20px solid #66a;
    }
    
    * html #bereich {  /* nur fuer Internet Explorer */
      width:280px;     /* Version 5.x */
      w\idth:200px;    /* Version 6 */
    }
     
  4. dms

    dms Gast

    Finde ich ganz schlimm, solche CSS-Hacks. Gerade für den IE gibt es auch Methoden um gezielt Möglichkeiten und nicht Schwachstellen von Browsern auszutzen.
    Code:
    <style type="text/css">
    /*<![CDATA[*/
    #bereich {
       width:200px;
       padding:20px;
       border:20px solid #66a;
    }
    /*]]>*/
    </style>
    <!--[if IE 5]>
    <style type="text/css">
    /*<![CDATA[*/
    #bereich {
       width:280px;
    }
    /*]]>*/
    </style>
    <![endif]-->
    <!--[if IE 6]>
    <style type="text/css">
    /*<![CDATA[*/
    #bereich {
       width:200px
    }
    /*]]>*/
    </style>
    <![endif]-->
     
  5. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Schwierig beim IE zwischen Möglichkeit und Schwachstelle zu unterscheiden ;)

    Dein Weg ist sicherlich der „richtigere“ jedoch bevorzuge ich in dem Fall den Hack.
    Ich benutze keine CSS-Hacks bis auf den oben, da er wenn das Box Model einheitlich ist (wohl so in einem Jahr), sehr leicht entfernt werden kann und keine Probleme bereiten kann (die richtige Breitenangabe wird ja als letztes gesetzt), im Gegensatz zu vielen anderen Hacks.

    Wie ist es eigentlich bei den conditional rules, wenn sich z.B. der Opera als IE ausgibt?
     
    Zuletzt bearbeitet: 30.10.2005
  6. dms

    dms Gast

    Opera springt darauf nicht an.

    Kann man denn aber von Entfernen sprechen? Man optimiert doch nicht immern nur auf die aktuellste Browserversion. Mit den IE-Abfragen hast Du absolut keinen Aufwand in der Zukunft. Der neue IE wird nicht drauf anspringen (es sei denn die Redmonder beweisen mal wieder Ihre Fähigkeiten ;)) sondern die allgemeingültigen Regeln verwenden.
     
  7. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Beiträge:
    9.958
    Zustimmungen:
    1.657
    Registriert seit:
    20.02.2005
    Ja spitze. Es funktioniert. Vielen Dank! Ich wusste doch, dass sich hier geballtes Fachwissen konzentriert.

    Der IE 6 hat das Darstellungsproblem übrigens genauso. Habe mich dann für <!--[if lte IE 6]> entschieden.

    Achja.. Habe den Style jetzt in den .html Quelltext in den Header gepackt. Gibt es ne Möglichkeit, die if Abfrage in der .css Datei zu verwursten?
     
  8. dms

    dms Gast

    Ist mir nicht bekannt, ausser natürlich mit dem CSS-Hack. Ich verwende immer eine extra IE.css die ich über solch ein Conditional Comment einbinde.
     
  9. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Beiträge:
    9.958
    Zustimmungen:
    1.657
    Registriert seit:
    20.02.2005
    Das ist natürlich auch eine Maßnahme. Manchmal liegt die Lösung so nahe. ;)

    Damit lassen sich dann ja auch gleich diverse andere Kleinigkeiten ausbessern. Eigentlich unglaublich, was Microsoft da.. aber das Thema zu erörtern lohnt sich ja nicht wirklich.

    Mit Vista wird bestimmt alles besser. *hüstel* ;)
     
Die Seite wird geladen...
Ähnliche Themen - Win intepretiert div Forum Datum
Problem mit verschachtelten div-Boxen Web Page Design 30.08.2016
Problem: DIV sprengt Container Web Page Design 22.08.2013
Link/Scroll zu div id animieren Web Page Design 22.11.2012
Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen… Web Page Design 18.08.2012
Wie verschiebe ich in einem Div-Layer den Inhalt, ohne dabei den HG anzusprechen? Web Page Design 15.08.2011

Diese Seite empfehlen

Benutzerdefinierte Suche