CSS-Browserweiche

Allgemeine Diskussionen, sonstige Fragen und Plauder-Ecke

CSS-Browserweiche

Beitragvon gabischatz » 11.11.2010 13:59

Hi und guten Morgen,
ich überarbeite gerade meine Internetseite http://www.spielmannszug-badlangensalza ... index.html und wollte Browser abhängige Style erstellen
mein versuch das über (siehe Code) zu realisieren ist bis jetzt gescheitert weil ich für Safarie, Opera, Firefox dieses nicht hinbekomme und weil ich nicht den richtigen Code im Netz finden konnte.
Code: Alles auswählen
<!--[if IE]>
    <style type="text/css">@import url(css/ie.css);</style>
  <![endif]-->
Die einzige Möglichkeit die ich gefunden habe sind Browser abhängige Hak.
Beispiele:
Code: Alles auswählen
/*Opera browser hack muss unbedingt vor Safari  */
@media all { div.c-2{margin-top:5px; padding-top:0px;}   }
/*Opera browser hack muss unbedingt vor Safari */ 


/* Safari all browser hack muss unbedingt nach Opera  */ 
@media screen and (-webkit-min-device-pixel-ratio:0){
div.c-2{margin-top:-7px; padding-top:0px;} }
/* Safari all browser hack muss unbedingt nach Opera  */

/* FireFox 3 */
div .c-2, x:-moz-any-link, x:default{
   margin-top:-7px; padding-top:0px;
  } 
iframe, x:-moz-any-link, x:default{
  border-style:none;
  } /* FireFox 2 */
div .c-2, x:-moz-any-link{
   margin-top:-7px; padding-top:0px;
  } 
iframe, x:-moz-any-link{
  border-style:none;
  } 
/* Only FireFox 3 */
html>/**/body div .c-2, x:-moz-any-link, x:default{
   margin-top:-7px; padding-top:0px;
   }
html>/**/body iframe, x:-moz-any-link, x:default {
  border-style:none;
  }

Schöner wäre es aber die Styles in separate Dateien zu packen.
Nachtrag: folgender Code Positioniert GoogleChrome, Safarie, Opera, Firefox exakt auf die gleich Position.
was ich dabei nicht verstehe ist wenn ich danach margin-top:0px; schreibe wird dieses durch die Browser ignoriert
Beispiel:
Code: Alles auswählen
/* Google Chrome, Safarie, Opera, Firefox  browser hack */
body:nth-of-type(1) .c-2{margin-top:50px;}

Nachtrag: Opera positioniert auf ca. -10px
MfG gabischatz
gabischatz
Sehr engagiertes Mitglied
 
Beiträge: 246
Registriert: 11.07.2010 11:22
Wohnort: Bad Langensalza, Thüringen

Advertisement



Registrieren Sie sich, um diese Anzeige nicht mehr zu sehen!
 

Re: CSS-Browserweiche

Beitragvon Manfred62 » 11.11.2010 20:07

Ach du dickes Ei..... was treibst du da?? :o
Du hast doch Little Boxes. Steht da etwas von solchen Hacks für "gute" Browser??

Wenn Browser extra angesprochen werden müssen, sind dies i.d.R. die IE's (und nur die!!)

Ein ganz einfacher Tipp --> erstelle simplen logischen und validen Code. Dann gehts fast immer überall.
Manchmal ist es besser, ein Projekt neu aufzusetzen, als an bestehendem (kaputtem) Code rum zudoktorn.
Dann brauchst du solchen ?%$§"#>* nicht. Vor allem hast du dann keine "seltsamen" Neben-Effekte, die du nicht verstehst.

Wirf mal einen Blick hier rein:
http://validator.w3.org/check?verbose=1 ... index.html
Da sind teils gravierende Fehler drin...

Falls du ein Forum zu solchen Themen suchst --> http://xhtmlforum.de/

Gruß Manfred
Windows 7 | Scriptly 0.8.95.6.COM
Manfred62
Ambitioniertes Mitglied
 
Beiträge: 52
Registriert: 12.09.2009 17:29
Wohnort: Ludwigsburg

Re: CSS-Browserweiche

Beitragvon gabischatz » 12.11.2010 01:02

Hi Manfred,
Habe ich gelesen steht hat nicht alles drin, und das was ich da geschrieben habe funktioniert ja auch und wenn du nochmal den Validator anschaust wirst du sehen, dass bis auf 1Fehler alles korrekt ist. Ich war noch nicht ganz fertig als ich vorhin geschrieben habe. Leider kann ich den 1Fehler nicht finden, schade sonst wäre die Seite valide. ;) Du kannst dir die Seite ja mal in allen WIN-Browsern anschauen und dann berichte mal was noch nicht hin haut. :lol:
MfG. gabischatz
gabischatz
Sehr engagiertes Mitglied
 
Beiträge: 246
Registriert: 11.07.2010 11:22
Wohnort: Bad Langensalza, Thüringen

Re: CSS-Browserweiche

Beitragvon Manfred62 » 12.11.2010 12:28

Zum Fehler: einfach googlen nach
there is no attribute "data-tooltip"

Dann landest z.B. hier: http://click.1134972.n2.nabble.com/HTML ... 83298.html
Fazit: du verwendest html 5. Validiert natürlich mit deinem Doctype nicht (kann man aber ändern).

Deine ganze Seite ist ein wildes Mischmasch aus allen Techniken. Weniger wäre mehr.
Man hat den Eindruck, du willst auf zig Hochzeiten gleichzeitig tanzen. Nur... du kannst garnicht tanzen.

BTW: ich hab tatsächlich tags entdeckt, welche noch keine id und/oder class haben... 8-)
Du solltest Little Boxes noch mal in Ruhe lesen (und auch mit Verständnis umsetzen).

Was auch ganz wichtig ist --> Barrierefreiheit.
Bei dir nicht vorhanden (Bsp: Navigation als ImageMap).

Aber jedem, wies gefällt.

Manfred
Windows 7 | Scriptly 0.8.95.6.COM
Manfred62
Ambitioniertes Mitglied
 
Beiträge: 52
Registriert: 12.09.2009 17:29
Wohnort: Ludwigsburg

Re: CSS-Browserweiche

Beitragvon Hannes » 12.11.2010 13:31

Ich habe mich gestern enthalten, eine ähnliche Antwort zu geben wie Manfred62, um mich nicht unbeliebt zu machen, aber vielleicht hilft's im Endeffekt doch, wenn man eine zweite Meinung hört.
Das Ganze ist grauenhaft, und eigentlich ist CSS und HTML dafür gut, eine sehr, sehr einfache und übersichtliche Codierung für Webseiten zu machen. Du tust Dir etwas Besseres, wenn Du eine sehr simple, mit CSS sauber top-down strukturierte Seite machst. Mein "Trick" ist, bei der Neuentwicklung eines Projektes den Computer erstmal gar nicht einzuschalten (dafür verbrauche ich halt Unmengen Kaffee, kariertes Papier und Bleistiftminen ;-)). Wenn schon Browserweichen notwendig erscheinen, ist ganz von Anfang an etwas schief gelaufen
Hannes
 
Beiträge: 7
Registriert: 09.11.2010 10:20

Re: CSS-Browserweiche

Beitragvon Manfred62 » 12.11.2010 13:42

Hannes hat geschrieben:..um mich nicht unbeliebt zu machen..

@Hannes.. nun sind wir beide unbeliebt :mrgreen:

Gruß Manfred
Windows 7 | Scriptly 0.8.95.6.COM
Manfred62
Ambitioniertes Mitglied
 
Beiträge: 52
Registriert: 12.09.2009 17:29
Wohnort: Ludwigsburg

Re: CSS-Browserweiche

Beitragvon gabischatz » 12.11.2010 16:38

Hi Ihr beiden,
Ihr seid noch nicht unbeliebt :lol:
Jede Meinung ist Willkommen, nur kann ich nicht eine Vereinsseite so einfach Komplett umkrempeln ohne den Vorstand davon in Kenntnis zu setzen.
Außerdem wollte ich mit der Browserweiche nur Unzugänglichkeiten zwischen den Browsern beheben. So muss man bei iframe in Verbindung mit Border border-style:none; angeben, bei allen anderen Browsern geht es im HTML-TAG. Aber wenn wir schon mal dabei sind wie bekomme ich die Scrollleisten von ifame mit CSS3 weg?
MfG gabischatz
Ps. ich habe Die Seite jetzt schon als Snippet als HTML5, CSS3 valide ohne Fehler, leider eine Warnung :P
gabischatz
Sehr engagiertes Mitglied
 
Beiträge: 246
Registriert: 11.07.2010 11:22
Wohnort: Bad Langensalza, Thüringen

Re: CSS-Browserweiche

Beitragvon Manfred62 » 12.11.2010 18:19

gabischatz hat geschrieben:Ihr seid noch nicht unbeliebt...


Hallo

Nochmal zum Verständnis:
Man braucht KEINE Browserweichen (korrekter Code genügt vollkommen)
iframes sind ganz arg bäääh.... (wozu überhaupt?)
Was fährst du so auf html5 und css3 ab?? Lern doch erstmal das aktuelle!
Von der Zielgruppe und mangelhaften Browserunterstützung mal ganz abgesehen.

Thema:
Spielmannszug --> Tradition (seit 03. April 1946), Kultur, Brauchtum, Vereinsleben
Du merkst worauf ich hinaus will??

Als ich die Seite das erste Mal sah, dachte ich, ein Scriptkiddie hat seine ersten Versuche im Web gemacht...

Was sollen diese Comics, alles zappelt, flasht, läuft und blinkt... da kriegt man ja Augenkrebs.
Stichwort Augen: Erika Lehmann wird heute 70 Jahre alt. Glaubst du, die hat Freude an Schriftgrößen in 10 od. 12px ??

Die Seitenstruktur ist grausam. Alles bunt, wild durcheinander, dicht gedrängt, keine Ordnung.
Kein durchgängiger Stil. Semantik Fehlanzeige! Aber hauptsache sämtliche Counter, Wetter- und sonstige Widgets sind vorhanden.

Bei der Breite 808px (warum?) nimmt man maximal ein 2 Spaltenlayout.
Dann mit vernünftiger Schriftgröße (90-100%), alle weiteren in em.

Technische Umsetzung: sorry, Müll! Die zig Klassen (c..) hat dir Scriptly generiert?
Zudem mehrere Stylesheets, tonnenweise JavaScript, CSS im html usw...
Dein Code sollte verständlich sein (id und class Namen mit Wiedererkennungswert).
Du hast die divititis und classisitis, ist gott sei dank nicht ansteckend.

Den Hauptbereich absolut positioniert --> gehts noch??
Verkleinere den Browser, die linke Seite verschwindet im Nirwana.

Barrierefreiheit: navigier mal mit der Tabtaste durch deine Seite. Ooh, geht nicht??
Stichwort: Screenreader. Auch hier wieder --> sauberer Code!
Eine Navigation macht man mit einer ul!!
Deine Grafiken sind relativ groß (Ladezeit)! Reduzieren mit entsprechenden Tools (z.B. RIOT).
Zudem auf richtige Größe bringen.
Überdenk deine Typographie: Schriftgröße, Farben (zu viele), mehr Weissraum, kein justify usw..

Naja, hier kann man endlos? weitermachen.

Komplett neu aufbauen. Einfaches Layout (2 Spalten?). Durchgängiger Stil.
Korrekter sinnvoller Code (Semantik). Z.B h1 per ImageReplacement in den Header.
Alle html und css Files kann man locker auf die Hälfte reduzieren.
Kein html5 und css3!
Kein JavaScript! Kann man ev. später unterstützend nachrüsten.

Arbeite Little Boxes durch.

So, nun verabschiede ich mich aus diesem Thread.
Ist eh das falsche Forum für sowas.

Gruß Manfred
Windows 7 | Scriptly 0.8.95.6.COM
Manfred62
Ambitioniertes Mitglied
 
Beiträge: 52
Registriert: 12.09.2009 17:29
Wohnort: Ludwigsburg

Re: CSS-Browserweiche

Beitragvon Hannes » 12.11.2010 19:20

Manfred62 hat geschrieben:Komplett neu aufbauen. Einfaches Layout (2 Spalten?). Durchgängiger Stil.
Korrekter sinnvoller Code (Semantik). Z.B h1 per ImageReplacement in den Header.
Alle html und css Files kann man locker auf die Hälfte reduzieren.
Kein html5 und css3!
Kein JavaScript!


*Unterschreib*.

Bei mir (Scripts grundsätzlich deaktiviert, Schrift etwas größer weg. Sehbehinderung eingestellt, Firefox 3.6.12 unter Ubuntu) sieht die Seite, Ausschnitt rechts oben, so aus:

Bild

Noch Fragen...? :-)
Und nein, ich kann auch keine Browserweiche für Firefox 3.6.12 anbieten... ;-)

Noch etwas: Webdesign ist teuer. Ich kann meinen Kunden (meistens Freunde) meine Stunden nur deshalb so billig anbieten wie mein Dachdecker oder Klempner mir, weil ich aufgrund der Marktlage das Büro im eigenen Haus, Autokosten, teurer Software nicht auf den Preis umlegen kann. Wenn ein Auftraggeber (Dein Verein - es ist jetzt egal, ob sich's um bezahlte Arbeit handelt oder nicht) diese Zeit verplempert, indem er eine technische, optische, typographische Umgestaltung von einer Vorstandsgenehmigung abhängig macht, dann soll er's doch selber machen. Ich begegne fast täglich einem bestimmten Nicht-Kunden, dem ich in aller Freundschaft vor Zeugen gesagt habe: "Nö, so'n Scheiss mach' ich nicht" und die hübscheste Single-Frau in 25 km Umkreis von meinem Wohnort hab' ich nie wiedergesehen (schnief), nachdem ich ihr gesagt habe: "Eine sich drehende Weltkugel auf der Hauptseite ist Scheisse und eine Zaunbaufirma soll man auch nicht gebrauchen, um seine persönlichen Ideen im Internet verwirklicht sehen zu können". Dafür schätzen mich meine verbliebenen Rest-Kunden vielleicht nicht direkt für meine Ausdrucksweise, aber für die Websites, die ich ihnen hingestellt habe.
Wobei ich nicht sagen will, dass die super sind. Es sind einfach nur die Fehler drin vermieden (man denke z.B. auch an die Suchmaschineneignung).
Lesetipp: http://www.karzauninkat.com/Goldhtml/
Hannes
 
Beiträge: 7
Registriert: 09.11.2010 10:20

Re: CSS-Browserweiche

Beitragvon gabischatz » 12.11.2010 23:06

Hi nun habt ihr mich aber zur Schnecke gemacht :lol:
In mancherlei Hinsicht habt Ihr vollkommen Recht, aber wie ich schon sagte ich kann leider die Seite nicht über den Haufen werfen.
Im Moment bin ich noch am lernen, und so sehe ich das auch ganz Locker. :P Veränderungen kommen eben nur schleppend.
Hannes hat geschrieben:ei mir (Scripts grundsätzlich deaktiviert, Schrift etwas größer weg. Sehbehinderung eingestellt, Firefox 3.6.12 unter Ubuntu) sieht die Seite, Ausschnitt rechts oben, so aus:
Ist ja grässlich, wusste gar nicht dass Linux so schlecht ist :lol: ne war nur ein Witz :lol: :lol: :lol:
Passier das nicht auch mit anderen Seiten wenn mann diese vergrößert?
Manfred62 hat geschrieben:Als ich die Seite das erste Mal sah, dachte ich, ein Scriptkiddie hat seine ersten Versuche im Web gemacht...
Da hast du vollkommen Recht, aber so ist es eben, wenn man Morgens aufwacht und sein halbes Leben ist auf einmal Weg und man fängt von Vorne an.
MfG gabischatz im übrigen liebe ich es, wenn jemand offen und ehrlich seine Meinung sagt, besser als immer rum zuschleimen.
gabischatz
Sehr engagiertes Mitglied
 
Beiträge: 246
Registriert: 11.07.2010 11:22
Wohnort: Bad Langensalza, Thüringen

Re: CSS-Browserweiche

Beitragvon Hannes » 13.11.2010 06:43

gabischatz hat geschrieben:Hi nun habt ihr mich aber zur Schnecke gemacht :lol:

War eigentlich nicht die Absicht. Ich will ja das bisschen Zeit, die ich vor dem Bildschirm mit irgend welchen Foren oder Nachrichtenforen sitze, lumpige 8 oder 10 Stunden am Tag, straffen und nicht noch mit Bildschirmabdrucken und ausgearbeiteten Fachantworten noch ausweiten, aber manchmal reisst's einen doch noch weg ;-).

Hannes hat geschrieben:ei mir (Scripts grundsätzlich deaktiviert, Schrift etwas größer weg. Sehbehinderung eingestellt, Firefox 3.6.12 unter Ubuntu) sieht die Seite, Ausschnitt rechts oben, so aus:
gabischatz hat geschrieben:Ist ja grässlich, wusste gar nicht dass Linux so schlecht ist :lol: ne war nur ein Witz :lol: :lol:

Da macht sich jemand gerade sehr unbeliebt ;-).
Hmm, mal IE unter Crossover aufrufen - tatsächlich, ach, s o sollte die Seite eigentlich aussehen. Nun, Entschuldigung, sie ist immer noch widerlich, und wenn ich in IE alles ausschalte, womit sich die Leute ihre Viren einfangen, wird' s wohl auch nicht anders aussehen.
Mal sehen ... als unsichere Seite einstufen ... schön, die Geburtstage sind schon mal verschwunden, und auf "Repertoire" kommt im IE dann nur eine weiße Seite. Ist wohl noch ein Feature, das schont schon mal die Augen;-).
Passier das nicht auch mit anderen Seiten wenn mann diese vergrößert?


Tja, Internet Explorer ist halt der überlegene Browser. Bei dem verändert sich über das Ansichtsmenü die Schrift überhaupt nur an einer Stelle, der roten Überschrift "Weihnachten 2010", die Iframes und alles andere bleiben Augenpulver ROTFL
Im Übrigen ist es neben der Bild-Anzeige das Haupt-Feature von HTML überhaupt, dass es immer alle Seiten korrekt anzeigt, egal wie die Buchstabengröße eingestellt ist, was für Fonts der Betrachter überhaupt auf seinem System hat und wie groß der Bildschirm ist. An dieser Stelle darf überhaupt nichts passieren. Im Webdesign muss man natürlich jede Seite in möglichst vielen Browsern, mindestens aber den häufigsten 3 (IE, Firefox, Opera) sowie einem Textbrowser testen, bevor man sie auf die Menschheit loslässt.
Hannes
 
Beiträge: 7
Registriert: 09.11.2010 10:20

Re: CSS-Browserweiche

Beitragvon gabischatz » 13.11.2010 08:53

Guten Morgen
Hannes hat geschrieben:jede Seite in möglichst vielen Browsern, mindestens aber den häufigsten 3 (IE, Firefox, Opera) sowie einem Textbrowser testen, bevor man sie auf die Menschheit loslässt.
Ich kann dein Problem nicht ganz nach vollziehen, da ich die Seiten in den genannten Browsern getestet habe. Bis auf die Startseite lassen sich alle Seiten dann ohne CSS in jeden Win Browser problemlos betrachten und vergrößern. Ohne solche Effekte wie du sie beschreibst.
Da ich kein Linux oder Mac-Book habe kann ich die Seiten auch nicht auf diesen testen. Habe die Seiten auch auf anderen Rechnern getestet, auch ohne die von dir beschriebenen Fehler. Außer die Startseite sind die restlichen Seiten alle noch in Tabellenform geschrieben, es gibt fast keine Scripte und wenn jemand auch diese deaktiviert bekommt er die Seiten auch noch angezeigt. Die Seiten haben einen Wiedererkennungswert, dass dir der Style nicht gefällt, na ja.....
gabischatz
Sehr engagiertes Mitglied
 
Beiträge: 246
Registriert: 11.07.2010 11:22
Wohnort: Bad Langensalza, Thüringen

Re: CSS-Browserweiche

Beitragvon Benedikt Loepp » 13.11.2010 09:25

Ich denke so richtig zielführend ist die Diskussion hier nicht wirklich, ist zwar alles nicht uninteressant - aber ich denke in einem Forum, wo es tatsächlich in der Hauptsache um so etwas geht, wärst du etwas besser beraten.
So treffen jetzt hier zwei Meinungen aufeinander und um ein konkretes Problem oder so gehts eigentlich gar nicht ;)

Nur so am Rande: Ich bin ja nach wie vor dabei, irgendwann mal das Redesign der kompletten Seite hier zu launchen - ohne auch nur eine einzige Zeile irgendwie browserspezifischen Quelltext sieht das Ergebnis unter etwa 50 verschiedenen Konfigurationen/Browser immer nahezu identisch aus :mrgreen:

MfG Benedikt Loepp
Benedikt Loepp
Administrator
 
Beiträge: 2729
Registriert: 17.06.2005 18:30
Wohnort: Lünen

Re: CSS-Browserweiche

Beitragvon Hannes » 13.11.2010 09:41

Benedikt Loepp hat geschrieben:Ich denke so richtig zielführend ist die Diskussion hier nicht wirklich, ist zwar alles nicht uninteressant - aber ich denke in einem Forum, wo es tatsächlich in der Hauptsache um so etwas geht, wärst du etwas besser beraten.
So treffen jetzt hier zwei Meinungen aufeinander und um ein konkretes Problem oder so gehts eigentlich gar nicht ;)


Das sind eigentlich keine Meinungsverschiedenheiten (mal von einem ziemlich einheitlichen Zuschauervotum über Laufschriften, bunte Weihnachtsbäumchen etc. abgesehen ;-) ), oder meinst Du, ich lasse andere Arbeiten beiseite und fummle mit Bildschirmabdrücken herum, um irgend eine Religion zu vertreten und am Ende recht zu kriegen;-). Ich denke, jetzt haben zwei (mit Dir seit heute drei) erfahrene Webdesigner einem ratsuchenden Forumsmitglied nahegelegt, umzukehren und mit einem von Grund auf klareren, für alle Browser geeigneten Design von vorne anzufangen. Ich gehe jetzt auch nicht in die Details, dass und warum ein Firefox unter Linux m.E. genau dasselbe anzeigt wie unter MS-Windows (das mir hier ebenfalls ca. 3fach zur Verfügung steht, als Installation einzelner Programme wie auch Scriptly unter dem Ur-WIne oder unter Crossover, das bei mir eben beim Anklicken einer Exe-Datei von selber hochkommt, als auch ein XP unter Vmware), wenn man mal von evtl. noch unterschiedlichen Systemfonts absieht.
Vermutlich verhindert bei mir die Einstellung von Firefox auf die Schriftgröße 16 und das Verbot, dass Websites eigene Schriftarten einsetzen dürfen, sowohl die Anzeige von "Augenpulver", das ich dann doch nicht mehr lesen kann, als auch eine korrekte Anzeige der Beispiel-Website.

Aber ein dezenter Hinweis, dass die Welt eben nicht nur aus Windows-Usern besteht, sondern wohl doch zu einem nicht unerheblichen, zweistelligen Prozentsatz aus anderen Systemen, ist bestimmt nicht fehl am Platze gewesen - zumal sich (siehe meine mehrfach beschriebene Scriptly-Installation) die Grenzen zwischen den Betriebssystemen sowieso zunehmend verwischen.

Es geht übrigens durchaus um konkrete Probleme für User von HTML-Editoren:
- Browserweichen vs. w3c-konformen Code
- Empfehlung an evtl. Anfänger für wichtige, weithin bekannte Referenzsites wie csszengarden.com und
goldhtml
- Sinngerechter Einsatz von CSS (von der Fragestellerin auch an anderer Stelle auf Deiner Website schon mal hinterfragt)

Im Prinzip hast Du natürlich recht, dass es für allgemeine Webdesignfragen spezifischere Foren mit mehr Fachleuten, die dort mitschreiben, gibt. Aber Dein Off-Topic Bereich ist, wie jede Couch in einer Wohnzimmerecke, doch sehr verlockend, sich zu einem kleinen Small-Talk zusammenzusetzen ;-).

Abschließend wäre noch der Mut unserer Vorposterin anzuerkennen, ihre in Entwicklung befindliche Website hier zu verlinken, und die gute Laune, mit der die Kritik beantwortet wurde :-).
Hannes
 
Beiträge: 7
Registriert: 09.11.2010 10:20

Re: CSS-Browserweiche

Beitragvon Hannes » 13.11.2010 09:48

gabischatz hat geschrieben:Die Seiten haben einen Wiedererkennungswert,


Stimmt ;-)
Hannes
 
Beiträge: 7
Registriert: 09.11.2010 10:20

Nächste

Zurück zu Off-Topic



Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron