Unterschied in der Darstellung IE/FIREFOX

[Max]

Ich hätte eine Frage bezüglich einer Seite die ich für meine Lebensgefährtin gemacht habe.

Im Firefox wird diese so Dargestellt, wie es sein sollte. Im IE wird die Überschrift rechts neben der Grafik zu hoch dargestellt :(

Frage meinerseits:

Ist das ein Fehler den ich mache, oder darf ich einfach über den IE schimpfen? *gg*

Ach ja die Seite musikzwerge.at

[Gunnar Bittersmann]

@@Max:

Ach ja die Seite http://musikzwerge.at

Ach ja, der Hinweis Forums-Hilfe, Formatierung von Postings. Eigentlich kaum zu übersehen.

#musik {  
 height: 80px;  
 height: 0px;  
}

Was soll die doppelte Angabe? Und 0px ist sicher keine gute Idee.

#musik {  
 line-height: 0px;  
}

Dito.

Überhaupt keine gute Idee ist auch

#menu {  
 position: fixed;  
}

Hat der Nutzer eine Viewportgröße, die nicht deinen Vorstellungen entspricht – wovon immmer auszugehen ist –, dann ragen die unteren Menüpunkten aus dem Viewport heraus und der Nutzer hat keine Möglichkeit herunterzuscrollen. Dein Impreesum bspw. ist nicht erreichbar.

Außerdem benutzt du HTML-Elemente nicht sinnentsprechend. Die Hauptüberschrift ist 'h1', nicht 'h3'! Die Überschrift der nächsten Ebene 'h2'.

Live long and prosper,
Gunnar

[Max]

Zuerst mal vielen ank für Deine Antwort! :)

@@Max:

Ach ja die Seite http://musikzwerge.at

Ach ja, der Hinweis Forums-Hilfe, Formatierung von Postings. Eigentlich kaum zu übersehen.

Sorry!

#musik {

height: 80px;
height: 0px;
}

>   
> Was soll die doppelte Angabe? Und 0px ist sicher keine gute Idee.  
  
Also die doppelte Angabe ist natürlich Schwachsinn! (Über seinen eigenen Mist darf man soetwas doch sagen ;)  
  
Bin mir nicht sicher, kann aber an den Experimenten liegen die ich schon hinter mir habe eben wegen meines Problems...  
  
Werde ich natürlich ändern. (Ob DAS daran Schuld ist kann ich leider erst am Abend versuchen. Hier steht mir kein IE zur Verfügung)  
  

> ~~~css

#musik {  

>  line-height: 0px;  
> }

Dito.

Überhaupt keine gute Idee ist auch

#menu {

position: fixed;
}

>   
> Hat der Nutzer eine Viewportgröße, die nicht deinen Vorstellungen entspricht – wovon immmer auszugehen ist –, dann ragen die unteren Menüpunkten aus dem Viewport heraus und der Nutzer hat keine Möglichkeit herunterzuscrollen. Dein Impreesum bspw. ist nicht erreichbar.  
>   
  
Das habe ich befürchtet...  
  
Irgendwie bin ich halt davon ausgegangen, das mit so einer kleinen Auflösung niemand "unterwegs" ist. Gefallen würde es mir so nämlich viel besser, als wenn ALLES scrollt.  
  
Werde ich mir nochmal durch den kopf gehen lassen!  
  

>   
> Außerdem benutzt du HTML-Elemente nicht sinnentsprechend. Die Hauptüberschrift ist 'h1', nicht 'h3'! Die Überschrift der nächsten Ebene 'h2'.  
>   
  
Das habe ich als "nicht so schlimm" angesehen. Wenn dem so ist muß ich das natürlich ändern.

[Gunnar Bittersmann]

@@Max:

Irgendwie bin ich halt davon ausgegangen, das mit so einer kleinen Auflösung niemand "unterwegs" ist.

Gerade die, die "unterwegs" sind, haben kleine Viewports. Oder hast du schon mal jemanden einen 17-Zoller mit sich rumschleppen und an sein Handy anschließen sehen?

Gefallen würde es mir so nämlich viel besser, als wenn ALLES scrollt.

Geschmackssache. Dann müsstest du aber dafür sorgen, dass das feststehende Menü seine eigene Scrollbar erhält, wenn dessen Inhalt nicht vollständig zu sehen ist.

Was mir noch auffiel: Warum steht bei dir immer 'ü' u.dgl. im Quelltext anstatt 'ü'?

„Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden.“ [QA-ESCAPES]

Live long and prosper,
Gunnar

[Max]

Gerade die, die "unterwegs" sind, haben kleine Viewports. Oder hast du schon mal jemanden einen 17-Zoller mit sich rumschleppen und an sein Handy anschließen sehen?

Mit "unterwegs" meinte ich nicht mobil, sondern im I-Net ;)
Wie auch immer: Du hast Recht, und ich habe es dahingehend abgeändert!

Was mir noch auffiel: Warum steht bei dir immer 'ü' u.dgl. im Quelltext anstatt 'ü'?

„Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden.“ [QA-ESCAPES]

Tja, eigentlich war es mühsam diese zu verwenden.
Warum ich das getan habe, hat den folgenden Grund:
Einfach weil ich beim testen von verschiedenen Rechnern (Nicht meine!) ich leider festgestellt habe daß MANCHMAL die Zeichen nicht darstellbar waren...

Warum auch immer?!

Frage:

Nun habe ich die von Dir kritisierten Punkte (noch nicht die 'ü' u.dgl.) ausgebessert. Leider ist nach wie vor das Problem das IE7 einfach deutlich höher als Firefox darstellt!  (IE6 macht überhaupt Unsinn. Aber wenn ich ehrlich bin will ich dafür nicht den Code weiter aufblasen, um die Seite im IE6 auch noch "richtig" darstellen zu können)

Hast Du noch eine Idee was ich da machen könnte?

Danke für Deine Hilfe(n) schon mal jetzt.

lg

Max

[Gunnar Bittersmann]

@@Max:

Tja, eigentlich war es mühsam diese [Zeichenreferenzen] zu verwenden.

Eben.

Warum ich das getan habe, hat den folgenden Grund:
Einfach weil ich beim testen von verschiedenen Rechnern (Nicht meine!) ich leider festgestellt habe daß MANCHMAL die Zeichen nicht darstellbar waren...
Warum auch immer?!

Vermutlich, weil der Browser nicht die tatsächlich verwendete Zeichencodierung übermittelt bekam.

Nun habe ich die von Dir kritisierten Punkte (noch nicht die 'ü' u.dgl.) ausgebessert.

<h1>Musikalische Fr&uuml;herziehung</h1>  
<h4>bei den Musikzwergen</h4>

ist immer noch keine sinnvolle Auszeichnung. Das ist doch _eine_ Überschrift!* Also

<h1>Musikalische Früherziehung bei den Musikzwergen</h1>

Wenn du jetzt einen Teil davon anders darstellen (hervorheben) willst:

<h1><strong>Musikalische Früherziehung</strong> bei den Musikzwergen</h1>

So kannst du die unterschiedlichen Schriftgrößen angeben und den Umbruch erzwingen:

h1  
{  
  font-size: 1em;  
  font-weight: normal;  
}  
  
h1 strong  
{  
  display: block;  
  font-size: 1.5em;  
  font-weight: normal;  
}

Und dann weg mit dem 'line-height' und 'vertical-align', stattdessen 'margin' für 'h1' oder 'padding' für '#musik'.

Und dann vergrößere mal die Schrift (Strg + im FF und IE7)! Wie du siehst, ist #musik {height: 90px} völliger Murks.

Live long and prosper,
Gunnar

* Ob 'h1' oder 'h2' liegt im Auge des Betrachters.

Aber <a href="http://www.musikzwerge.at/"><img src="bilder/musikzwerge_kl.png" alt="www.musikzwerge.at"></a> ist wohl auch eine Überschrift 'h1'.

[Max]

Vermutlich, weil der Browser nicht die tatsächlich verwendete Zeichencodierung übermittelt bekam.

Das habe ich mir eben auch gedacht. Da ich das aber leider nicht beeinflussen kann, ausser eben mit den Entitäten, dachte ich mir "Mach ich mir halt die Mühe..."
Muß das sicher auch noch beobachten. Mal sehen wie ich das weiterhin mache...

ist immer noch keine sinnvolle Auszeichnung. Das ist doch _eine_ Überschrift!* Also

<h1>Musikalische Früherziehung bei den Musikzwergen</h1>

Wenn du jetzt einen Teil davon anders darstellen (hervorheben) willst:

<h1><strong>Musikalische Früherziehung</strong> bei den Musikzwergen</h1>

So kannst du die unterschiedlichen Schriftgrößen angeben und den Umbruch erzwingen:

h1

{
  font-size: 1em;
  font-weight: normal;
}

h1 strong
{
  display: block;
  font-size: 1.5em;
  font-weight: normal;
}

>   
>   
> Und dann weg mit dem 'line-height' und 'vertical-align', stattdessen 'margin' für 'h1' oder 'padding' für '#musik'.  
  
margin für h1! :) Juhuuuu DAS war die Lösung. Padding habe ich schon früher mal versucht. leider ohne Erfolg...  
  

> Und dann vergrößere mal die Schrift (Strg + im FF und IE7)! Wie du siehst, ist `#musik {height: 90px}`{:.language-css} völliger Murks.  
  
Sch... Da muß ich wohl nochmal ran...  
  
Danke auch für diesen Tip!!!  
  

> \* Ob 'h1' oder 'h2' liegt im Auge des Betrachters.  
>   
> Aber `<a href="http://www.musikzwerge.at/"><img src="bilder/musikzwerge_kl.png" alt="www.musikzwerge.at"></a>`{:.language-html} ist wohl auch eine Überschrift 'h1'.  
  
Vermutlich ein Wink mit dem Zaunpfahl, aber SORRY ich versteh ihn nicht \*schäm\*  
  
lg  
  
Max  
  
PS: Stehe SEHR TIEF in Deiner Schuld!!!  
Danke nochmals für die Zeit, die Du geopfert hast!  
  
PPS: Deine Meinung interessiert mich sehr: Würdest DU die Probleme mit dem IE6 auf "meiner" Seite ausmerzen?  
Irgendwie reicht es mir nämlich jetzt schon, habe viel Mühe gehabt die Seite HTML und CSS konform zu "basteln", und erst bei einer Bekannten dann festgestellt: "Aha im IE sieht das aber anders aus..."  
Ich dachte mir halt ich halte mich an die Norm, und dann wird das schon gut sein. Das erwachen war ein böses \*gg\*

[Gunnar Bittersmann]

@@Max:

Vermutlich, weil der Browser nicht die tatsächlich verwendete Zeichencodierung übermittelt bekam.

Das habe ich mir eben auch gedacht. Da ich das aber leider nicht beeinflussen kann

Doch, das kannst du. [QA-HTACCESS-CHARSET]

Aber <a href="http://www.musikzwerge.at/"><img src="bilder/musikzwerge_kl.png" alt="www.musikzwerge.at"></a> ist wohl auch eine Überschrift 'h1'.

Vermutlich ein Wink mit dem Zaunpfahl, aber SORRY ich versteh ihn nicht *schäm*

<h1><a href="http://www.musikzwerge.at/"><img src="bilder/musikzwerge_kl.png" alt="www.musikzwerge.at"></a></h1>

PPS: Deine Meinung interessiert mich sehr: Würdest DU die Probleme mit dem IE6 auf "meiner" Seite ausmerzen?

Ja. Der ist leider immer noch sehr verbreitet.

Du bist schon dabei? Sieht ja schon viel besser aus als vorhin.

Irgendwie reicht es mir nämlich jetzt schon, habe viel Mühe gehabt die Seite HTML und CSS konform zu "basteln", und erst bei einer Bekannten dann festgestellt: "Aha im IE sieht das aber anders aus..."
Ich dachte mir halt ich halte mich an die Norm, und dann wird das schon gut sein. Das erwachen war ein böses *gg*

Das kenne ich.

Live long and prosper,
Gunnar

[Max]

Doch, das kannst du. [QA-HTACCESS-CHARSET]

Diesbezüglich bin ich noch am Überlegen. Werde ich mir wohl aufheben, bis ich bei einem Bekannten bin, bei dem es ohne eben nicht ging...

Aber ein so schlimmer Fehler dürfte das ja nicht sein. Nur eben mühsam beim erstellen... (Werde mal langsam beginnen neuen Onhalt nicht zu "übersetzen")

PPS: Deine Meinung interessiert mich sehr: Würdest DU die Probleme mit dem IE6 auf "meiner" Seite ausmerzen?

Ja. Der ist leider immer noch sehr verbreitet.

Du bist schon dabei? Sieht ja schon viel besser aus als vorhin.

Also ich habe gestern noch einige Ändeerungen vorgenommen, das nun die Seite auch im IE6 nun "richtig" aussieht ;)

Irgendwie reicht es mir nämlich jetzt schon, habe viel Mühe gehabt die Seite HTML und CSS konform zu "basteln", und erst bei einer Bekannten dann festgestellt: "Aha im IE sieht das aber anders aus..."
Ich dachte mir halt ich halte mich an die Norm, und dann wird das schon gut sein. Das erwachen war ein böses *gg*

Das kenne ich.

Arrrrg...

Mein Fehler war, das ich links rechts und oben angegeben habe (Die pos im Div).
Dann kann der IE6 nicht richtig die Breite berechnen :(

Wie auch immer: Nun geht es :)

lg

Max

PS: Und Danke nochmals!!!

[Ingo Turski]

Hi,

Ist das ein Fehler den ich mache, oder darf ich einfach über den IE schimpfen? *gg*

es ist nicht direkt ein Fehler. Aber wenn Du willst, dass alle Browser der Überschrift ein bestimmtes margin geben, solltest Du dies auch im CSS angeben und Dich nicht am Default-Stylesheet nur eines Browsers orientieren.

freundliche Grüße
Ingo

[Max]

es ist nicht direkt ein Fehler. Aber wenn Du willst, dass alle Browser der Überschrift ein bestimmtes margin geben, solltest Du dies auch im CSS angeben und Dich nicht am Default-Stylesheet nur eines Browsers orientieren.

freundliche Grüße
Ingo

Danke für den Tip.

lg

Max

PS: Sehr Informative Seite die Du erstellt hast.
Danke für die Mühe die Du Dir gemacht hast sie zu erstellen!