• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bugfix If IE auch für Google Chrome ?

S

SourceCode

Guest
Hallo Forum,

ich brauch da nochmal Eure Hilfe.

Ihr kennt doch sicherlich diesen Code hier:
HTML: 
<!--[if IE]>
            <link rel="stylesheet" type="text/css" href="internetexplorer.css" />
<![endif]-->

Jetzt brauch ich aber den Code um den Google Chrome Browser anzusprechen.
In etwa so:

HTML: 
<!--[if CHROME]
            <link rel="stylesheet" type="text/css" href="googlechrome.css" />
<![endif]-->

Das IF CHROME ist jetzt erfunden. Ich bräuchte halt den richtigen Code.

Hätte da Jemand ne Idee? Ich konnte bei Google nichts brauchbares finden.

Danke schon mal im Vorraus.

MFG SourceCode
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

Jetzt brauch ich aber den Code um den Google Chrome Browser anzusprechen.
Zum Vergrößern anklicken....

Wie bitte?

Das IF CHROME ist jetzt erfunden. Ich bräuchte halt den richtigen Code.
Zum Vergrößern anklicken....
Frag mal bei Google Inc. USA nach oder besser lass dir den Codeschnipsel in den USA patentieren, wenn die grosse Tante mit der dicken Brieftasche einmal so was brauchen sollte macht sie dich bestimmt reich.

Nee im Ernst, wozu braucht man denn eine Browserweiche für Chrome?

Die Browserweiche für IE mit Conditional Comments funktioniert ja nur bei dem IE Browser, weil der beste Browser aller Zeiten sich nicht an Regeln halten wollte.
 
Was?

Ist doch egal für was ich das brauche. Ist doch meine Sache.

Hättest du da ne Idee oder nicht ?
 
Zuletzt bearbeitet von einem Moderator:
Ist doch egal für was ich das brauche. Ist doch meine Sache.
Zum Vergrößern anklicken....
Im Grunde genommen schon, naja - hätte ja auch mit HTML oder so zu tun haben können - daher habe ich gefragt.

Und noch mal. Ist nicht notwendig und gibt es nicht. Der Browser verhält sich standardkonform.
 
Und weil der Browser sich standardkonform verhält, gibt es auch keine ConditionalComments-artigen Hacks um dem Browser irgendetwas unterzuschieben was andere Browser nicht sehen.

Wenn es dir um ein Designproblem geht, schau nach ob und was Du in deinem CSS falsch/unlogisch definiert hast.

Wenn es dir um eine Ausgabe nur für Chrome-Nutzer geht (wie z.B. "Hallo Chrome-Nutzer") dann müsstest Du die UserAgents auslesen und interpretieren. Das geht z.B. mit PHP, ist aber gerade in Bezug auf moderne Browser etwas unsicher, da man den UserAgents des Browsers auch manipulieren kann.
 
threadi schrieb:
Und weil der Browser sich standardkonform verhält, gibt es auch keine ConditionalComments-artigen Hacks um dem Browser irgendetwas unterzuschieben was andere Browser nicht sehen.

Wenn es dir um ein Designproblem geht, schau nach ob und was Du in deinem CSS falsch/unlogisch definiert hast.

Wenn es dir um eine Ausgabe nur für Chrome-Nutzer geht (wie z.B. "Hallo Chrome-Nutzer") dann müsstest Du die UserAgents auslesen und interpretieren. Das geht z.B. mit PHP, ist aber gerade in Bezug auf moderne Browser etwas unsicher, da man den UserAgents des Browsers auch manipulieren kann.
Zum Vergrößern anklicken....

Nein, es geht um ein kleines Designproblem. Ich hab von Anfang an für Firefox gecodet und im Chrome zeigt er mir die H1-Elemente irgendwie ein bisschen lang nach oben gezogen und dünner dar.

Im Stylesheet ist alles in Ordnung, daran liegt es nicht.

Das mit PHP hab ich mir auch schon gedacht. Hab aber nicht soo viel Ahnung von PHP.
Aber dann könnte man doch rein theoretisch sagen "Wenn Browser == Chrome dann hol dieses Stylesheet" oder so.

Aber trotzdem danke :D
 
Zuletzt bearbeitet von einem Moderator:
Wustersoss schrieb:
Was sagt den der Validator, alles Fehlerfrei?
The W3C Markup Validation Service
Zum Vergrößern anklicken....

Alles Grün für HTML5 und im CSS ist auch alles Vaild bis auf zwei Eigenschaften und zwar diese:


[TD="class: linenumber"]42[/TD]
[TD="class: codeContext"] #container[/TD]
[TD="class: parse-error"] Die Eigenschaft border-radius existiert nicht in CSS level 2.1, aber in [css3] : 20px[/TD]

[TD="class: linenumber"]66[/TD]
[TD="class: codeContext"] .menubutton[/TD]
[TD="class: parse-error"] Die Eigenschaft border-radius existiert nicht in CSS level 2.1, aber in [css3] : 7px[/TD]
Zum Vergrößern anklicken....

Das sind die zwei Werte die es ja nicht "offiziell" gibt aber verzichten möcht ich nicht drauf.

Also mit dem Code hat´s nichts zutun. :)

Wenn das mit dem IF Chrome klappen würde, dann würde ich wenns der Chrome ist, den H1-Elementen ne andere Schriftart geben.

MFG
 
Zuletzt bearbeitet von einem Moderator:
Eigentlich müsste der Chrome das genauso darstellen wie der Firefox, das war bis jetzt bei mir auch mit CSS3-Attributen so.

Aber ohne Quellcode wirds jetzt schwierig.
 
Wustersoss schrieb:
Eigentlich müsste der Chrome das genauso darstellen wie der Firefox, das war bis jetzt bei mir auch mit CSS3-Attributen so.

Aber ohne Quellcode wirds jetzt schwierig.
Zum Vergrößern anklicken....

Es geht nicht um die CSS3-Attributen es geht doch um die H1-Elemente.
Die Fehler hab ich nur gepostet damit ihr selbst gucken könnt, dass alles bis auf das vaild ist.

Jetzt habe ich festgestellt, dass alle H - Elemente im Prinzip nicht FETT dargestellt werden. Den Code in meiner Website von den H - Elementen sieht so aus:
HTML: 
<h1>
        <b>Herzlich willkommen</b>
</h1>

Aber schau es Dir von mir aus auf meiner Seite an und vergleiche mal die Unterschiede der Überschriften im FF und GC.

Zur meiner Website
 
Zuletzt bearbeitet von einem Moderator:
Du musst innerhalb einer Überschrift keine zusätzlichen Elemente einfügen um etwas fett darzustellen. Das hier reicht völlig:

HTML: 
<h1>Herzlich Willkommen</h1>

h1 wiederum erbt von body die Angabe

Code: 
font-weight: normal;

weshalb die Überschrift vermutlich nicht fett dargestellt wird.

Du müsstest entweder diese Angabe im body entfernen oder für alle Überschriften die fett-Formatierung definieren.

Mit Firebug (gibts auch für Chrome) kann man das prima herausfinden.
 
Folgendes:

Der Tag H1 ist nicht im CSS aufgeführt, das heisst du überlässt dem Browser die Einstellung. Jeder Browser hat so sein eigenes Stylesheet um Webseiten anzuzeigen die keine Styleangaben haben. Diese Default Stylesheets unterscheiden sich geringfügig, wie sie Elemente darstellen.

Schreib also einfach das H1 vom Tag article in dein Stylesheet und gib dem H1 die Attribute die du haben willst. Insbesondere Line-height und margin usw.
Danach sollte es gleich aussehen.
 
threadi schrieb:
Du musst innerhalb einer Überschrift keine zusätzlichen Elemente einfügen um etwas fett darzustellen. Das hier reicht völlig:

HTML: 
<h1>Herzlich Willkommen</h1>

h1 wiederum erbt von body die Angabe

Code: 
font-weight: normal;

weshalb die Überschrift vermutlich nicht fett dargestellt wird.
Zum Vergrößern anklicken....

Jetzt mal vom FF abgesehen: Ohne die B-Elemente ist die Überschrift standard.
Jetzt habe ich (Lokal) die B-Element und das font-weight: normal ; aus der CSS entfernt und geschaut:
Im Firefox bleibt alles richtig aber im Chrome bleibt es trotzdem dünn?

Zum Vergleich habe ich ne *.html erstellt in der NUR

Code: 
<h1>
        <b>Herzlich willkommen</b>
</h1>

stand. So, es wurde in beiden Browsern richtig dargestellt. Es muss doch irgendwas im Code sein. Vielleicht hab ich nen Denkfehler !? Ich komme einfach nicht drauf.
threadi schrieb:
Du müsstest entweder diese Angabe im body entfernen oder für alle Überschriften die fett-Formatierung definieren.

Mit Firebug (gibts auch für Chrome) kann man das prima herausfinden.
Zum Vergrößern anklicken....

Sagt mir jetzt nichts ?


Wustersoss schrieb:
Folgendes:

Der Tag H1 ist nicht im CSS aufgeführt, das heisst du überlässt dem Browser die Einstellung. Jeder Browser hat so sein eigenes Stylesheet um Webseiten anzuzeigen die keine Styleangaben haben. Diese Default Stylesheets unterscheiden sich geringfügig, wie sie Elemente darstellen.

Schreib also einfach das H1 vom Tag article in dein Stylesheet und gib dem H1 die Attribute die du haben willst. Insbesondere Line-height und margin usw.
Danach sollte es gleich aussehen.
Zum Vergrößern anklicken....

Muss ich mal grade probieren. Das hab ich aber eigentlich schon.



Also nochmal ne Zusammenfassung:

Ich kann den H1-Elementen im CSS die Eigenschaft font-weight: XXX ; zuweisen und das klappt. Aber nur im Firefox. Google Chrome zeigt keine Veränderung.

Bei Chrome bleibt die Überschrift trotzdem dünn als wenn kein StyleSheet zugeordnet oder kein B-Element drum herum wäre!

Die CSS-Eigenschaft H1 findet ihr ganz oben in der ersten Style.css. Betreffen tut das jetzt erst mal nur die "Herzlich willkommen" Überschrift auf der Index.php. Die anderen werde ich bearbeiten wenn das Problem gelöst ist.
 
Zuletzt bearbeitet von einem Moderator:
Ich glaube das Problem ist ein anderes. Du hast nämlich für h1 keine Schriftart definiert. Zwar erbt das Element diese vom Body in Form von Arial, es kann aber je nach Browser und Schriftarterkennung des Browsers anhand des CSS dazu kommen, dass der Text von einem Browser anders gerendet wird als bei einem anderen Browser.

In deinem Fall sind somit die Eigenschaften zur Schriftart zu ungenau/unvollständig, so dass der Chrome den von dir geschriebenen Code interpretiert und deutet. Du müsstest also für die Überschrift wie auch für alle anderen Elemente eine Schriftart definieren, inkl. deren Größe. Ich nutzt dafür das *, also:

Code: 
* {
 font-family: Arial, sans-serif;
 font-size: 12px;
}

Allerdings: ich schaue bei mir im Chrome die Seite an und sie sieht genauso aus wie in meinem Firefox. Das klingt zwar positiv für dich (falls es bei dir noch nicht so ist), könnte jedoch auch an den Schriftarten liegen. Ich habe Linux mit eigentlich den selben Schriftarten wie unter Windows. Gerendet werden die jedoch mitunter anders als unter Windows oder Mac.
 
threadi schrieb:
Ich glaube das Problem ist ein anderes. Du hast nämlich für h1 keine Schriftart definiert. Zwar erbt das Element diese vom Body in Form von Arial, es kann aber je nach Browser und Schriftarterkennung des Browsers anhand des CSS dazu kommen, dass der Text von einem Browser anders gerendet wird als bei einem anderen Browser.

In deinem Fall sind somit die Eigenschaften zur Schriftart zu ungenau/unvollständig, so dass der Chrome den von dir geschriebenen Code interpretiert und deutet. Du müsstest also für die Überschrift wie auch für alle anderen Elemente eine Schriftart definieren, inkl. deren Größe. Ich nutzt dafür das *, also:

Code: 
* {
 font-family: Arial, sans-serif;
 font-size: 12px;
}
Zum Vergrößern anklicken....

Also daran kann es ja nun wirklich nicht liegen, da wie du sagst, alles schon im Body eingestellt ist. Somit hat der restliche Text in dem Bereich ja die Schriftart die man dafür angegeben hat.

Habs auch ausprobiert, das funktioniert einfach nicht.

threadi schrieb:
Allerdings: ich schaue bei mir im Chrome die Seite an und sie sieht genauso aus wie in meinem Firefox. Das klingt zwar positiv für dich (falls es bei dir noch nicht so ist), könnte jedoch auch an den Schriftarten liegen. Ich habe Linux mit eigentlich den selben Schriftarten wie unter Windows. Gerendet werden die jedoch mitunter anders als unter Windows oder Mac.
Zum Vergrößern anklicken....

Das sind ja nicht die SchriftARTEN, das Problem ist, dass der Text (also die H-Elemente) nicht fett dargestellt werden obwohl sie über CSS formatiert sind. In Firefox klappt das ja. Da ist die Überschrift jetzt über CSS mit dem font-weight: 900 ; angegeben.

Ich hab mal noch zwei Screenshots gemacht um das besser zu verdeutlichen. :-o

Also Screenshot Nummer 1, die Unterschiede bei mir zwischen Firefox und Google Chrome
http://www1.xup.in/exec/ximg.php?fid=17886945

Screenshot Nummer 2 zeigt folgenden Code im Browser. Und dieser wird genau gleich dargestellt!
http://www1.xup.in/exec/ximg.php?fid=97104036

Der Code hierzu sieht so aus:
Code: 
<h1>
        <b>Herzlich willkommen</b>
</h1>

Also wie man sieht stellt der Chrome es Standardmäßig richtig dar. Ich finde einfach keine Lösung. Sogar der IE (!) zeigt die Seite richtig an. Es muss einfach einen Fehler im Code geben. Aber es ist doch alles valide. Ich versteh es einfach nicht.

MFG SourceCode :evil:
 
Zuletzt bearbeitet von einem Moderator:
Besteht das Problem noch? Bei mir (Linux) sieht die Seite an der Stelle in Firefox (links) und Chrom(ium) (rechts) ebenfalls einigermaßen gleich aus (und zwar „dünn“).

 
Wie gesagt: es ist die Schriftart. Genauer gesagt: das Rendering der Schriftart auf Basis der Eigenschaften die Du der Überschrift gibst. Das kann je nach System anders aussehen, wie man hier (wiedermal) sieht. Ist aber auch abhängig von der Größe und der Schriftart selbst. Bei mir sieht es genauso aus wie bei mermshaus, habe auch Linux, nur interpretiere ich das als fett da, wenn ich die Werte auf font-weight: 100 ändere die Schrift deutlich dünner wird (in beiden Browsern).
 
ich würde wenn es möglich ist auf php setzen.

neustes horrorbeispiel von wordpress-template twentyeleven
Code: 
<!--[if IE 6]> <html id="ie6" dir="ltr" lang="de-DE"> <![endif]--> 
<!--[if IE 7]> <html id="ie7" dir="ltr" lang="de-DE"> <![endif]--> 
<!--[if IE 8]> <html id="ie8" dir="ltr" lang="de-DE"> <![endif]--> 
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!--> <html dir="ltr" lang="de-DE"> <!--<![endif]-->


auf der anderen seite glaube ich, dass diese lösung auch nicht ganz freiwillig gewählt wurde.
threadi hat recht, was die manipulation vom useragent angeht.
meine meinung dazu ist, dass jeder der den useragent vom browser manipuliert selbst schuld ist. custombrowser auf basis von z.b. chrome sollten auch chrome im useragent führen.


eine erkennung von chrome würde ich so gestalten:
Code: 
$useragent = strtolower($useragent);
$check_agent = explode("chrome",$useragent);
if(isset($check_agent[1]))
{
[...]
}

wo komm wa denn dahin, wenn man leuten die ihren browser zerschießen noch eine extrawurst liefert?!


ps: das problem mit der schrift habe ich bei linux/mac - windows, dort setze ich schon seit jahren auf eine erkennung des systems auf basis von php
 
threadi schrieb:
Bei mir sieht es genauso aus wie bei mermshaus, habe auch Linux, nur interpretiere ich das als fett […]
Zum Vergrößern anklicken....

Es hat nur schwere Knochen. :)

(Der Vollständigkeit halber: Ich meinte „dünn“ im Verhältnis zu dem Screenshot aus #15: http://www1.xup.in/exec/ximg.php?fid=17886945)

Was die Ursache angeht, würde ich natürlich auch zuerst auf „normale“ browserübergreifende Unterschiede im Rendering-Verhalten tippen.

Wobei der Unterschied in dem Screenshot schon sehr signifikant ist.
 
Guten Morgen :)

@mermshaus
Also bei Dir im Screen ist zwar beides gleich aber in deinem Fall ist beim Firefox die Überschrift nicht fett. Habe auch eben mal meine VM mit Ubunto hochgefahren und dort sah's ebenfalls so aus.

Naja, ich habe aber mal grade ne aktualisiert Version hochgeladen (evtl. F5 drücken). Wenn jetzt immer noch alles gleich aussieht dann lass ich das einfach mal so. Habe jetzt, wie threadi mir empfohlen hat, andere Schriftarten genommen.


@threadi
Habe jetzt mal ein bisschen mit den Schriftarten rumgespielt und bei folgendem CSS-Code sieht die Seite jetzt in beiden Browsern gleich aus. Die Überschrift ist auch ein bisschen dicker geworden:

HTML: 
h1, h2, h3, h4 {
    font-family: Verdana;
    font-weight: 900 ;
    line-height: normal;
}

body { 
    font-size: 15px;
    font-family: Helvetica;
    font-weight: normal;
    font-style: normal;
}


@foxmorayn
Danke aber das mit den Browserweichen lasse ich mal, da das Problem ja ein anderes ist. ;)

----------

Mehr weiß ich jetzt auch nicht mehr, was ich machen soll. Wenn doch noch jemandem was einfällt, kann er mir gerne bescheid sagen. :mrgreen:

Übringens: Hab ich noch nicht erwähnt, ich habe Windows 7!

Und Danke, dass ihr versucht habt so gut es geht zu helfen. ;)
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben