Thorsten: Darstellungs Problem im IE6

Abend,

ich habe ein Problem mit dem IE6 der meine Seite nicht richtig darstellen möchte.

Vor ab Informationen:

Link: www.ivently.de/test/
Gesamtbreite der Seite: 990px
Alle Browser befinden sich im Standartkonformen Modus
Ich schreibe XHTML 1.0 Strict Charset = UTF-8

Fehlerbeschreibung:
Im Content sind 2 Boxen diese sind im FF IE7 und Opera nebeneinander.
Im IE6 aber untereinander.
Ich suche schon mehrere Std. nach diesem Problem aber ich finde einfach keine Lösung. Normaler weise kann es nur was mit den Breitenangaben sein, diese habe ich mittlerweile alle mehrmals durchgerechnet und meine Angaben stimmen. Ich komme mit allen Boxen und margins immer auf 975px so wie es sein soll.

Daher bitte ich euch mal drüber zu schauen, da ich einfach nicht mehr weiter komme.

Es ist nicht grade wenig CSS aber ich hoffe Ihr vergebt mir!

CSS Code:

  
@charset "utf-8";  
#debug{  
text-align:left;  
}  
h1{font-size:24px;}  
h2{font-size:18px;}  
h4{font-size:12px;}  
  
body {  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:12px;  
background-color:#F4F4F4;  
}  
p {margin:0px;}  
  
#page {  
width:990px;  
margin:0px auto;  
margin-top:10px;  
text-align:left;  
}  
#bg {  
width:990px;  
float:left;  
min-height:620px;  
background-image:url(Image/schatten.png);  
background-repeat:repeat-y;  
}  
#header {  
width:990px;  
height:160px;  
}  
#navigation {  
margin-left:5px;  
margin-right:5px;  
width:980px;  
height:29px;  
}  
#left {  
margin-left:15px;  
float:left;  
width:116px;  
}  
#content {  
float:left;  
margin-left:20px;  
width:644px;  
}  
#right {  
width:160px;  
float:left;  
margin-left:20px;  
}  
#footer {  
clear:both;  
text-align:center;  
line-height: 1.5;  
width:990px;  
height:20px;  
background-image:url(Image/footer.png);  
background-repeat:no-repeat;  
}  
.box_klein_l {  
float:left;  
width:312px;  
}  
.box_klein_r {  
float:left;  
width:312px;  
margin-left:15px;  
}  

  1. Hi,

    ich habs jetzt nicht getestet, aber wenn du die linken Abstände der beiden Boxen im IE6 siehst, gehe ich davon aus, dass ich richtig liege.

    margin-left:15px;

    daraus macht der IE6 mehr doer weniger
    margin-left:30px;

    ... also in Browserweiche für den IE 6 den
    margin-left:7px;

    definieren und das Problem sollte behoben sein.

    Gruß Patrick

    1. ... also in Browserweiche für den IE 6 den
      margin-left:7px;

      definieren und das Problem sollte behoben sein.

      nein- weil dann sinds 2x 7 = 14 px und nicht 15

      ein display inline hilft da besser und umgeht den bug komplett ;)
      http://www.positioniseverything.net/explorer/doubled-margin.html

      1. Da es kein Pixelgenaues Layout war / ist, dürfte 14 oder 15 nicht so tragisch sein... Allerdings lass ich mir ja auch gerne mal nen Tipp geben, den ich noch nicht kenne... thx

        1. Da es kein Pixelgenaues Layout war / ist, dürfte 14 oder 15 nicht so tragisch sein... Allerdings lass ich mir ja auch gerne mal nen Tipp geben, den ich noch nicht kenne... thx

          Ich bin euch echt mega Dankbar und ich suche wie son blöder nach den Fehler.

          Mit irgendwelchen Hacks oder weichen arbeite ich nie.
          Warum soll ein Entwickler/Programmierer oder Designer die Fehler von Software ausbaden müssen, wenn diese noch nichtmal in der Lage ist den Standart richtig umzusätzen.

          War auch erstaunt das der IE6 Probleme mit Transparenten png`s hat.

          Naja der IE wird den Betastatus wohl nie verlassen :)

          Mir ist aber leider noch ein Fehler aufgefallen, zwischen dem Header und der Navi scheint es auch einen Pixel fehler zu geben, habt Ihr Vollprofis da auch eine Spontane Lösung parat?

          display: inline; hat den fehler wunderbat behoben.

          Danke

          1. Mit irgendwelchen Hacks oder weichen arbeite ich nie.

            Hacks sind auch nicht gut, Weichen hingegen sollte man ruhig nutzen, sofern es keinen wirklichen anderen, sauberen Weg gibt.

            Warum soll ein Entwickler/Programmierer oder Designer die Fehler von Software ausbaden müssen, wenn diese noch nichtmal in der Lage ist den Standart richtig umzusätzen.

            Nunja, zum einen gäbs einige Arbeitsplätze weniger, wenns Menschen nicht andere Menschen korrigieren müssten, zum anderen wirst du deine Seiten ja nicht zum stillschweigenden Genießen bauen, sondern dafür, dass andere Leute die Seite besuchen... ergo ... genau für die leute solltest du dir auch die Mühe machen, vor allem, wenn sich die Mühe in Grenzen hält!

            War auch erstaunt das der IE6 Probleme mit Transparenten png`s hat.

            Auch hier gibts Lösungen... nen interessanter Artikel dazu ist grad in der aktuellen Internet intern. Insgesamt nicht der Wahnsinn, aber einige interessante Dinge findet man doch darin...

            Naja der IE wird den Betastatus wohl nie verlassen :)

            Willkommen im Club der Wissenden... manche Dinge ändern sich nie ;-)

            Mir ist aber leider noch ein Fehler aufgefallen, zwischen dem Header und der Navi scheint es auch einen Pixel fehler zu geben, habt Ihr Vollprofis da auch eine Spontane Lösung parat?

            Hmmm, also cih für meinen Teil bin alles andere als Vollprofi, ich lerne nur fleißig und versuche mir errungene Probleme geistig zu erhalten *lach*

            Ich tippe hier auf nen Zeilenumbruch zwischen </td> und </tr>
            schwachsinnig, aber da war was.

            Nichtsdestotrotz habe ich deinen Quellcode mit Freude und mit Entsetzen gelesen... du arbeitest sauber mit divs und css und deine Navigation sind Tabellen??? Bitte einmal bücken und dann Nackenschläge kassieren! .. Benutze Auflistungen für jegliche Navigation. zum einen ist nicht nur schlanker und standardkonformer, sondern wenn mans einmal verstanden hat, auch noch so verflucht simpel.
            Als Tipp: kauf dir das Buch "CSS Praxis" von Galileo Computing. Es hat mich damals auf den Pfad der Tugend gebracht und ein gut verständlicher Lehrmeister in Sachen CSS.

            In diesem Sinne... angenehmen Feierabend ;-)

            1. Ich tippe hier auf nen Zeilenumbruch zwischen </td> und </tr>
              schwachsinnig, aber da war was.

              Also ich habe kein <br /> in meiner tabelle gefunden!

              Nichtsdestotrotz habe ich deinen Quellcode mit Freude und mit Entsetzen gelesen... du arbeitest sauber mit divs und css und deine Navigation sind Tabellen??? Bitte einmal bücken und dann Nackenschläge kassieren! .. Benutze Auflistungen für jegliche Navigation. zum einen ist nicht nur schlanker und standardkonformer, sondern wenn mans einmal verstanden hat, auch noch so verflucht simpel.
              Als Tipp: kauf dir das Buch "CSS Praxis" von Galileo Computing. Es hat mich damals auf den Pfad der Tugend gebracht und ein gut verständlicher Lehrmeister in Sachen CSS.

              Bist du so klein, das ich mich erst bücken muss? Hehe!
              Ob ich die Navigation so lasse, weiß ich noch nicht genau. Eine Tabelle ist mir in dem Moment einfach in den Weg gesprungen, wahrscheinlich werde ich das nochmal ändern.

              Zu den PNGs:
              Die vorhandenen Grafiken kann ich nicht in 8Bit umwandeln da dies das aussehen stark verschlächtern würde. Ich werde bestimmt nicht irgendwelche CSS weichen einbauen damit der IE6 auch 24 BIT PNGs darstellen kann.
              Wahrscheinlich werde ich die Transparenz aus allen Grafiken rausnehmen und die Hintergrundfarbe einsätzen.

              Zu der anderen Diskusion über den IE6:

              Ich bin gezwungen diese Seite auch für den IE6 zu schreiben, da eindeutig zuviele Leute diese Version noch einsätzen.

              Was ich mit meinem vorigen Post meine, ist das wir die Enwickler selber Schuld für den Standartcaos sind. Wir haben es möglich gemacht das alle Seiten auch auf einem Fehlerhaften Browser richtig dargestellt werden.

              Hätten wir diesen Stumpf ignoriert und uns an den vorhandenen Standard gehalten, hätten wir MS dazu gezwungen sehr schnell zu reagieren.

              Da haben wir jetzt aber keinen einfluss mehr drauf.

              Ich vergleiche das auch gerne mal damit, das jemand sich einen Neuwagen kauft und diesen auch verwendent, obwohl er das Wissen hat, das der Wagen fehlerhaft vom Hersteller entwickelt wurde. Ich kenne keinen der diesen PKW wirklich kaufen würde.

              1. Zu den PNGs:
                Die vorhandenen Grafiken kann ich nicht in 8Bit umwandeln da dies das aussehen stark verschlächtern würde. Ich werde bestimmt nicht irgendwelche CSS weichen einbauen damit der IE6 auch 24 BIT PNGs darstellen kann.
                Wahrscheinlich werde ich die Transparenz aus allen Grafiken rausnehmen und die Hintergrundfarbe einsätzen.

                bau eine weiche ein mit conditional comments bekommen alle guten browser png-24 vorgesetzt und der ie6 abwärts einfach in gib mit indizierter grafik mit pixeligen kanten - die leute die einen veralteten, nicht standardkonformen browser verwenden, gehören ohnehin bestraft bzw man muss ihnen zeigen, dass es lohnt auf einen alternativen browser umzusteigen, weils dann schöner aussieht

                das ist zwar etwas mehr aufwand, aber die weichen wirst du ggf ohnehin brauchen - und dich selbst bestrafen?

                wenn du jemals den hintergrund der seite von hausnummer blau auf rot änderst, musst du alle grafiken, die nicht alphatransparent sind, umändernt

                anders musst du mir 1x ein paar extra grafiken erstellen

                Ich bin gezwungen diese Seite auch für den IE6 zu schreiben, da eindeutig zuviele Leute diese Version noch einsätzen.

                richtig und auch deine weiter Worte sind wahr (webentwickler sind an dem chaos schuld)

                btw: du scheinst ein ä <-> e problem zu haben (verschlächtert, einsätzen) usw - ggf solltest du dran arbeiten

                1. btw: du scheinst ein ä <-> e problem zu haben (verschlächtert, einsätzen) usw - ggf solltest du dran arbeiten

                  Meine Rechtschreibschwäche ist mir bekannt und durchaus Peinlich wenn man das mal sogen sagen darf.

                  Ich habe schon viel versucht um dieses auch jetzt noch mit meinen 26 Jahren zu beseitigen. Leider bis her ohne erfolg. In der Deutschen Rechtschreibung habe ich noch nie ein Logik gefunden die ich benötige um es zu verstehen.

                  Mathe ist für mich immer einfach gewesen aber Deutsch wird es wohl nie werden!

                  1. Ich habe schon viel versucht um dieses auch jetzt noch mit meinen 26 Jahren zu beseitigen. Leider bis her ohne erfolg. In der Deutschen Rechtschreibung habe ich noch nie ein Logik gefunden die ich benötige um es zu verstehen.

                    dann fällst du auch in die kategorie "rechtschreibreform miterlebt" - das ist extrem uncool gewesen damals, gerademal halbwegs lesen/schreiben gelernt und schwupp gibts eine reform die einiges logischer macht, ein paar wörter stark verstümmelt bzw gewohnte ausnahmen über den haufen wirft und einiges unlogischer macht - aber was solls

                    für meinen teil, ich hab französisch nie kapiert und werds wahrscheinlich niemals verstehen, dämliche sprache :D

          2. Mit irgendwelchen Hacks oder weichen arbeite ich nie.
            Warum soll ein Entwickler/Programmierer oder Designer die Fehler von Software ausbaden müssen, wenn diese noch nichtmal in der Lage ist den Standart richtig umzusätzen.

            ob display: inline ein hack ist, darüber lässt sich streiten - streng genommen aber ja

            btw: es heisst "Standard" und zudem ist der der Browser 8 Jahre alt, damals wars noch nicht sogenau ;) obwohls die angesprochenen Standards schon gab

            Warum das die Entwickler ausbaden müssen, siehe weiter unten (bez Betastatus)

            War auch erstaunt das der IE6 Probleme mit Transparenten png`s hat.

            der IE6 kann Transparente PNGs problemlos darstellen (das Apostroph findet sich auf der Tastatur auf der # Taste, die Taste neben Backspace ist für acute und grave da - zudem solltest du kein Deppenapostroph setzen - im deutschen gilt die in diesem Fall die Plural-s-Regel.

            Vergl. http://de.wikipedia.org/wiki/Apostrophitis

            Naja der IE wird den Betastatus wohl nie verlassen :)

            der ie6 wird nicht mehr weiterentwickelt, der ie7 ist schon lange da und der ie8 ist in den Startlöchern - Mozilla 0.6 hatte damals auch eine Menge fehler, aber den verwerdet heute im Unterschied zum etwa gleich alten IE6 fast keiner mehr.

            Auf einen neuen Browser umsteigen wäre der richtige schritt, aber die Leute können entweder nicht updaten (Win 2000) oder wollen es einfach nicht, und wenn sie nicht können, dann wollen sie nicht auf einen andren Browser umsteigen oder wissen garnix von deren Existenz. Oder sie dürfen nicht, weil irgend ein wahnsinniger Administrator dies verbeitet.

            1. Hi,

              War auch erstaunt das der IE6 Probleme mit Transparenten png`s hat.
              der IE6 kann Transparente PNGs problemlos darstellen

              Nein, kann er nicht [1].

              [1] Wenn irgendetwas aktiviertes Active-X erfordert, kann von "problemlos" keine Rede sein. "Extrem risikoreich", "lebensmuede" oder "wahnsinnig" waeren treffendere Umschreibungen.

              MfG ChrisB

              1. Nein, kann er nicht [1].

                [1] Wenn irgendetwas aktiviertes Active-X erfordert, kann von "problemlos" keine Rede sein. "Extrem risikoreich", "lebensmuede" oder "wahnsinnig" waeren treffendere Umschreibungen.

                in der Tat ;) - weit gedacht, aber den Satz einfach vorzeitig beendet

                Ein transparentes ode auch nur teilweise transparentes 8-bit PNG ohne eigenen Alphakanal (sprich nur ein Farbwert hat im Index bzw der Farbtabelle die Transparenz) kann der IE6 defintiv Problemlos darstellen - PNG-24 kann der Internet Explorer 6 ebenfalls problemlos darstellen, solang kein 8-bit-Alphakanal verwendet wird.

                Je nach Art der Speicherung (Hintergrundfarbe/Alphawert) wird der theoretisch alphatransparente Teil der Grafik schwarz oder grau dargestellt, ggf aber auch in einer entsprechenden Farbe.

                Zusammengefasst:
                ein PNG-8 kann der IE6 defintiv Problemlos unter jeglichen umständen Darstellen - das ist exakt genauso risikoreich wie ein 8-bit-GIF

                ein PNG-24 mit Alphatransparenz kann der IE6 nur mit Workarounds (derer es mehrere gibt) darstellen - diese Workarounds sind teilweise potentiell gefährlich