Christoph Ruhnke: Browser und Style-Sheets

Bei Verwendung von Style-Sheets mit unterschiedlichen Browsern, kommt es teilweise zu merkwuerdigen Ergebnissen. Seiten, die auf dem MS-IE prima dargestellt werden, sehen im Netscape sehr unbefriedigend aus.

Definiert man in der *.css-Datei beispielsweise eine Farbe fuer Ueberschriften

h1 {background-color:#0000ff;}

so klappt das noch bei beiden Browsern ganz gut. Fuegt man dem ein Filter-Tag fuer den MS-IE hinzu

h1 {background-color:#0000ff;filter:dropShadow(color=#808080,offx=2,offy=2);}

so wird das vom MS-IE auch prima dargestellt, aber der Netscape beruecksichtigt den Style fuer <h1> UEBERHAUPT NICHT mehr, im Gegenteil, er stellt die Ueberschrift im Standard-Format der Seite dar (body {font-size:10pt;color:black;})

Bisher war ich immer davon ausgegangen, dass Browser Teilangaben von Styles, die sie nicht interpretieren koennen, ignorieren, aber den Rest der Angabe dennoch verwenden.

Ich suche jetzt nach einer Methode, nach Moeglichkeit ohne Scripts (koennten ja abgeschaltet sein), dass je nach verwendetem Browser ein bestimmter Teil der Style-Sheet Datei verwendet wird, so nach dem Motto:

@Netscape {
h1 {color:#000080;}
}

@Microsoft {
h1 {color:#000080;filter:dropShadow(color=#808080,offx=2,offy=2);}
}

Oder aber (wieder ohne Scripts), dass je nach Browser eine andere *.css Datei verwendet wird, etwa so:

<head>
<Microsoft><link rel=stylesheet type="text/css" href="microsoft.css"></Microsoft>
<Netscape><link rel=stylesheet type="text/css" href="netscape.css"></Netscape>
<Other><link rel=stylesheet type="text/css" href="other.css"></Other>
</head>

Mit freundlichen Gruessen

  1. Hallo,
    mit einen kleinen Trick geht auch das, schreibe:

    h1 {background-color:#0000ff;}
    h1.a {background-color:#0000ff;filter:dropShadow color=#808080,offx=2,offy=2);}
    h1.b {}

    Jetzt brauchst du nur noch das h1 - Tag so schreiben:
    <h1 class="a b">
    Da der IE mehrere Klassen in "class" erlaubt, der NN diese Schreibweise aber ignoriert, bekommst du beim NN nur die rote Schrift. Der IE dagegen nimmt die rote Schrift und den Filter.

    Schöne Grüße
    Thomas Mell

    1. »»Da der IE mehrere Klassen in "class" erlaubt, der NN diese Schreibweise aber ignoriert, bekommst du beim NN nur die rote Schrift. Der IE dagegen nimmt die rote Schrift und den Filter.

      Vielen Dank für den Tip, da wäre ich nicht drauf gekommen (trotz Studium MSDN-CDs. Habe das gleich in meiner internen Knowledgebase gespeichert.

      Inzwischen habe ich aber auch noch zwei andere Möglichkeiten gefunden, falls noch jemand anderes dieses Problem hat.

      1. Doppelter Eintrag im CSS

      Zwei Einträge für den h1 Style in der *.css Datei anlegen, zuerst den allgemeinen für MS und NS gemeinsam:

      h1 { background-color:#0000ff; }

      Danach zusätzlich den, der nur für MS gilt:

      h1 { filter:dropShadow(color=#000000, offx=2, offy=2); }

      Dann klappt das auch mit dem Netscape, natürlich nur der erste Eintrag, wie gewünscht.

      2. Serverseitige Auswahl der CSS Datei mit ASP

      <%
      Option Explicit
      Dim CSS
      If Instr(Request.ServerVariables ("HTTP_USER_AGENT"),"MSIE") >0 Then
        CSS = "microsoft.css"
      Else
        CSS = "other.css"
      End If
      %>
      <html>
      <head>
        <link rel=stylesheet type="text/css" href="<%=CSS%>">
      </head>
      ...

      MfG Christoph Ruhnke

  2. Hallo Christoph!

    Oder aber (wieder ohne Scripts), dass je nach Browser eine andere *.css Datei verwendet wird, etwa so:

    <link rel=stylesheet type="text/css" href="netscape.css">
    <link rel=stylesheet type="text/css" media="screen" href="microsoft.css">

    oder: innerhal des selben CSS
    @media screen {
    h1 {color:#000080;filter:dropShadow(color=#808080,offx=2,offy=2);}
    }

    Grüße
    Thomas