zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE9 Vs FF

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.11.2012, 00:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard IE9 Vs FF

Hallo,

ich bitte um Hilfe und nützliche Tipps zu Firefox (hier schaut alles super aus) Vs. IE9 (hier wird alles schrecklich dargestellt).

Ich weiß schon, dass unterschiedliche Browser Elemente unterschiedlich interpretieren aber mit so starken Unterschieden habe ich nicht gerechnet.
Mich interessiert v.a. warum IE die Box-Größen nicht richtig darstellt und auch Schriftgrößen so klein interpretiert?

Danke Stephan

Link zu meinem Projekt: http://jsfiddle.net/sfiddle/EbzMM/1/embedded/result/
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.11.2012, 00:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du siehst nur deshalb was von deinen Texten im Firefox, weil der eine Mindestschriftgröße in seinen Voreinstellungen hat.

Entferne die Schriftgrößenagabe von 75% aus dem Universalselektor. Deine Elemente haben eine Schriftgröße von 75% von 75% von 75% von 75% etc. Das sind ganze 2.85px für die p-Elemente in den Spalten.

Gib die Schriftgröße für das Body-Element an. Und zwar 100%. Schriftgröße wird vererbt. Bei Verschachtelungen musst du rechnen, als Hilfe kannst du von 16px als Default ausgehen.

Geändert von fricca (21.11.2012 um 00:38 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.11.2012, 12:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

font-size im Universalselektor finde ich auch sinnvoll, allerdings nur mit glatten 100%
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.11.2012, 22:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Du siehst nur deshalb was von deinen Texten im Firefox, weil der eine Mindestschriftgröße in seinen Voreinstellungen hat.

Entferne die Schriftgrößenagabe von 75% aus dem Universalselektor. Deine Elemente haben eine Schriftgröße von 75% von 75% von 75% von 75% etc. Das sind ganze 2.85px für die p-Elemente in den Spalten.

Gib die Schriftgröße für das Body-Element an. Und zwar 100%. Schriftgröße wird vererbt. Bei Verschachtelungen musst du rechnen, als Hilfe kannst du von 16px als Default ausgehen.
Zuerst mal Danke an fricca und heico. Schriftgrößen vererben?! alles klar. Ganz schön anstrengend allen Browsern gerecht zu werden. Hab ich jetzt mal angepasst und habe gleich 12px angegeben.

Ich hätte noch 3 Fragen zu IE vs. FF:

1. Ich habe ein 3 Spaltenlayout gewählt indem ich hier nachgebastelt habe: A List Apart: Articles: In Search of the Holy Grail . Wie ihr aber sehen könnte, begreift IE das nicht und setzt die Rechte Spalte einfach in der Mitte fort; WARUM?

2. warum tauchen beim IE9 so schreckliche blaue Umrandungen um meine Bilder herum auf?

3. Wie kann ich bei der <div class="box"> eine weite eingeben, sodass diese immer so groß ist wie das ganze Bild (22em)? Wenn ich diese Größe eingebe, kommt es zu einem overflow, wenn ich mit % arbeite und rechne/probiere, werden die Größen unterschiedlich vom Browser interpretiert.

4. Zusatz: Wie schaffe ich es, dass das <div class="hov"> Elemnt immer so hoch ist und genau bis zur <div class="box"> geht.

Mir ist es auch ein Rätsel, warum im jsfiddle die Abstände zwischen den Bildern nicht richtig dargestellt werden?!?!?

Jedenfalls hier nochmals der Link; diesmal auch mit Screenshots um das was ich meine zu verdeutlichen (gelb markiert)

http://jsfiddle.net/EbzMM/2/embedded/result/

Danke im Voraus

Stephan
Angehängte Grafiken
Dateityp: jpg IE9.JPG (125,9 KB, 9x aufgerufen)
Dateityp: jpg FF.JPG (142,6 KB, 9x aufgerufen)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.11.2012, 22:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von <--steph--> Beitrag anzeigen
3. Wie kann ich bei der <div class="box"> eine weite eingeben, sodass diese immer so groß ist wie das ganze Bild (22em)? Wenn ich diese Größe eingebe, kommt es zu einem overflow, wenn ich mit % arbeite und rechne/probiere, werden die Größen unterschiedlich vom Browser interpretiert.
OK, diese Frage habe ich mir jetzt schon selbst beantwortet. Für alle die das selbe Problem haben, einfach width: 100% bei <div class="box"> und overflow:hidden beim li-Element

Bleiben nur mehr die anderen 3 Fragen offen
Mit Zitat antworten
  #6 (permalink)  
Alt 21.11.2012, 22:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von <--steph--> Beitrag anzeigen
Zuerst mal Danke an fricca und heico. Schriftgrößen vererben?! alles klar. Ganz schön anstrengend allen Browsern gerecht zu werden.
Dabei geht es nicht um Browser bzw. Unterschiede in Browsern. Das ist ein CSS-Konzept.

Zitat:
Hab ich jetzt mal angepasst und habe gleich 12px angegeben.
Nicht gut. Bitte lesen: http://xhtmlforum.de/68394-em-versus...tml#post522500

Zitat:
1. Ich habe ein 3 Spaltenlayout gewählt indem ich hier nachgebastelt habe: A List Apart: Articles: In Search of the Holy Grail . Wie ihr aber sehen könnte, begreift IE das nicht und setzt die Rechte Spalte einfach in der Mitte fort; WARUM?
Es kommt zu Rundungsfehlern. Schau dir mit Firebug an, mit welchen Werten der Browser hantiert; die linke Spalte z.B. hat 249.6px -- was soll der Browser damit machen?

Aber: Du bist doch Anfänger. Lass bitte die Finger von diesem "Holy Grail". Du brauchst das nicht.
Erstell erstmal ein Spaltenlayout, indem du 3 Spalten nebeneinander floatest -- ohne negative Margins und ohne riesige untere Padding/Margin-Kombinationen.
Dann reden wir weiter.
Ich würde für den Anfang sogar sagen: Nimm Pixelbreiten. Fluide oder elastische Layouts brauchen etwas mehr Erfahrung.

Zitat:
2. warum tauchen beim IE9 so schreckliche blaue Umrandungen um meine Bilder herum auf?
Kann ich nicht nachvollziehen. Welcher Darstellungsmodus ist das?

Zitat:
3. Wie kann ich bei der <div class="box"> eine weite eingeben, sodass diese immer so groß ist wie das ganze Bild (22em)?
Lies bitte über das Boxmodell nach.
Wenn du ein Padding in Pixel angibst, gibt es keinen eindeutigen Wert mehr für eine Breite, um auf eine Gesamtbreite in em zu kommen.
Verwende einheitliche Einheiten.

Zitat:
4. Zusatz: Wie schaffe ich es, dass das <div class="hov"> Elemnt immer so hoch ist und genau bis zur <div class="box"> geht.
Nutz die Eigenschaften top und bottom (keine height), um das Element aufzuspannen.

Zitat:
Mir ist es auch ein Rätsel, warum im jsfiddle die Abstände zwischen den Bildern nicht richtig dargestellt werden?!?!?
Ich weiß nicht, was du meinst -- daran ändert auch das Rudel Satzzeichen nichts.
Ich finde diese ge-iframten Fiddles mit allen möglichen Zusätzen ohnehin wenig geeignet, um über Darstellungsdetails zu reden. Bitte such dir einen Freehoster und poste einen Link auf eine "richtige" Website.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.11.2012, 22:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von <--steph--> Beitrag anzeigen
OK, diese Frage habe ich mir jetzt schon selbst beantwortet. Für alle die das selbe Problem haben, einfach width: 100% bei <div class="box"> und overflow:hidden beim li-Element
Nein, das ist Murks.
Lies bitte, was ich dazu geschrieben habe.
Mit Zitat antworten
  #8 (permalink)  
Alt 22.11.2012, 00:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Dabei geht es nicht um Browser bzw. Unterschiede in Browsern. Das ist ein CSS-Konzept.

Nicht gut. Bitte lesen: http://xhtmlforum.de/68394-em-versus...tml#post522500
OK, bin wieder bei den 100%. Eine Feststellung: bei der Angabe 100% im Universalselektor, sind em Elemente z.B. img aber boxen länger. Ich vermute die stehen - ähnlich wie die Pixel-Angabe bei der Schriftgröße - im Zusammenhang. Habe die em's die größer geworden sind daher verkleinert.

Zitat:
Es kommt zu Rundungsfehlern. Schau dir mit Firebug an, mit welchen Werten der Browser hantiert; die linke Spalte z.B. hat 249.6px -- was soll der Browser damit machen?
Das lass ich mal beiseite; vielleich finde ich eine einfachere 3 Spaltenlösung.

Zitat:
Aber: Du bist doch Anfänger. Lass bitte die Finger von diesem "Holy Grail". Du brauchst das nicht.
Erstell erstmal ein Spaltenlayout, indem du 3 Spalten nebeneinander floatest -- ohne negative Margins und ohne riesige untere Padding/Margin-Kombinationen.
Dann reden wir weiter.
Ich würde für den Anfang sogar sagen: Nimm Pixelbreiten. Fluide oder elastische Layouts brauchen etwas mehr Erfahrung.
Stimmt, bin Anfänger, siehe oben - versuchs mal mit einem einfachen 3 Spalten float. EM möchte ich aber lassen, pixel sind mir zu unflexibel beim zoom-Verhalten.

Zitat:
Kann ich nicht nachvollziehen. Welcher Darstellungsmodus ist das?
Weiß nicht wass du mit Darstellungsodus meinst, es waren jedenfalls blaue Ränder um die images. einfach mit img {border: none} behoben.

Zitat:
Lies bitte über das Boxmodell nach.
Wenn du ein Padding in Pixel angibst, gibt es keinen eindeutigen Wert mehr für eine Breite, um auf eine Gesamtbreite in em zu kommen.
Verwende einheitliche Einheiten.
OK habe nachgelesen, SELFHTML: Navigationshilfen / Suche sagt mir aber, dass ich Maßeinheiten auch gemischt anwenden darf. Habe jetzt die li mit 15 em und div.box {} mit 100% angegeben, ohne padding. natürlich klebt der Text an den Rändern. mit % Angaben im Padding funktioniert es auch nicht. da hilft mir die Box-Nachlese auch nichts.

Zitat:
Nutz die Eigenschaften top und bottom (keine height), um das Element aufzuspannen.
Verstehe schon auf was du hinaus willst, aber wie würde das CSS dazu aussehen? habe jetzt bei div.hov a:hover top:0 und bottom:0 aber es funktioniert nicht.

Ich weiß nicht, was du meinst -- daran ändert auch das Rudel Satzzeichen nichts.
Zitat:
Ich finde diese ge-iframten Fiddles mit allen möglichen Zusätzen ohnehin wenig geeignet, um über Darstellungsdetails zu reden. Bitte such dir einen Freehoster und poste einen Link auf eine "richtige" Website.
OK.... ich nehme mir die Zeit für einen Freehoster den ich mir morgen aussuche. Hast du mit einem bestimmten gute Erfahrungen? Sehr hilfreich wäre es, wenn du einen Tipp hättest, wie ich den Freehoster benutzen kann, aber noch "incognito" bleibe, sprich von Suchmaschinen nicht gefunden werden kann.

Danke soweit: Aktualiesiert (noch immer auf fiddle) : http://jsfiddle.net/sfiddle/wqddZ/embedded/result/
Mit Zitat antworten
  #9 (permalink)  
Alt 22.11.2012, 01:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von <--steph--> Beitrag anzeigen
OK, bin wieder bei den 100%. Eine Feststellung: bei der Angabe 100% im Universalselektor, sind em Elemente z.B. img aber boxen länger.
Das ist kein verständlicher Satz.
Wie ich oben bereits schrieb: Gib die Schriftgröße im body an, nicht im Universalselektor. Wenn du gelernt hast, mit dem Prinzip der Vererbung umzugehen, dann kannst du irgendwann die Entscheidung treffen, es anders zu machen.
Zitat:
Ich vermute die stehen - ähnlich wie die Pixel-Angabe bei der Schriftgröße - im Zusammenhang. Habe die em's die größer geworden sind daher verkleinert.
Auch das ist unverständlich und klingt nach Ratespiel.
Vermutlich hast du soeben entdeckt, dass em eine schriftgrößenabhängige Einheit ist. Richtig. Und eben das macht den Umgang damit nicht einfach.
10em beim einen Element sind nicht 10em beim anderen Element.

Zitat:
Das lass ich mal beiseite; vielleich finde ich eine einfachere 3 Spaltenlösung.
Arbeite Little Boxes durch. Darin wirst du an Spaltenlayouts herangeführt -- und noch an vieles andere auch, was du im Moment versuchst, durch Trial&Error herauszufinden.

Zitat:
Stimmt, bin Anfänger, siehe oben - versuchs mal mit einem einfachen 3 Spalten float. EM möchte ich aber lassen, pixel sind mir zu unflexibel beim zoom-Verhalten.
Alle modernen Browser haben eine Seitenzoom-Funktion, die genau das macht, was du mit einem elastischen Layout erreichst. Du nimmst dem Besucher mit einem vollelastischen Layout die Möglichkeit, selbst zwischen Text-und Seitenzoom zu entscheiden.
Ich kann dir nur nochmal raten: Erarbeite dir zuerst die Grundlagen mit einem pixelbasierten Layout. Solange du dir bewusst bist, dass das nicht die perfekte Lösung ist, ist das ein guter Anfang.
Wirklich viel für deine Besucher kannst du dann später mit einem responsive Layout tun.

Zitat:
Weiß nicht wass du mit Darstellungsodus meinst, es waren jedenfalls blaue Ränder um die images.
Bei mir nicht.
Den Darstellungsmodus zeigen dir die Entwicklerwerkzeuge, drück F12.

Zitat:
OK habe nachgelesen, SELFHTML: Navigationshilfen / Suche sagt mir aber, dass ich Maßeinheiten auch gemischt anwenden darf.
Du darfst machen, was du willst. Aber 100% + 10px wird trotzdem nicht 22em sein.

Zitat:
Habe jetzt die li mit 15 em und div.box {} mit 100% angegeben, ohne padding. natürlich klebt der Text an den Rändern. mit % Angaben im Padding funktioniert es auch nicht. da hilft mir die Box-Nachlese auch nichts.
Dann hast du etwas falsch gemacht. Ich sehe kein Padding in deinem Code.

Zitat:
Verstehe schon auf was du hinaus willst, aber wie würde das CSS dazu aussehen? habe jetzt bei div.hov a:hover top:0 und bottom:0 aber es funktioniert nicht.
height muss weg, siehe oben!


Zitat:
OK.... ich nehme mir die Zeit für einen Freehoster den ich mir morgen aussuche. Hast du mit einem bestimmten gute Erfahrungen?
Nein, ich brauche keinen. Bemüh doch mal die Suchfunktion.

Zitat:
Sehr hilfreich wäre es, wenn du einen Tipp hättest, wie ich den Freehoster benutzen kann, aber noch "incognito" bleibe, sprich von Suchmaschinen nicht gefunden werden kann.
Wenn du deine Testcases mit unverfänglichen Inhalten füllst, ist es doch egal, was die Suchmaschinen machen
Ansonsten informier dich zur "robots.txt".
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.11.2012, 21:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.09.2012
Beiträge: 50
<--steph--> befindet sich auf einem aufstrebenden Ast
Standard

Hallo Corina,

zunächst einmal:

bin jetzt mit meiner Homepage auf einem Freehoster. Ich hoffe, dass erleichtert hier im Forum Hilfestellungen: Steven's page

Eigentlich ist das Thema nicht mehr IE9 vs. FF aber ich bleib mal hier.

Ich habe einige Ratschläge von dir angenommen. Teilweise tue ich mir leichter, andere Sachen kommen jetzt aber hinzu:

1. Ganz komisch finde ich es, dass sowohl im IE als auch FF die margins zwischen den 4 Bildern nicht eingehalten werden. Woran liegt das? Wenn ich es lokal von meinem Rechner öffne, funktioniert es super.

2. Das mit dem top/bottom aufspannen der div.hov habe ich nicht ganz verstanden. Kann mir hier jemand mit dem entsprechenden CSS Angabe helfen?

3. Dadurch, dass ich jetzt diese "Holy Grail" Geschichte zu Gunsten eines simpel gefloateten 2 Spalten Layouts aufgegeben habe, passiert jetzt genau dass was ich vermeiden wollte. Man siehts am gepunktelten Rand: dieser "wächst" nur solange mit, solange der Text Eintrag ist. Gibts hier einfache Herangehensweisen, das beide border gleich lang sind?

Danke für nützliche Ratschläge

Stephan

PS: ich bin der erste der den Gedanken Hilfe zur Selbsthilfe unterstützt, aber manchmal wäre ein bisschen CSS/HTML schon sehr hilfreich und v.a. für Anfänger motivierend
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE9 rendert eine Seite anders als Chrome, Firefox und Safari frimipiso CSS 9 04.03.2012 10:26
IE9 und CSS ballonteam CSS 16 04.11.2011 21:15
IE9 ungewollt im Kompat-Modus hubspe CSS 10 08.08.2011 12:07
Line-height, @font und der IE9 (beta) alexplus CSS 1 16.09.2010 23:27
IE9 Entwicklung hat begonnen. andir Offtopic 18 30.11.2009 14:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:44 Uhr.