z.T startke Abweichung im Design bei Browsern?

GeKiller · 29.10.2015

Ich erstelle grade in größeres Projekt für mich selber und ich habe dabei auch schon vieles gelernt, vor allem da ich mich mit Themen wie Sicherheit, bessererem Design aber auch OOP beschäftigt habe bzw. musste aber das ist alles nur privat, um das mal direkt richtig darzustellen.

Dabei habe ich jetzt aber das Problem, das in Firefox bei mir alles richtig dargestellt wird aber in dem IE und Chrome sieht das leider an einigen Stellen ganz anders aus, wobei die Darstellung beim IE und Chrome schon gleich aussieht. Hier mal ein paar Beispiele:
http://imgur.com/a/odJDw

Das erste ist dabei Firefox und die anderen beiden dann der IE und Chrome aber wieso sieht das so anders aus? Das ist ja schon ein sehr deutlicher Unterschied.

HIer auch noch mal ein Beispiel für einen Abstand, der auch schon ziemlich unterschiedlich ist.
http://imgur.com/a/rFc4f

Das erste Bild ist dabei wieder Firefox und das zweite Chrome. IE habe ich jetzt mal ausgelassen, da es ganz genau so aussieht im IE, wie auch in Chrome.

Wie kommt das, dass das teilweise doch so unterschiedlich ist? Die meisten Sachen in meinem Projekt sehen überall gleich aus aber 10 Sachen ungefähr leider nicht. Liegt das da an floats und negativen margins? Muss man dabei noch irgendetwas beachten?

Ich habe mal versucht, den ersten "Fehler" für den Chrome Browser auszugleichen und so sieht das CSS für den "Auswählen" Text in Firefox aus: (also wie es sein sollte)

CSS:

.b-select
{
    float: left;
    display: inline;
    margin-left: 145px;
    margin-top: -29px;
}

und so für die Checkbox:

CSS:

.select-Checkbox
{
    float: right;
    margin-right: 608px;
    margin-top: -25px;
    clear: left;
}

und so sieht das aus, wenn ich das in Chrome auch so ausrichten würde, also richtigstellen würde. Das hier ist dabei wieder für dien Auswählen Text:

CSS:

.b-select
{
    float: left;
    display: inline;
    margin-left: 15px;
    margin-top: -26px;
}

und das für die Checkbox:

CSS:

.select-Checkbox
{
  float: right;
  margin-right: 608px;
  margin-top: -25px;
  clear: left;
}

Das habe ich in diesem Element-untersuchen Werzeug in Chrome gemacht. Mir fällt der Name davon grade nicht ein aber ist ja auch egal. Wie kommt es da also zu diesen krassen Unterschieden? Über Vorschläge oder Ratschläge würde ich mich sehr freuen!

Entschuldigung übrigens für jedwede Fehler in meinem Thread hier aber meine Tastatur spinnt derzeit extrem. Ich musste so einiges korrigieren.

Jormungand · 29.10.2015

Für mich sieht es so aus, als würde beim Firefox der Abstand nach links den Kommentieren-Container beinhalten, während IE und Chrome ihn ausschließen.
Kannst du noch das HTML dazu schreiben?
Und wie sieht's mit dem umschließenden Container aus? Hast du da eine feste Höhe? Vielleicht wird da schon umgebrochen, weil die Breite nicht reicht und durch eine feste Höhe alles nebeneinander gequetscht.
Du könntest mal versuchen display: inline gegen display:block zu tauschen.

Wenn ich es mir so überlege, bin ich nur am Raten. Wenn du konkrete Tipps willst, wäre es sehr von Vorteil, wenn du die Seite online stellst und man in den Quelltext einsehen kann.

Myhar · 29.10.2015

CSS ohne das dazugehörige HTML ist relativ nutzlos. Das ist, wie wenn du zum Mechaniker fährst und sagst: Mein Auto ist blau, wieso fährt es nicht mehr.

patrick_l · 29.10.2015

Wie @Myhar und @Jormungand schon schrieben, bitte das dazugehörige Markup posten. Idealerweise das ganze lauffähig über , jsfiddle oder ähnlichem hier bereitstellen (verlinken). Was jetzt die eigentlich Frage bezüglich der unterschiedlichen Darstellung angeht, auf folgenden Artikel von Eric Meyer verweisen möchte.

- Webkraut: Verrückte Formulare

Dieser Artikel ist zwar schon etwas älter - genau gesagt aus dem Jahr 2007 - trotzdem gut auf das unterschiedliche Verhalten von Formular-Elementen eingeht. Zum besseren Verständnis lediglich auf die deutschsprachige Übersetzung von Eric Eggert verlinkt.

Um Browser auf einen Nenner zu bringen, sollte man schon zu beginn die Default-Werte zurücksetzen. Für selbiges gibt es bereits fertige CSS-Resets, die man schnell in eigene Projekte einfügen kann. Sei es das Reset CSS von Eric Meyer oder Normalize.css von Nicolas Gallagher und Jonathan Neal.

Liebe Grüße, Patrick

cebito · 29.10.2015

Myhar schrieb:
Das ist, wie wenn du zum Mechaniker fährst und sagst: Mein Auto ist blau, wieso fährt es nicht mehr.

Weil es deutlich mehr als 0.5‰ hat, ist doch klar. Wenn es wirklich blau ist schätz ich mal 1,5 bis 2‰ + X. Sollte ein Mechaniker eigentlich wissen und das Auto direkt in Therapie schicken

Und ja et TE, HTML bzw. noch besser ein Link zur Seite wären hier sehr Hilfreich.

Helpstar24 · 01.11.2015

Bzgl. Abweichungen und Browseroptimierung.

Vielleicht solltest du lernen deine Seite fehlerfrei zu programmieren. Sind diese valide sind Abweichungen äußerst unwahrscheinlich.

Abgesehen davon, kannst du mit CSS gezielt wirklich beinahe alles "korrigieren".

Mit einem CSS "Reset" kannst Du im Übrigen viele solcher Abweichungen verhindern.
Deswegen bau ich diese immer in meine Stylesheet Datei ein.

So gut wie keine Abweichungen.

GeKiller · 06.11.2015

@Jormungand Jo, das war es aber. Ich hatte das vergessen eine feste Höhe zu vergeben und dadurch wurde das dann verdrängt. Es sind aber dennoch zwischen den einzelnen Browsern noch kleine Abweichungen zu verzeichnen und teilweise ein bisschen extremer.

Ich werde heute Nachmittag oder vielleicht gegen Abend dann noch einmal meine Seite im Kleinformat bei CodePen oder so hochladen, damit ihr euch das live ansehen könnt. Dafür muss ich aber erst einmal einiges prüfen und auch das unwichtige entfernen. Meinen Server mache ich hier aber erst einmal nicht public. Dafür ist das ganze einfach noch zu unfertig und warscheinlich auch nicht ganz sicher.

@Helpstar24
Das versuche ich ja, sonst wäre ich nicht hier und warscheinlich viele andere auch nicht. Ich versuche daher ja von diesem Projekt zu lernen und hoffe hier natürlich auch auf Tipps & Erklärungen, was ich hier und da falsch gemacht habe.

Es ist ja auch noch kein Meister vom Himmel gefallen, oder? Deine Antwort hört sich auch irgendwie provokativ an aber das kann man so immer schlecht beurteilen aber sei's drum. Auf sowas würde ich mich sowieso nicht einlassen.

GeKiller · 07.11.2015

So, nach zigtausend Stunden habe ich es nun doch hingekriegt. Ich musste mich da auch erst einmal anmelden, da ich da auch noch keinen Account hatte. Die ganzen Links habe ich jetzt mal die ganzen Links, ID's usw. drin gelassen aber natürlich ohne die ganze Logik, also PHP und JS.

Zudem habe ich auch noch ganz viel unnötiges Zeug etc. enfernt aber jetzt könnt ihr es euch endlich auch mal direkt ansehen:

Irgendwie habe ich bei dem Footer auch noch Positionierungsprobleme, da sich der Content darin eigentlich immer genau in der Mitte ausrichten soll aber das macht er leider nicht und zudem will ich, das der Footer immer direkt am Ende des Fensters genau abschließt aber warum nimmt er nicht 100% ein? Selbst mit margin kriege ich es irgendwie nicht gefixt. Das Problem von oben besteht zudem auch noch. Das habe ich ja oben beschrieben.

Es wäre auch nicht schlecht, wenn ihr mir sagen könntet, was ihr bis jetzt von meinm Projekt haltet und was ihr noch verändern würdet oder ob ihr da noch Fehler findet, was sicherlich der Fall sein wird. Es ist aber wie gesagt mein erstes Projekt, das ich aber nur Hobbymäßig verfolge. Ich bitte also um Nachsicht.

Einige Bezeichnungen der Divs oder anderer Elemente sind übrigens noch nicht so treffend oder absolut nicht gut gewählt, aber es ja immer noch Work in Progress oder in-Dev.

@patrick_l
Ich habe mir diese Resets mal angeschaut aber man liest ja viel, das man da einiges beachten muss oder gibt es dazu irgendwo auch eine brauchbares Tutorial, was man da so alles beachten sollte? Ansonsten gibt es da wohl viele Probleme, wenn man gewisse Dinge nicht beachtet?

Myhar · 10.11.2015

Eine komplette Anleitung wie du Dinge in HTML mit CSS zentrieren kannst, mehr Möglichkeiten hast du nicht. Dein footer könnte zB mit margin: 0 auto zentriert werden, wenn man ihm eine Breite zuweist.

Bezüglich des fehlenden Abschlusses unten: Du verwendest keinen reset im CSS, deshalb hat dein body noch ein Standard-margin, welches hier angewandt wird. Verwende ein CSS reset, dann hast du solche Probleme nicht.

Was diese Boxen auf der Seite angeht: Hilfe, verwende doch nicht unnötige negative margins hier, sondern kümmere dich darum, dass die Boxen in einer sinnigen Reihenfolge vom HTML her ausgegeben werden. negative margins werden eigentlich fast nie benötigt, außer man weiß, was man tut. Gerade Anfänger verwenden diese leider dann doch und wundern sich, wenn dann unerwünschte Effekte auftreten. Und nicht nur negative margins, wenn du mit so Werten wie 428px die Position anpassen musst, dann sollte dir klar sein, dass das nicht notwendig ist, wenn ordentlich gearbeitet wurde.
Die Lösung dafür: Bau den HTML-Teil komplett um. Nein, eine schnelle und einfache Lösung gibts nicht dafür. Die sidebar-categories gehören in die selbe Spalte wie das sidebar-menu. Dann ordnen sie sich automatisch darunter an und du brauchst all diesen Positions-Pixel-Unsinn nicht.

GeKiller · 12.11.2015

Jo, davon habe ich ja auch schon einiges benutzt, um Elemente zu zentrieren.
Ich finde es oft aber schwer, wenn man vielleicht noch zigtausend andere Sachen hier oder da hat, alles zu berücksichtigen und ob das dann so auch noch passt.

Meinst du einen Reset im Sinne von

CSS:

*
{
    margin: 0px
    padding: 0px;
}

oder meinst du den CSS Reset von Eric Meyer oder diese Normalize.css von Nicolas Gallagher oder wie der Typ auch immer heißt.

Der CSS Reset von Eric Meyer erscheint mir ja schon ein wenig sehr krass, da man da dann ja wirklich für jedes einzelne Element beinahe alles neu setzen muss. Die normalize.css scheint da ja nicht ganz so "krass" vorzugehen, da da ja Standardwerte gesetzt werden.

Empfiehlt es sich denn eher, eine der anderen zu bevorzugen oder ist das im wesentlichen egal? Werden die Stylesheets denn auch in größeren Projekten verwendet oder macht man da selbst eher was?

Wenn ich aber einen CSS Reset verwende, dann geht der Footer aber trotzdem noch über 100% der Seite, was auch gut am Scrollbalken zu sehen ist. Zudem ist es dann auch beim normalize so, das die Schrif erst einmal generell sehr viel größer ist. Muss man dann die font-size für jedes Element auch noch einmal neu setzen? Das erscheint mir ein wenig sehr groß.

Was die Boxen angeht:
Ja, das mit dem margin von 400+ kam mir auch schon ein wenig extrem vor aber das ist wie gesagt das erste Projekt, was ich so mache. Ich will ja auch schließlich was daraus lernen. Da ist ja auch wieder die Frage, wann man denn dann die negativen margins verwenden sollte? So allgemeine Beispiele findet man immer aber wenn es dann um einen größeren Umfang geht, findet man Hilfe so einfach nicht mehr oder Tutorials / Erklärungen.

Aber warum gibt es da keine einfache Lösung? Ich habe jetzt das margin entfernt und clears eingebracht und jetzt sieht das auch weiterhin so aus wie vorher:

Nur ist jetzt leider der Content nach unten gerutscht? Mache ich da noch irgendwo was falsch? Übrigens ist es lustig, das viele hier nach einem Link oder dem Code dazu gefragt haben, aber das keiner von denen Antwortet.

Mal was nebenbei:
Wenn ich so die font-size für ein Passwort Feld setzen will, dann funktioniert das zwar anscheinend im IE und in Firefox aber Chrome scheint das nicht zu beeindrucken.

CSS:

input[type=password]
{  
  font-size: 16px;
}

Die * (Sternchen) die Chrome dann da einsetzt sind schon ziemlich klein. Wie kriege ich das hin, das Chrome mir da auch die font-size entsprechend setzt?

Myhar · 12.11.2015

Ad CSS-Reset: Das wichtigste (meiner Meinung nach, darüber lässt sich aber streiten) ist, dass margin und padding für alle Elemente auf 0 gesetzt wird. Natürlich darf und muss man dann überall wieder Abstände setzen, aber dafür hat man dann nicht solche Probleme wie du sie hast. Jetzt ist es interessant zu wissen, dass CSS Befehle auch vom Browser verarbeitet werden müssen und das unterschiedliche Selektoren eine unterschiedliche Geschwindigkeit haben. Schreibt man zB * als Selektor, dann muss der Browser alle Elemente durchgehen und auch alle Kindelemente etc. Das dauert länger, als wenn du "div" angibst. Ja, auch da muss er alle divs durchgehen, aber das schaffen die Browser schneller. Wobei schneller hier im ms-Bereich liegt, es also bei kleinen und normal großen Seiten keinen Unterschied macht. Der Herr Meyer legt Wert auf die Geschwindigkeit, deshalb schreibt er nicht * sondern zählt jedes Element einzeln auf. Kommt in Summe auch auf * raus, ist aber schneller. Bei deiner Seite wirst du hier keinerlei Unterschied merken, deshalb nimm ruhig * . Hat deine Seite mal eine Größe wie die ganz großen Seiten (Facebook, Google, ...) dann kannst du dir über so was Gedanken machen.

Das heißt, du kannst den Block von Meyers auf * { } zusammenfassen. Das font-size, font, align ... ist jetzt nicht sooo wichtig, das passt auch ohne reset zu >90%.
Hilft dir das bei der Entscheidung, bezüglich CSS-Reset?

Ad Footer:
Der ist nicht über 100% breit. Es schaut so aus, aber das kommt daher, dass du deinen Boxen fixe Breiten zuweist. Ist der verfügbare Bereich dann kleiner als die Summe deiner Boxen, dann wird die Seite horizontal scrollbar. Dadurch wird auch der footer so breit, da er ja 100% der Seite (nicht Bildschirmgröße) hat.

Ad Content:
Das hat etwas damit zu tun, dass du dir noch die Grundlagen von floats (&CSS, HTML) anschauen solltest. Es kommt bei floats sehr darauf an, in welcher Reihenfolge du die HTML-Elemente definierst. Steht auch kurz in meinem ersten Post: Bau den HTML-Teil komplett um. Das war übrigens ernst gemeint, nur mit CSS kannst du da nichts machen. zum Anfang reicht es, wenn du dir denkst, dass du mit floats Elemente von links nach rechts (oder umgekehrt) anordnen kannst. Füge in deinem HTML also zuerst die linke Spalte, dann die mittlere und dann die rechte Spalte ein. Dann floatest du die 3 Spalten mit float left und du hast dein gewünschtes Verhalten.
Das ist für einen Anfänger, bis man die Grundlagen von floats verstanden hat, ausreichend.

Ad negative margins:
Du verwendest sie am besten nie. Zumindest nicht bei deinen ersten Seiten und wenn du noch am lernen bist. Da wo du sie verwenden musst: Wenn du Elemente überlappen lassen willst. Das wäre der hauptsächliche Grund der mir als erstes einfällt.