Entwickler-Ecke
Beschreibungssprachen - CSS Bug im IE. Ich werd noch wahnsinnig
matze - Do 22.11.07 18:11
Titel: CSS Bug im IE. Ich werd noch wahnsinnig
Hallo Leute.
Ich hoffe mal, dass mir jemand bei meinem Problem helfen kann.
Die Seite um die es geht ist
http://www.matf.de/demo.php
Bei einer dieser Fragen wird im IE der Text nicht angezeigt (siehe Anhang).
An was liegt das? Und wie kann ich da einen Workaround machen?
Danke,
Euer verzweifelter Matze
Moderiert von 
Christian S.: Topic aus Off Topic verschoben am Do 22.11.2007 um 17:32
TProgger - Do 22.11.07 18:18
<div id="fragetext"> ... das ist ja nicht deklariert, oder hab ich jetzt was im Quellcode übersehen?
Vielleicht mag das der IE nicht ;)
mkinzler - Do 22.11.07 18:22
Du hast mehrere DIVS mit der selben ID. Meinst DU CLASS statt ID?
Heiko - Do 22.11.07 19:31
Hallo matze. Grundsätzlich kann ich dir empfehlen, einen w3c-Validator beim entwickeln mitlaufen zu lassen (für FF z.B. "HTML Valiadator"), damit bekommt man die meisten Probleme zwischen den Browsern weg.
So nun mal zu den Korrekturen:
IE zentriert den Inhalt nicht: Header fehlt (wobei IE auch zwischen stricht und transitional unterscheidet (Scrict ist besser, da er da nicht in den problematischen Quirksmodus umschaltet))
XML-Daten
1:
2:
3:
| <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> |
Des weiteren:
- im head-Tagb muss immer der Tag "title" enthalten sein (macht zwar keine Probleme, wenn es nicht da ist, aber ist nimmer 23c-konform)
- <br> schreibt man inzwischen generell als <br />, da zu allen Tags ein schließen gehört, wes wegen man zweite Variante der Vollständigkeit nimmt (macht auch keinen unterschied, aber w3c eben ;) )
- verwende lieber immer class statt id. Wenn class nur einmal definiert ist, passiert nichts. wenn id aber mehrfach verwendet wird, schalten die Browser in den Quirksmodus, und dadurch interpretieren die die Seite manchmal allgemein anders (Zwecks fehlerbehandlung)
Validiert sieht dein Source so hier aus:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
| <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Test</title>
<style type="text/css">
</style>
</head>
<body>
<div id="beitragsrechner">
<form action="/demo.php" method="post">
<div class="frage even">
<div class="fragentext">Wie hoch ist der Listenpreis Ihrer Photovoltaikanlage inkl. Montagekosten?
Da Betreiber von netzgekoppelten PV-Anlagen in der Regel
vorsteuerabzugsberechtigt sind, ist der Nettowert (ohne MwSt.)
anzusetzten. Abweichungen bitte gesondert vermerken.
Bei Eigenmontage ist ein Kostensatz für den Montageaufwand von 250,- Euro je kWp anzusetzten.
</div>
<div class="form_element">
<input name="frage0" value="" type="text" />
</div>
</div>
<div class="frage odd">
<div class="fragentext">Wie erfolgte die Montage der PV-Anlage</div>
<div class="form_element">
<select name="frage1" size="1">
<option value="">Bitte treffen Sie Ihre Auswahl</option>
<option value="0.0">Montage durch Fachbetrieb</option>
<option value="0.00032">Eigenmontage</option>
</select>
</div>
</div>
<div class="frage even">
<div class="fragentext">Wo befindet sich die PV-Anlage</div>
<div class="form_element">
<select name="frage2" size="1">
<option value="">Bitte treffen Sie Ihre Auswahl</option>
<option value="0.000000001">Schraegdach</option>
<option value="0.0004">Flachdach (aufgestaendert) oder Fassade</option>
</select>
</div>
</div>
<div class="frage odd">
<div class="fragentext">Nur eine Frage zur Ausgabe der Variablen:
Dachart:
Jahresbruttobeitrag:
Jahresnettobeitrag:
Listenpreisnett:
Montageart:
Formel: * (0.00182 + + )
</div>
<div class="form_element">
<input name="frage3" value="" type="text" />
</div>
</div>
<div class="form_element">
<input name="btn_senden" value="Berechnen" id="submitbutton" type="submit" />
</div>
</form>
</div>
</body>
</html> |
Aso, zur Ursache: Es war kein CSS-Bug, sondern irgendein anderer Bug. Und zwar trat der Fehler ja auf bei:
XML-Daten
1:
| </select></div></div><div id="frage" class="odd"><div id="fragentext">Nur eine Frage zur Ausgabe der Variablen: |
Nicht auftreten tut er aber bei
XML-Daten
1:
2:
| </select>
</div></div><div id="frage" class="odd"><div id="fragentext">Nur eine Frage zur Ausgabe der Variablen: |
(Leidklgich der Zeilenu8mbruch fehlte ihm. Da scheint nen Parsefehler beim IE zu sein ;) ).
Die restlichen Unterschiede zwischen den drei Browsern liegt an CSS, aber das haste immer, da die verschiedene defaultwerte nehmen (besonders deutlich bei h1 etc., wo der Abstand nach oben ganz verschieden ist, wenn man nicht eingreift).
Grüße
Heiko
matze - Do 22.11.07 19:44
Es ist immer bei dieser einen Frage, egal wo ich sie hinschiebe.
Witzigerweise erscheint der Text, wenn man versucht, das "nichts" zu markieren
Danniolo - Do 22.11.07 19:52
Den Bug kenne ich auch.. tritt bei mir immer vollkommen willkürlich auf und ist nur bedingt reproduzierbar - manchmal ist es da, manchmal nicht.
Mir ist ebenfalls aufgefallen, dass der Text beim Markieren meistens sichtbar wird.
Habe da viel rumprobiert, bisher habe ich aber noch nichts brauchbares gefunden (das einzige, was klappt ist einfach alles in Tabellen zu packen, dann wirds meistens aus mir verborgenene Gründen meistens richtig angezeigt).
GTA-Place - Do 22.11.07 20:07
Quelltext
1:
| #frage_even { background-color: #EEEEEE; color: #000000; width:99% border-color: black black #666666; padding-bottom: 10px; padding-top: 10px; padding-right: 10px; padding-left: 10px; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px} |
1) Strichpunkt nach 99% fehlt (Vermutung: Width wird durch den Fehler nicht gesetzt -> nicht sichtbar)
2) So sieht das ganze etwas gekürzt aus:
Quelltext
1:
| background-color: #EEE; color: #000; width: 99%; border: 0px solid #666; border-bottom-width: 1px; padding: 10px; |
Wirkt ein wenig übersichtlicher.
Ansonsten noch unbedingt das beachten, was Heiko gesagt hat.
Heiko - Do 22.11.07 20:24
Mal ne Frage. Mit welchem IE testet ihr das? IE7 und 6 machen das, bei meinem Source korrekt (außer das der IE6 das nicht zentriert). Von daher weiß ich nicht, wo noch das Prob sein sollte, da es bei mir nicht auftritt ;).
@Matze: Da ich mir gerade wegen dem IE6 deinen CSS-Code angucke, muss ich dazu auch noch ein paar Kommentare abgeben ;).
Und zwar kann man margins zusammenfassen. Man braucht nicht schreiben:
Quelltext
1:
| margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto |
ist das gleiche wie:
Des weiteren ist es sinnlos
color: #000000; für den body festzulegen, da es default ist (ich kenne keinen browser, der rot oder so nimmt ;) ).
Des weiteren:
Quelltext
1:
| border-color: black black #666666; |
ist doof. Man hat die Wahl zwischen 1 (alle), 2 (rechts/links, oben/unten), 4 (ich glaub ds begann oben und dann im Uhrzeigersinn, bin mir aber gerade nicht sicher). Von daher ist 3 doof, da er nicht weiß, was du nun wirklich meinst.
Gekürzt sieht der CSS.Source so aus:
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
| #beitragsrechner { background-color: #FFFFFF; border: 1px #000000 solid; width: 600px}
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; background-color: #000033}
.frage, .antrag { border-bottom: 1px #666666 solid; padding: 10px}
.fehler { background-color: #FFCC00; margin: 10px; border: 1px #FF9900 solid}
.submitbutton { margin: 10px}
.form_element { padding-top: 10px}
.even { background-color: #EEEEEE} |
PS: Ich gehe von dem Stand von vor ner Stunde aus, nicht der neue. Denn #antrag_even gab es bei mir noch nicht. (Du musst das even auch nicht extra unterschieden, du kannst einem element mehrere Klassen zuordnen...)
Brother John - Fr 23.11.07 02:41
@Heiko
– Das Schließen inhaltleerer Tags gilt aber ausschließlich für XHTML. In HTML sind <br /> & Co. nach wie vor ein Fehler.
– Der Quirksmode wird durch den Doctype gesteuert. Wäre mir extremst neu, dass ein Browser bei nicht validem Quellcode umschaltet.
– Drei Angaben für border-color ist tatsächlich definiert, und zwar in der Reihenfolge: oben, rechts/links, unten.
@matze
Ich würde erst mal dringend empfehlen, den Code für einen Strict-Doctype valide zu machen. CSS genauso validieren. Im Moment arbeitest du mit einer fehlerhaften Tag-Suppe, die jeder Browser ganz nach Lust, Laune und Tagesform interpretieren kann.
Spontan springt mir ins Auge:
– Kein Doctype
– keine Zeichensatzangabe
– </br> gibts nicht
– mehrfach definierte IDs.
Btw: Vorsicht mit XHTML incl. XML-Deklaration. Das schickt den IE in den Quirksmode; IE7 vielleicht ausgenommen, weiß ich nicht genau.
Heiko - Fr 23.11.07 11:10
| Brother John hat folgendes geschrieben: |
| – Das Schließen inhaltleerer Tags gilt aber ausschließlich für XHTML. In HTML sind <br /> & Co. nach wie vor ein Fehler. |
Jupp, aber soweit ich weiß, sollen die Browser bei XHTML weniger rumspinnen (inzwischen). Im Prinzip sehe ich da aber kaum unterschiede zwischen XHTMl und dme normalen HTML, wes wegen ich immer XHTML nehme ;).
| Brother John hat folgendes geschrieben: |
| – Der Quirksmode wird durch den Doctype gesteuert. Wäre mir extremst neu, dass ein Browser bei nicht validem Quellcode umschaltet. |
Ich hatte in Erinnerung, dass ich den FF früher auch anders dortrein bekommen habe. Inzwischen schaffe ich es aber nicht mehr :gruebel: .
| Brother John hat folgendes geschrieben: |
| – Drei Angaben für border-color ist tatsächlich definiert, und zwar in der Reihenfolge: oben, rechts/links, unten. |
Wieder was gelernt. Ich hätte die Angabe selber so interpretiert: oben, rechts, unten (und links nicht verwendet ;) ).
| Brother John hat folgendes geschrieben: |
| Ich würde erst mal dringend empfehlen, den Code für einen Strict-Doctype valide zu machen. |
Japp, bei transitional hat der IE7 noch manchmal Probs, was er bei Scrict nicht hat (hatte mal ein Beispiel, wo ein Strict-Validierter Source funzte, aber bei transitional nicht mehr ;) ).
| Brother John hat folgendes geschrieben: |
| Btw: Vorsicht mit XHTML incl. XML-Deklaration. Das schickt den IE in den Quirksmode; IE7 vielleicht ausgenommen, weiß ich nicht genau. |
Mkay, wenn ich das wegnehme, zentriert der IE6 das Fenster jetzt auch. Was ich mich jetzt aber Frage: Wie soll man eine GMap zentriert im Fenster beim IE anzeigen? Denn damit das funzt musst man xml angeben... (wes wegen ich es allgemein machte)
SchelmVomElm - Fr 23.11.07 11:42
| Zitat: |
XML-Daten 1:
2:
3:
| <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> |
|
Guter Mann, genau diese Deklaration versetzt den IE in den Quirks-mode!
Wer es nicht glaubt kann es testen mit:
XML-Daten
1:
| <a href="javascript:alert(document.compatMode)">CSS Kompatibilität</a> |
Die einfache Antwort auf das Problem hat GTA Place gegeben: Mach das Semikolon hinter die 99% und es wird gehen. Jede Wette!
PS es kann durchaus sinnvoll sein den IE in den Quirksmode (Rückwärtkompatibel) zu versetzen, da die verschiedenen IE Versionen das Box Modell unterschiedlich interpretieren. Der Quirksmode vereinheitlicht die Versionen.
Brother John - Fr 23.11.07 15:38
@Heiko
Wenn die Datei UTF-8 ist, ist die Deklaration optional. GMap sagt mir nix. Dass die Browser XHTML wesentlich anders handhaben als HTML, würde mich wundern. Standardsmodus ist Standardsmodus, und über beides geht der normale HTML-Parser drüber. Im Grunde hast du schon recht, es ist nahezu wurscht, ob mit oder ohne X, Hauptsache Strict.
@SchelmVomElm
Wenn du den IE absichtlich in den Quirksmode schickst, musst du dich halt zusätzlich zu den ganzen globalen IE-Defekten noch mit Box-Modell-Fehler & Co. herumschlagen und dafür extra CSS definieren. Den Aufwand würde ich mir nicht geben, wenn es nicht unbedingt notwendig ist. 6er- und 7er-IE nutzen im Standardsmode beide das richtige Boxmodell. Und mit solchen Dinosauriern wie IE5 muss doch endlich mal Schluss sein!
Brother John - So 25.11.07 19:06
| Heiko hat folgendes geschrieben: |
| Welche Deklaration meinste gerade? XHTML/HTML oder die ?xml-Angabe? |
?xml meine ich.
matze - So 25.11.07 22:23
Hallo Leute.
Ich habe jetzt eure Tipps mal in einer anderen Datei umgesetzt.
Es funktioniert zwar mit den Änderungen, aber leider kommt ein Teil des HTML Outputs aus einer Ressource auf die ich nicht zugreifen kann.
Ich werde mir also was überlegen müssen.
Aber schon mal vielen, vielen, vielen Dank für eure Mühen !!! :zustimm:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!