nicht angemeldet
Darstellungsfehler
0 0 0 
Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0 0 
Struppi
Darstellungsfehler
Hallihallo,
ich habe ein Programm auf HTML/PHP/Javascript konfiguriert, welches ausschliesslich nur für Interne zwecke gedacht ist. Mitarbeiter können sich von zuhause aus einloggen und dann Termine und Datenverwaltungen pflegen/vornehmen.
Einer von den 12 Mitarbeitern hat allerdings ein Apple-System und einige Darstellungeprobleme (Opera/Safari?/und noch zwei).
Das wesentliche Problem ist, dass Buttons, die mit einem Windows-System in rot mit weisser schrift dargestellt werden, bei dem Apple-System in weiß mit weisser Schrift dargestellt werden.
Die Buttons werden mit Script/Javascript dargestellt.
Muss ich jetzt das komplette Design ändern, oder benötigt der Mitarbeiter vielleicht nur eine Art Java-Programm,
oder aber gibt es vielleicht die Möglichkeit, den Browser bzw. das Betriebssystem zu erkennen, um dann mit einer if-Anweisung die Buttons anders darzustellen.
Oder habt Ihr noch ganz andere Ideen.
Danke schon mal im Vorraus.
-
Hi,
Einer von den 12 Mitarbeitern hat allerdings ein Apple-System und einige Darstellungeprobleme (Opera/Safari?/und noch zwei).
Das wesentliche Problem ist, dass Buttons, die mit einem Windows-System in rot mit weisser schrift dargestellt werden, bei dem Apple-System in weiß mit weisser Schrift dargestellt werden.
Opera und Safari sind zwar natuerlich auch nicht ganz Bug-frei - aber ein solches Problem duerfte vermutlich eher in einem Fehler in deinem Code bedingt liegen.
Muss ich jetzt das komplette Design ändern, oder benötigt der Mitarbeiter vielleicht nur eine Art Java-Programm,
Was soll Java damit zu tun haben?
oder aber gibt es vielleicht die Möglichkeit, den Browser bzw. das Betriebssystem zu erkennen, um dann mit einer if-Anweisung die Buttons anders darzustellen.
Wenn du noch nicht mal weisst, _wie_ das gehen koennte - dann ist diese Ueberlegung wohl eher sinnlos.
Davon abgesehen sind solche "Browserweichen" steinzeitlicher Nonsense, den man heutzutage in 99,9% der Faelle nicht mehr braucht.Oder habt Ihr noch ganz andere Ideen.
Finde den Fehler, beseitige ihn.
Wenn du unsere Hilfe dabei willst - dann beruecksichtige bitte die Tipps fuer Fragende.
MfG ChrisB
-
Oder habt Ihr noch ganz andere Ideen.
Finde den Fehler, beseitige ihn.
Wenn du unsere Hilfe dabei willst - dann beruecksichtige bitte die Tipps fuer Fragende.
OK, ChrisB - dann versuche ich mal die Kriterien einzuhalten:
Ich habe ein Darstellungeproblem von Buttons unter verschiedenen Browsern. Mein Code sieht folgendermaßen aus:
<style type="text/css">
input.redbutton
{
font-size:14px;
font-family:Georgia,serif;
font-weight:bold;
color:#EEEEEE;
width:145px;
height:25px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff990000',EndColorStr='#ff000000');
border-style:none;
border-color:#FFFFFF;
border-width:1px;
}
</script><script language="javascript">
function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
window.document.forms[FRM].elements[BTN].style.borderStyle = "inset";
}
function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#EEEEEE";
window.document.forms[FRM].elements[BTN].style.borderStyle = "none";
}
</script>
<head>
<body>
<input
type="submit"
name="button1"
class="redbutton"
value="Wiedervorlagen"
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)"
>
</body>
</head>Unter Windows-Systemen insbesondere Internet-Explorer gibt es keine Probleme damit.
Unter einem Apple System allerdings funktioniert es mit keinem von vier getesteten Browsern. Drunter sind (Internet-Explorer/Opera/Safari/?)
Das Problem veräußert sich dadurch, dass der sonst dargestellte Button (rot mit weisser Schrift) unter dem Apple-System nur in (weiss mit weisser Schrift) dargestellt wird.
Da ich selbst kein Apple-System habe, kann ich nur sehr schwer auf Fehlersuche gehen.Für Anregungen und Tipps wäre ich sehr Dankbar
Besten Gruß Eike
-
@@Eike:
color:#EEEEEE;
Eher hellgrau als weiß. Und wo wird die Hintergrundfarbe auf rot gesetzt?
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff990000',EndColorStr='#ff000000');
Dass das proprietär ist (nur Microsoft), steckt doch schon im Namen.
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum) -
Hi,
input.redbutton
Klassennamen sollten nicht nach der _derzeit_ gewuenschten Darstellung gewaehlt werden.
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff990000',EndColorStr='#ff000000');
Das ist kein gueltiges CSS - also raus damit. (Wenigstens zu Testzwecken.)
<body>
<input
type="submit"
name="button1"
class="redbutton"
value="Wiedervorlagen"
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)"Wenn das wirklich der Code ist, auf welches this.form willst du dann hier zugreifen, wenn der Input-Button gar nicht in einem Formular steht?
HTML und CSS validiert hast du ja sicher (/hoffentlich) bereits?
MfG ChrisB
-
input.redbutton
Klassennamen sollten nicht nach der _derzeit_ gewuenschten Darstellung gewaehlt werden.
Da habe ich den Sinn jetzt nicht ganz verstanden, wo der Unterschied ist, ob ich meinen Button "redbutton" oder "Peter" nenne.
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff990000',EndColorStr='#ff000000');
Das ist kein gueltiges CSS - also raus damit. (Wenigstens zu Testzwecken.)
Wenn ich das jetzt richtig erkannt habe, liegt es definitiv an dieser Zeile. Sobald ich den Filter raus nehme, ist der Butten nicht mehr so hübsch anzusehen.
Ich muss dazu sagen, dass ich den Butten mit einem "Buttendesigner" erstellt habe, weil ich von Butten-Darstellung keine Ahnung habe.
Wenn die Zeile also wech muss, wie bekomme ich dann meinen Button hübsch?HTML und CSS validiert hast du ja sicher (/hoffentlich) bereits?
Diese Aussage verstehe ich weder vom Sinn her, noch von der Aussage.
Was muss ich haben, und was genau bedeutet validiert?Danke schon mal für die Eingrenzung des Problems
Gruß Eike
-
@@Eike:
Klassennamen sollten nicht nach der _derzeit_ gewuenschten Darstellung gewaehlt werden.
Da habe ich den Sinn jetzt nicht ganz verstanden, wo der Unterschied ist, ob ich meinen Button "redbutton" oder "Peter" nenne.
War das eine Frage. SCNR.
Für eine Maschine (z.B. einen Browser) ist kein Unterschied.
Für einen Menschen (bes. den, der die Webseite pflegt) ist es ein großer Unterschied. Wenn bei einer Überarbeitung der Seite der Button nicht mehr rot, sondern blau ist, wäre die Bezeichnung "redbutton" irreführend.
Benennst du die Klasse gleich richtig[tm] nach der Funktion (der gemeinsamen aller Elemente, die dieser Klasse angehören), ist diese Bezeichnung auch später noch gültig, denn die Funktion bleibt ja erhalten.
Ich muss dazu sagen, dass ich den Butten mit einem "Buttendesigner" erstellt habe, weil ich von Butten-Darstellung keine Ahnung habe.
Wenn die Zeile also wech muss, wie bekomme ich dann meinen Button hübsch?Screenshot machen, das Bild einbinden (Alternativtext nicht vergessen).
HTML und CSS validiert hast du ja sicher (/hoffentlich) bereits?
Diese Aussage verstehe ich weder vom Sinn her, noch von der Aussage.
Was muss ich haben, und was genau bedeutet validiert?Was ist validieren? Was ist Wikipedia? Was ist Jeopardy!?
http://validator.w3.org/, http://www.validome.org/ sowie http://jigsaw.w3.org/css-validator/
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum) -
Hi,
input.redbutton
Klassennamen sollten nicht nach der _derzeit_ gewuenschten Darstellung gewaehlt werden.
Da habe ich den Sinn jetzt nicht ganz verstanden, wo der Unterschied ist, ob ich meinen Button "redbutton" oder "Peter" nenne.
Stichwort Trennung von Inhalt und Layout.
Einer der grossen Vorteile von sauber strukturiertem HTML ist es, dass sich dessen Darstellung mit CSS weitgehend anpassen laesst.
Wenn die Seite jetzt irgendwann mal komplett anders aussehen soll, dann wuerdest du (im Idealfall) nur das CSS anpassen.
Vielleicht soll der Button dann gar nicht mehr rot sein, sondern gruen oder blau? Dann stuende aber immer noch der Klassenname "redbutton" im HTML - waere bloedsinnig, oder?Deshalb solltest du immer Bezeichner waehlen, die etwas ueber Bedeutung und/oder Funktion eines Elementes aussagen - aber nicht ueber dessen _derzeit gewuenschte_ Optik.
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff990000',EndColorStr='#ff000000');
Das ist kein gueltiges CSS - also raus damit. (Wenigstens zu Testzwecken.)
Wenn ich das jetzt richtig erkannt habe, liegt es definitiv an dieser Zeile. Sobald ich den Filter raus nehme, ist der Butten nicht mehr so hübsch anzusehen.
Farbverlaeufe koenntest du bspw. auch mit (Hintergrund-)Bildern simulieren - dann haette man sogar auch in anderen Browsern als dem IE was davon.
Wenn die Zeile also wech muss, wie bekomme ich dann meinen Button hübsch?
Wenn du den Effekt fuer den IE behalten willst - dann verstecke ihn wenigstens vor anderen Browsern, damit diese nicht davon gestoert werden.
http://de.selfhtml.org/css/layouts/browserweichen.htm#alternativeHTML und CSS validiert hast du ja sicher (/hoffentlich) bereits?
Diese Aussage verstehe ich weder vom Sinn her, noch von der Aussage.
Was muss ich haben, und was genau bedeutet validiert?Valide bedeutet in diesem Zusammenhang, den in den entsprechenden Standards festgelegten Regeln entsprechend.
Dein HTML validierst du mit dem HTML-Validator, dein CSS mit dem CSS-Validator.
Wenn du angezeigte Fehler beseitigst, steigerst du die Chance, dass deine Seite in den verschiedenen Browsern fehlerfreier angezeigt wird. Denn wenn du dich nicht an die definierten Regeln haeltst, muss ja jeder Browser raten, was du gemeint haben koenntest.
Das solltest du immer machen, wenn du Darstellungsprobleme in irgendwelchen Browsern hast. Erst danach lohnt es sich eigentlich, den Fehler beim Browser und damit nach moeglichen Workarounds zu suchen.MfG ChrisB
-
Hallo ChrisB,
Vorab möchte ich mich schon mal bei Dir bedanken.
Endlich bekommt mal Antworten, mit denen man auch etwas anfangen kann bzw. die man nachvollziehen kann und wo nicht dieser "vorwurfsvolle ton" mitschwingt, was einen immer wieder eintrichtert, wie man nur so blöd sein kann.
Also Danke auch für Deine Erklärungen warum man was anders machen sollte.
Ich werde mich jetzt mal mit css auseinander setzen und ggf. noch mal unter diesen Trheat Fragen stellen.Besten Gruß Eike
-
-
input.redbutton
Klassennamen sollten nicht nach der _derzeit_ gewuenschten Darstellung gewaehlt werden.
Da habe ich den Sinn jetzt nicht ganz verstanden, wo der Unterschied ist, ob ich meinen Button "redbutton" oder "Peter" nenne.
Da ist gar kein Unterschied, aber welche Bedeutung hat die Klasse 'Peter'?
Oder andersherum, eine Klasse sollte beschreiben warum du eine Klasse verwendest, fällt dir kein Grund ein, dann verzichte auf die Klasse und verwende - in deinem Fall - einfach input { /* CSS Code */ }filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ff990000',EndColorStr='#ff000000');
Das ist kein gueltiges CSS - also raus damit. (Wenigstens zu Testzwecken.)
Wenn ich das jetzt richtig erkannt habe, liegt es definitiv an dieser Zeile. Sobald ich den Filter raus nehme, ist der Butten nicht mehr so hübsch anzusehen.
Du hättest deine Seite mal in einem FF Browser testen sollen und dir die Fehlerkonsole dort anschauen sollen (Im Menü Extras) dann wäre dir schon aufgefallen, was falsch an dem Code ist.
Solche IE Spezifischen Sachen, sollte man in CC vor anderen Browsern verstecken.
HTML und CSS validiert hast du ja sicher (/hoffentlich) bereits?
Diese Aussage verstehe ich weder vom Sinn her, noch von der Aussage.
Was muss ich haben, und was genau bedeutet validiert?Validieren und in deinem Fall möchtest du dein Seite mit dem HTML validator checken.
Struppi.
-
-
-
-