Browserunverträglichkeit mit Firefox

[Duci]

Hallo allerseits,

ich habe folgende Website http://home.pages.at/bachgasse-5b/ChK/de/index.html
hauptsächlich mittels externer CSS-Datei konstruiert (http://home.pages.at/bachgasse-5b/ChK/de/standard.css).

Wenn ich diese Seite im Internet Explorer betrachte, wird sie wie gewünscht dargestellt. Anders allerdings bei Mozilla Firefox, dort ist sie komplett entstellt. Weitere Browser habe ich noch nicht ausprobiert, aber soweit ich weiß basiert Mozilla auf Netscape-Technologien, also denke ich, dass das Ergebnis nicht anders ausfallen wird ...

Weiß jemand, woran das liegen könnte? Ist das überhaupt behebbar?

Besten Dank,
Duci

[Lutz Fechner]

Weiß jemand, woran das liegen könnte? Ist das überhaupt behebbar?

Cih denke mal, es ist wiedermal der Box-Fehler vom Internet Explorer.
Soll heißen eigentlich zeigt es der IE falsch an, nur du hast halt die CSS-Datei für diese falsche Anzeige optimiert.

Es gibt den sog. "Tantek-Hack" um das zu umgehen.
Ich habe das immer so gelöst, und bei mir klappt es:

#linklist ul.sub  {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 25px;
  list-style-type: circle;
}

* html #linklist ul.sub  {
  margin: -15px 0px 0px 0px;
}

Hier siehst Du ein Element was ganz normal (oben) editiert ist.
weiter unten siehst Du das selbe Element nochmal, diesmal mit einem * html davor. Firefox übergeht diesen Eintrag, der IE 6.0 ließt ihn. Du kannst also die ganzen Werte bei einigen Elementen für jeden Browser anders einstellen. Allerdings sieht das beim IE5 oder so noch anders aus. Wenn du es ausführlich willst, ließ dir mal das unten durch (Beachte vor allem den sog. html-Star-Hack im Bereich Tan-Hack, gibt viele verschiedene Arten dieses Hacks:

http://de.selfhtml.org/css/formate/box_modell.htm#workarounds

Lutz

[Ingo Turski]

Hi,

Es gibt den sog. "Tantek-Hack" um das zu umgehen.
Ich habe das immer so gelöst, und bei mir klappt es:

* html #linklist ul.sub  {

dies ist der sog. "Star-HTML-Hack" - und ich sehe im Quellcode auch nirgends eine UL, essen Darstellung im IE zu korrigieren wäre. ;-)

freundliche Grüße
Ingo

[Lutz Fechner]

dies ist der sog. "Star-HTML-Hack" - und ich sehe im Quellcode auch nirgends eine UL, essen Darstellung im IE zu korrigieren wäre. ;-)

Ja Du hast Recht, er heißt Star-HTML-Hack, Hack ich aber auch irgendwo geschrieben, sorry.sorrynicht gerade das übersichtlichste Tutorial auf SELFHTML
Der Fetzen Quellcode stammt auch von meiner Seite, sollte nur ein Beispiel sein ;)

Lutz

[Ingo Turski]

Hi,

aber soweit ich weiß basiert Mozilla auf Netscape-Technologien

nunja, auf dem Netscape 4 - bzw. die späteren Netscapes dann auf Mozilla.

Weiß jemand, woran das liegen könnte? Ist das überhaupt behebbar?

Ja, durch standardkonformes CSS und wenn nötig Korrekturen der fehlerhaften (in diesem Fall von Dir gewünschten) Fehldarstellungen des IE.
Hierzu solltest Du zunächst etwas mehr über CSS lernen - insb. daß die Eigenschaft position nur mit Bedacht eingesetzt werden sollte.

freundliche Grüße
Ingo

[Jens Holzkämper]

Tach,

aber soweit ich weiß basiert Mozilla auf Netscape-Technologien
nunja, auf dem Netscape 4

das stimmt auch nicht, es war ursprünglich so geplant, aber dann entschied man sich den gesamten Netscape-Quellcode wegzuwerfen und komplett neu anzufangen.

mfg
Woodfighter

[Gunnar Bittersmann]

ich habe folgende Website http://home.pages.at/bachgasse-5b/ChK/de/index.html
hauptsächlich mittels externer CSS-Datei konstruiert (http://home.pages.at/bachgasse-5b/ChK/de/standard.css).

Duci,
</faq/#Q-19>, danke.

Wenn ich diese Seite im Internet Explorer betrachte, wird sie wie gewünscht dargestellt. Anders allerdings bei Mozilla Firefox, dort ist sie komplett entstellt. […] Weiß jemand, woran das liegen könnte?

Die Frage stellt sich so nicht.[tm]

Entwickle deine Seiten immer für Browser, die Standards richtig umsetzen, und füge dann evtl. notwendige Fehlerkorrekturen für IE ein.

<meta name="keywords" content="Christoph Koncz, Violine, Violinist, Geige, Geiger, Klaviertrio, Koncz-Trio, Koncz Trio, Streichquartett, Soliani-Quartett, Soliani Quartett, Soliani, Verbier, Verbier Festival Orchestra, UBS Verbier Festival Orchestra, VFO, European Union Youth Orchestra, EUYO, Hochschule, Universität, Louis Spohr Wettbewerb, The Red Violin, Die rote Violine, Red Violin, rote Geige, Wien, Österreich, Musiker, Musikerfamilie">

Willst du damit Suchmaschinen irgendwie beeindrucken? Suchmaschinen sind beeindruckt vom Inhalt auf der Seite, nicht von Schlagwörtern, schon gar nicht, wenn diese nichts mit dem Seiteninhalt zu tun haben.

<div id="menu">  
<h3 style="color:#660000; text-align:left">news&nbsp;| biographie&nbsp;| <a href="repertoire/index.html" target="_self" style="color:#660000; text-decoration:none">repertoire</a>&nbsp;| konzerte&nbsp;| presse&nbsp;| media&nbsp;| h&auml;ufige fragen&nbsp;| kontakt</h3>  
</div>

Du missbrauchst hier das h3-Element. Ein Menü ist sicher keine Überschrift. Die Angabe der Farbe und Textdekoration muss da auch nicht sein, die kommen ins Stylesheet. (http://forum.de.selfhtml.org/archiv/2005/8/t112627/#m713009)

Verzichte auf das target-Attribut und überlasse dem Nutzer, ob er die verlinkte im selber Fenster öffenen möchte oder nicht.

Das div-Element außenrum ist nicht notwendig.

Korrekte Auszeichnung wäre:

<ul id="menu">  
<li>news&nbsp;| biographie&nbsp;|</li>  
<li><a href="repertoire/index.html">repertoire</a>&nbsp;|</li>  
<li>konzerte&nbsp;|</li>  
<li>presse&nbsp;|</li>  
<li>media&nbsp;|</li>  
<li>h&auml;ufige fragen&nbsp;|</li>  
<li>kontakt</li>  
</ul>

Die Angaben zur Darstellung (auch Listenitems nebeneinander) mit CSS.

<div id="farbe1">  
</div>  
<div id="farbe2">  
</div>  
<div id="farbe3">  
</div>  
<div id="farbe4">  
</div>

Das soll Dekoration sein? Dann wäre ein Hintergrundbild ratsam.

[code lang=html]<p class="text" style="text-align:right; font-size:8pt">&nbsp;Deutsch&nbsp;&#x007C; <a href="../en/index.html" target="_self">English</a></p>

pt ist die denkbar schlechteste Einheit zur Schriftgrößenangabe auf Bildschirmen. Gib diese in relativen Einheiten an: em, %.

Was soll das "&nbsp;" vor "Deutsch"?

Warum schreibst du "&#x007C;" und nicht "|"? Die Verwendung von Enitities für Umlaute ist auch nicht erforderlich, sondern erschwert nur das Lesen des Quelltextes. (http://www.w3.org/International/questions/qa-escapes.html)

Live long and prosper,
Gunnar

[at]

Hallo.

Was soll das "&nbsp;" vor "Deutsch"?

Was soll ein   überhaupt, was man nicht besser mittels CSS bewerkstelligen könnte?
MfG, at

[Duci]

Hallo allerseits,

nachdem ich die gröbsten Browserunverträglichkeiten meiner Homepage ausgemerzt habe (Firefox scheint background-attachment nicht zu mögen), stehe ich nun vor einem kleineren, mir allerdings noch immer unverständlichen Problem.

Wenn man meine Site (http://home.pages.at/bachgasse-5b/ChK/de/) mit IE6 bzw. Firefox betrachtet, bemerkt man, dass der Text in beiden Spalten bei Firefox etwas weiter unten beginnt, obwohl dies bloß durch die Padding-Eigenschaft des div-Elements ("box" bzw. "auswahl") mit der gleichen Pixelanzahl festgelegt wird. (CSS: http://home.pages.at/bachgasse-5b/ChK/de/standard.css.)

Weiters ändert sich die Höhe des Elternelements bei Internet Explorer automatisch, falls der Text länger als die urspüngliche Höhe des Elements sein sollte - bei Firefox ist das nicht der Fall.

Kann man das beheben?

Besten Dank im Voraus,
Duci

[MudGuard]

Hi,

Firefox scheint background-attachment nicht zu mögen

Doch, mag er. Im Gegensatz zu IE setzt er es aber korrekt um (sprich: background-position wird bei background-attachment:fixed korrekt auf den Viewport bezogen).

Wenn man meine Site (http://home.pages.at/bachgasse-5b/ChK/de/)

Da solltest Du erstmal HTML draus machen.
Z.B: li-Elemente sind als Kinder von div nicht erlaubt.

Solange solche groben Fehler in der Seite sind, hat es überhaupt keinen Sinn, über Ursachen von Darstellungsunterschieden nachzudenken.

cu,
Andreas

[Gunnar Bittersmann]

Duci,

„Diese Seite ist optimiert für Microsoft Internet Explorer 6.0 bzw. Mozilla Firefox 1.0.6.“

ROTFL. Bei mir sieht die Seite weder im IE6 noch im FF1.0.6 vernünftig aus. Ich schick dir Screenshots per E-Mail. Du hättest wohl auch noch die Viewportgröße angeben müssen, für welche du die Seite „optimiert“ hast.

Lass diesen Spruch weg. Wie Cheatah immer so schön sagt: „Es existiert kein Weg, "für" etwas zu optimieren, sondern nur gegen alles andere.“ [Cheatah]

Live long and prosper,
Gunnar

[Ingo Turski]

Hi,

Wenn man meine Site (http://home.pages.at/bachgasse-5b/ChK/de/) mit IE6 bzw. Firefox betrachtet

warum legst Du nicht den IE mal beiseite und prüfst zunächs nur mit Firefox? Die dann evtl. übrig bleibenden Anzeigefehler des (nicht im) IE lassen sich meist recht einfach beheben.

Weiters ändert sich die Höhe des Elternelements bei Internet Explorer automatisch, falls der Text länger als die urspüngliche Höhe des Elements sein sollte - bei Firefox ist das nicht der Fall.

Logisch. Firefox hält sich an das, was Du im CSS angibst und daran, wie das nach der Spezifikation umgesetzt werden soll. s.o.
Wenn Du eine variable Höhe haben willst, dann darfst Du keine angeben und mußt dafür sorgen, daß der Elementenfluß im Elternelement nicht aufgehoben bzw. wiederhergestellt wird.

freundliche Grüße
Ingo

[Duci]

Das Problem ist weiters: bei meinen beiden Browsern werden die Seiten offensichtlich anders (und weitaus korrekter) dargestellt als bei Gunnar. Ich habe jetzt einmal zwei Screenshots gemacht (jeweils ca. 180 KB): http://home.pages.at/bachgasse-5b/ChK/img/IE60.JPG und http://home.pages.at/bachgasse-5b/ChK/img/FF106.JPG.

Gibt es eine Eigenschaft, mit der ich quasi die Mindesthöhe eines Elements einstelle, d.h. das Element zwar flexibel mit dem Inhalt mitgeht, aber nicht unter eine gewisse Höhe?

MfG
Duci

[Ingo Turski]

Hi,

Gibt es eine Eigenschaft, mit der ich quasi die Mindesthöhe eines Elements einstelle, d.h. das Element zwar flexibel mit dem Inhalt mitgeht, aber nicht unter eine gewisse Höhe?

Wie sollte Dir eine Mindesthöhe helfen? Du benötigst eine variable Höhe, da Du "unberechenbaren" Textinhalt hast. Dein Konzept ist einfach falsch! Du verwendest absolute Positionierung Elemente mit variablem Inhalt - sowas funktioniert nicht. Leider entdecken viele Anfänger zunächst die Eigenschaft position und denken sich, hiermit eine Seite aufbauen zu können. Deshalb gibt's in Selfhtml 8.1 ein neues Kapitel [http://de.selfhtml.org/css/layouts/@title=CSS-basierte Layouts], in dem hierzu die Anwendung von float aufgezeigt wird.

freundliche Grüße
Ingo

[Auge]

Hallo

http://home.pages.at/bachgasse-5b/ChK/img/IE60.JPG
http://home.pages.at/bachgasse-5b/ChK/img/FF106.JPG

Gibt es eine Eigenschaft, mit der ich quasi die Mindesthöhe eines Elements einstelle, d.h. das Element zwar flexibel mit dem Inhalt mitgeht, aber nicht unter eine gewisse Höhe?

Am besten, du lässt die Höhenangabe weg. Dann richtet sich die Höhe automatisch nach dem Inhalt. Ansonsten benutze min-height z.B. für FF und height für den MSIE.

Erklärung:
Der MSIE kennt die Eigenschaft min-height nicht. Er interpretiert aber height wie min-height, wohingegen z.B. der Firefox diese Größe (die von height) als absolut sieht, und den Inhalt deines Kastens über den unteren Rand hinausfließen lässt, so wie es der Standard vorsieht.
Nachdem du nun also min-height angegeben hast, musst du dem MSIE noch seine Angabe für height zukommen lassen. Du kannst dies über eine CSS-Browserweiche innerhalb der CSS-Deklarationen oder über eine extra CSS-Datei für den MSIE, die du per Conditional-Comments in die HTML-Datei lädst, erreichen.

Tschö, Auge

[Duci]

Ich habe jetzt eine min-height Angabe gemacht, allerdings keine Browserweiche gestellt; MEIN Internet Explorer 6.0 interpretiert es aber nach wie vor wie von mir gewünscht (ob "richtig", bleibt dahin gestellt). Auch die li-Angaben in einem div-Element (ohne ul-Angabe) wird bei mir wie gewünscht dargestellt ...
Eigentlich sieht die Seite jetzt bei MEINEN beiden Browsern (Internet Explorer 6.0, Firefox 1.0.6) fast "perfekt" aus, außer dass der Text bei Firefox noch immer ein bisschen weiter unten beginnt als beim Internet Explorer.
Ich habe die beiden Screenshots aktualisiert (und verkleinert, auf etwa 80 KB):
http://home.pages.at/bachgasse-5b/ChK/img/IE60.JPG
http://home.pages.at/bachgasse-5b/ChK/img/FF106.JPG

Meine größte Sorge im Moment ist, ob die Seiten bei euch auch so dargestellt werden. Gunnar hat mir nämlich Screenshots geschickt (von den gleichen Browsern, wohlgemerkt), und die Seite hat sehr chaotisch ausgesehen ...
Aber wie kann ich meine Ergebnisse überprüfen, wenn ich nicht sicher sein kann, dass sie nicht nur bei mir wie gewünscht dargestellt werden?

Duci

[Gunnar Bittersmann]

Hi Duci,

Meine größte Sorge im Moment ist, ob die Seiten bei euch auch so dargestellt werden. Gunnar hat mir nämlich Screenshots geschickt (von den gleichen Browsern, wohlgemerkt), und die Seite hat sehr chaotisch ausgesehen ...

Weil meine Browserfenster eine andere Größe hatten.

Aber wie kann ich meine Ergebnisse überprüfen, wenn ich nicht sicher sein kann, dass sie nicht nur bei mir wie gewünscht dargestellt werden?

Indem du z.B. deine Browserfenster mal unterschiedlich groß machst. Ja – es gibt nicht nur den Vollbildmodus. ;-)

Live long and prosper,
Gunnar

[Duci]

Schon, aber das Browserfenster war nicht das einzige Problem. Bei deinen Screenshots beispielsweise war die Liste vertikal und mit Punkten versehen, bei mir ist das überhaupt nicht der Fall. Das kann doch nicht nur mit der Fenstergröße zusammenhängen ...
Wie sieht es denn jetzt bei dir aus? Besser? ;)

Duci

[Detlef G.]

Hallo Duci

Aber wie kann ich meine Ergebnisse überprüfen, wenn ich nicht sicher sein kann, dass sie nicht nur bei mir wie gewünscht dargestellt werden?

Absolut sicher sein kannst du nie.
Du kannst die Wahrscheinlichkeit unerwarteter Ergebnisse aber reduzieren,
indem du prüfst, ob dein HTML und dein CSS valide ist.

Darüberhinaus solltest du deine Seite mit möglichst vielen (zumindest den
stark verbreiten) Browsern testen. Dazu gehört auch, das dies bei
verschiedenen Fenstergrößen _und_ Schriftgrößeneinstellungen erfolgt.
(vergrößere mal im Firefox die Schriftgröße)

Auf Wiederlesen
Detlef

[Duci]

Könnte mir vielleicht jemand den Gefallen tun und ein paar Screenshots posten bzw. mir als E-Mail schicken? Dann wüsste ich in etwa, wie es bei anderen aussehen kann ...

Mit bestem Dank
Duci

http://home.pages.at/bachgasse-5b/ChK/de/
mailto:[e-mail]