Bene: Unterschiedliche Darstellung mit padding in IE6 und Firefox

Guten Morgen,

bei folgendem Code bekomme ich unter IE6 und Firefox unterschiedliche Darstellung:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- <link rel="css/style.css" type="text/css" media="screen" href="styles.css"> -->

<style type="text/css" media="screen,projection">

div#col h1
 {
    font-size: 11px;
    line-height: 14px;
  color: #fff;
  background: #c0c0c0;
  padding: 3px 0 4px 4px;
 }

</style>
</head>
<body>
 <div id="col">
  <h1>test</h1>
 </div>

</body>
</html>

bei Firefox 1.0 wird der Text ein Pixel tiefer dargestellt als die Ausgabe im IE.
Habt ihr eine Idee wie man das Problem umgehen könnte.
Wie könnte ich Firefox seperate Werte zuweisen? Kennt da jemand einen Hack?

Danke und Viele Grüße
Bene

  1. moin Bene :)

    ich arbeite für solche Fälle mit einer javascript-Browserweiche, die mir das passende css-file einbindet:

    <script language="JavaScript">
    cssLink();
    </script>

    function cssLink() {
     document.write('<link rel="stylesheet" href="');
     document.write(...pfad...);
     document.write('/css/');
     var agt=navigator.userAgent.toLowerCase();
     if (agt.indexOf('opera') != -1)
      document.write('default.css');
     else if (agt.indexOf('gecko') != -1)
      if (agt.indexOf('macintosh') != -1)
       document.write('mozillamac.css');
      else
       document.write('mozilla2.css');
     else if (agt.indexOf('mac_powerpc') != -1)
      document.write('iexplorermac.css');
     else if (agt.indexOf('msie') != -1)
      document.write('iexplorer2.css');
     else
      document.write('default.css');
     document.write('" type="text/css">');
    }

    in den einzelnen css-files kannst du natürlich unterschiedliche Werte zuweisen ;)

    liebe Grüße aus Berlin
    lina-

    --
    Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
    1. Soweit ich weiss, gibt es mit dieser Lösung wohl Probleme mit Opera...
      Wenn ich richtig informiert bin, kann dieser wohl seinen agent manipulieren.
      Wenn jemand hierzu weiterführende Informationen hat, wär ich auch sehr dankbar.

      lina-

      --
      Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
      1. Soweit ich weiss, gibt es mit dieser Lösung wohl Probleme mit Opera...
        Wenn ich richtig informiert bin, kann dieser wohl seinen agent manipulieren.
        Wenn jemand hierzu weiterführende Informationen hat, wär ich auch sehr dankbar.

        lina-

        Hab grad keinen zur Verfügung, aber habe zu Hause (wo meine Inet-Festplatte z.Zt. nich funzt) Opera.
        Man kann in den einstellungen einstellen, ob er seinen eigenen userAgent nehmen soll, oder den vom IE, oder.....
        Ich glaub, er schreibt immer irgendwas mit Opera hinter den "geklauten" userAgent, weiß aber nich, ob es abschaltbar is.
        Man kann nach dem Opera z.B. mit if(window.opera()) überprüfen!
        (Weiß nich, ob diese Methode irgendwas (auser eindeutiger Identifizierung des Op) bringt!, es unterstützt aber auf jeden Fall nur Opera.
        Opera kann btw auch document.all unterstützen.
        Bei document.layers bin ich mir nich sicher, aber ich glaub des unterstützt er nich!

    2. Hallo lina-

      ich arbeite für solche Fälle mit einer javascript-Browserweiche, die mir das passende css-file einbindet:

      Und was bekommt ein User ohne Javascript zu sehen?

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. moin Detlef G. :)

        Und was bekommt ein User ohne Javascript zu sehen?

        eine alternative Seite, die ich im noscript-Bereich deklariert hab ;)
        Die enthält allerdings nur Text - ganz plattes html quasi...

        liebe Grüße aus Berlin
        lina-

        --
        Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
    3. Hi,

      ich arbeite für solche Fälle mit einer javascript-Browserweiche, die mir das passende css-file einbindet:

      was ziemlicher Unsinn ist.

      var agt=navigator.userAgent.toLowerCase();
      if (agt.indexOf('opera') != -1)

      der läßt sich zwar kaum (legal) ändern, aber was ist, wenn ein Opera-User über einen Proxy kommt?

      document.write('default.css');

      Warum bekommen dieses nicht alle Browser, wenn es doh "default" ist?

      else if (agt.indexOf('gecko') != -1)

      Gerade "Geckos" lassen ihren UA-String vorzüglich manipulieren.

      else if (agt.indexOf('mac_powerpc') != -1)
        document.write('iexplorermac.css');

      Es gibt AFAIK noch mehr Mac-Browser als "like gecko" und IE.

      else if (agt.indexOf('msie') != -1)
        document.write('iexplorer2.css');

      das überrascht mich aber jetzt. alle übrigen Browser, die meist recht identische CSS-Umsetzungen haben, bekommen unterschiedliche Styles, aber die doch sehr unterschiedlichen IEs ein einziges?

      else
        document.write('default.css');

      Ach so, aber arum dann oben diese Zeile für deb Opera?

      Und das schlimmste: Ohne Javascript kein Style; obwohl das nun wirklich nicht nötig wäre. Mein Firefox kann ohne Javascript ziemlich gut CSS standardkonform umsetzen und mein IE würde ohne Javascript auch bestens Korrekturen in einem Conditional Comment annehmen.
      Wozu schließt Du ohne Grund 1% bis 5% der Besucher von den Styles aus und bietest ihnen nur eine - vermutlich ziemlich unschöne - Textdarstellung?

      Peinlich wird das für Dich, wenn ein Kunde die Seiten mal ohne Javascript aufruft. Und für den Kunden, wenn die ersten Beschwerden eingehen. Denn sinnvoll begründen kannst Du diesem Murks nicht.

      freundliche Grüße
      Ingo

      1. moin Ingo Turski :)

        Wozu schließt Du ohne Grund 1% bis 5% der Besucher von den Styles aus und bietest ihnen nur eine - vermutlich ziemlich unschöne - Textdarstellung?

        Tue ich nicht - da "meine" Browserseiten nicht der Öffentlichkeit zugänglich sind sondern nur den Kunden.
        Bei denen ist sichergestellt, dass Javascript aktiviert ist.
        Des weiteren wird von uns sichergestellt, dass die Browser, die in dem Javascript-Bereich aufgeführt sind, benutzt werden (und keine anderen - um auf dein Mac-Beispiel zu kommen)

        Peinlich wird das für Dich, wenn ein Kunde die Seiten mal ohne Javascript aufruft. Und für den Kunden, wenn die ersten Beschwerden eingehen. Denn sinnvoll begründen kannst Du diesem Murks nicht.

        Wird es nicht, weil er das nicht tut (tun möchte)Davon kann ich zu 100% ausgehen

        Was ich einsehe ist: Java-Skript is keine gute Möglickeit für die Öffentlichkeit eine Browserweiche zu erstellen.
        Was ich nicht einsehe: dass ihr mein Wissen (auch um die Grundsätze der Barrierefreihheit) zerreißt.

        Vielleicht haett ich meinen Tipp für dieses Posting lieber stecken lassen sollen... (war ja auch kein besonders guter)

        liebe Grüße aus Berlin
        lina-

        --
        Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
        1. Hi,

          Wozu schließt Du ohne Grund 1% bis 5% der Besucher von den Styles aus und bietest ihnen nur eine - vermutlich ziemlich unschöne - Textdarstellung?
          Tue ich nicht - da "meine" Browserseiten nicht der Öffentlichkeit zugänglich sind sondern nur den Kunden.

          Hat Bene irgendwelche Hinweise darauf gegeben, daß es sich bei ihm (wie vielleicht bei Dir) um einen eingeschränkten Benutzerkreis mit kontrollierter Browsermenge und definitiv aktiviertem Javascript handelt?

          Ich kann davon nichts lesen.

          Bei denen ist sichergestellt, dass Javascript aktiviert ist.
          Des weiteren wird von uns sichergestellt, dass die Browser, die in dem Javascript-Bereich aufgeführt sind, benutzt werden (und keine anderen - um auf dein Mac-Beispiel zu kommen)

          Diese Argumente mögen zählen, wenn Du Deine Lösung für Deine Seiten benutzt.

          Du hast Deine Lösung aber Bene vorgeschlagen, für den diese Argumente nicht zutreffen müssen (und laut FAQ sollten derartige Einschränkungen erwähnt werden, da andernfalls hier davon ausgegangen wird, daß Seiten für die Allgemeinheit gebaut werden sollen).

          Peinlich wird das für Dich, wenn ein Kunde die Seiten mal ohne Javascript aufruft. Und für den Kunden, wenn die ersten Beschwerden eingehen. Denn sinnvoll begründen kannst Du diesem Murks nicht.
          Wird es nicht, weil er das nicht tut (tun möchte)Davon kann ich zu 100% ausgehen

          Wie gesagt, solange Du Deine Lösung nur für Deine Seiten benutzt.
          Aber Du hast sie ja Bene vorgeschlagen.

          Was ich einsehe ist: Java-Skript is keine gute Möglickeit für die Öffentlichkeit eine Browserweiche zu erstellen.

          Warum schlägst Du Bene dann diese Lösung vor?

          Vielleicht haett ich meinen Tipp für dieses Posting lieber stecken lassen sollen... (war ja auch kein besonders guter)

          Zumindest hättest Du die eingeschränkte Nutzbarkeit erwähnen sollen.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Schreinerei Waechter
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. moin MudGuard :)

            Zumindest hättest Du die eingeschränkte Nutzbarkeit erwähnen sollen.

            hätt ich machen sollen - das is richtig...
            merk ich mir fürs nexte Mal :)

            .oO(ehrlich gesagt denk ich meistens gar nicht daran, dass meine Lösungen nur für bestimmte Nutzerkreise interessant sein können... aber ich geb mir Mühe das zu ändern)

            liebe Grüße aus Berlin
            lina-

            --
            Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
        2. Hi,

          Des weiteren wird von uns sichergestellt, dass die Browser, die in dem Javascript-Bereich aufgeführt sind, benutzt werden (und keine anderen - um auf dein Mac-Beispiel zu kommen)

          selbst wenn dem so ist: warum verwendest Du für jeden Browser eine eigene CSS-Datei? Das vervielfacht doch den Aufwand bei Änderungen und dürfte außerdem auch gar nicht erforderlich sein. Meiner Erfahrung nach reicht ein stimmiges CSS für Geckos, evtl. kleinere Korrekturen für Opera, manchmal Korrekturen für MacIE und öfters Korrekturen für WinIEs. I.d.R. tut es ein kleines über CC eingebundenes ergänzendes CSS für die WinIEs und falls Opera Mist baut, eben über Javascript-Weiche - dann aber if(window.opera) - eine Korrektur.

          Was ich einsehe ist: Java-Skript is keine gute Möglickeit für die Öffentlichkeit eine Browserweiche zu erstellen.

          Aber - wie Mudguard ja auch schon anmerkte - Du schlägst genau das vor. ;-)
          Und dann auch noch die denkbar schlechteste Browserweiche anhand des UA-Strings.
          Selbst in Deiner definierten Umgebung: ist dort sichergestellt, daß ein Firefox-User keine Erweiterungen installieren und aus Spaß seinen UA-String ändern kann? (Ich würde es versuchen und mich dann beschweren.;-)

          freundliche Grüße
          Ingo

  2. Hallo,

    bei Firefox 1.0 wird der Text ein Pixel tiefer dargestellt als die Ausgabe im IE.

    Das liegt im Auge des Betrachters. Bei mir würde der Text im IE ein Pixel höher dargestellt werden als im Firefox... ;-)

    div#col h1

    {
        font-size: 11px;
        line-height: 14px;
      color: #fff;
      background: #c0c0c0;
      padding: 3px 0 4px 4px;
    }

      
    line-height 14 Pixel minus font-size 11 Pixel ergeben 3 Pixel [1], die gleichmäßig ober- und unterhalb des Textes verteilt werden müssen. Da es keine halben Pixel gibt, müssen sich die Browser entscheiden, wo sie diesen letzten Pixel unterbringen werden. Und da es nicht festgelegt ist, wo dies zu geschehen hat, macht es jeder Browser je nach Lust und Laune. Bei anderen Schriftgrößen kann es übrigens in beiden gleich aussehen oder genau anders herum aussehen. Und dann sind da natürlich auch noch Opera, Konqueror, Safari, hastenichgesehen, etc. die sich auch alle für eine Variante entscheiden müssen. Bevor Du jetzt also damit anfängst, deswegen Browserweichen einzusetzen, solltest Du Dich eine Sache fragen:  
      
            Stört Dich tatsächlich dieser eine Pixel? [2]  
      
      
    Zum Thema Browserweichen:  
    Für CSS-Probleme solltest Du \_niemals\_ eine Javascript-Browserweiche einsetzen, dafür gibt es <http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/index.htm> und zahlreiche andere Seiten.  
      
    Viele Grüße  
    Carsten  
      
    [1] Sorge dafür, daß hier ein gerader Wert herauskommt und Du bist Deine Probleme los...  
      
    [2] Falls ja, dann solltest Du Dir überlegen, ob Du Dir das richtige Medium ausgesucht hast [3]  
      
    [3] Ist nicht böse gemeint, aber selbst wenn Du es schaffst, es auf \_Deinem\_ System in Deinen Browsern gleich aussehen zu lassen, heißt das nicht, daß es überall so aussieht. Es gibt viel zu viele Komponenten, die diese Darstellung beeinflussen (Andere Schriftart, weil deine vorgegebene Schriftart nicht vorhanden ist; Mindestschriftgröße, da die 11 Pixel jemandem viel zu klein sind, ...) Pixelgenaues Layout auf HTML-Seiten kann sehr leicht in die Hose gehen.  
    
    -- 
    [Doctype-Switch? Was is'n das?](http://www.carsten-protsch.de/zwischennetz/doctype/)
    
    1. Hallo

      Vielen Dank für die hilfreichen Antworten.

      Viele Grüße
      Bene