Eichhorn, Christian: border beim tr

SELF-Forum

border beim tr

Eichhorn, Christian
– Informationen zu den Bewertungsregeln

Hallo!

Bei der beschreibung der BORDER-Eigenschaft wird beschrieben, dass man diese auf alle Tags, also auch tr's anwenden kann!
Dies funktioniert aber nicht!

Bei td und table kein Problem, nur beim br!

Hat jemand eine Idee, wie man das umsetzen könnte?

Hier mein Beispiel-Code:

test.html:
<html>
<head>
 <link rel="stylesheet" type="text/css" media="all" href="css.css" />
</head>
<body>
 <table>

<tr id="zeile1">
    <td>klasdgfskngksngkl</td>
    <td>nasdkgnskabgklsanfbgk</td>
   </tr>
  <tr id="zeile2">
   <td>klasdgfskngksngkl</td>
   <td>nasdkgnskabgklsanfbgk</td>
  </tr>
  <tr id="zeile3">
   <td>klasdgfskngksngkl</td>
   <td>nasdkgnskabgklsanfbgk</td>
  </tr>
 </table>
</body>
</html>

css.css:
table
{
 border: 5px solid black;
}

#zeile2
{
 border: 5px solid black;
 background-color: blue;
}

td
{
 border: 5px solid black;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. border beim tr

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Bei der beschreibung der BORDER-Eigenschaft wird beschrieben, dass man diese auf alle Tags, also auch tr's anwenden kann!

    Richtig.

    Dies funktioniert aber nicht!

    Doch.

    Bei td und table kein Problem, nur beim [tr]!

    Was ist dein Problem?

    Hat jemand eine Idee, wie man das umsetzen könnte?

    Mit dem entsprechenden Rahmenmodell. [CSS2 §17.6]

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. border beim tr

      hurrtz Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Christian, Gunnar und selfhtml,

      ich habe das gleiche Problem, das vom Threadersteller genannt wurde:
      die CSS-Eigenschaft border wird im <tr>-Element unzureichend dargestellt.

      Mit dem Code

      <table style="border: 1px solid #fff"><tr class="tr_border"> [...]

      *#tr_border { border: 1px solid #fff } (in eigener Stylesheet-Datei)

      bekomme ich unterschiedliche Ergebnisse in unterschiedlichen Browsern.

      Der Effekt, den ich mir erwünsche, stellt sich im Mozilla Firefox 1.5.0.4 ein.
      Im Internet Explorer 6.0 jedoch, wird der Ramen, den ich über die tr-Klasse definieren wollte, ignoriert.

      Als Beispiel-URL soll folgende Seite dienen:
      http://www.hurrtz.de - dort auf den Link "Darwin Awards" klicken - dort wird eine Tabelle eingeblendet, in der sämtliche <tr>-Elemente einen Ramen haben sollten (bitte nicht auf die Diskrepanz Linkname/Linkinhalt hinweisen - bin gerade in einer Umbau- und Testphase).

      Ich habe den Link des Vorposters verfolgt und die entsprechende Seite durchgelesen.
      Die dort genannte Richtlinie zur Umsetzung eines Ramens für das <tr>-Tag wurde von mir umgesetzt. Der Effekt im Internet Explorer wurde dadurch jedoch nicht geändert.

      Sicherlich übersehe ich einen bestimmten Fakt, aber ich kann ihn leider nicht erkennen.

      Wenn jemand eine Antwort auf die Frage des Threaderstellers geben kann, würde ich mich darüber ebenso freuen.

      Mit freundlichen Grüßen
      hurrtz

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. border beim tr

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hello out there!

        Als Beispiel-URL soll folgende Seite dienen:
        http://www.hurrtz.de - dort auf den Link "Darwin Awards" klicken

        Du hast den Sinn von URIs noch nicht verstanden: Man muss nicht irgendeine angeben, um dann zu sagen click hierhin, click dorthin. Warum gibst du nicht gleich http://www.hurrtz.de/content/gaestebuch/gaestebuch_ausgabe.php an?

        Die dort genannte Richtlinie zur Umsetzung eines Ramens für das <tr>-Tag wurde von mir umgesetzt. Der Effekt im Internet Explorer wurde dadurch jedoch nicht geändert.

        Beim IE im Quirks-Modus würde mich gar nichts wundern. Und bei ineinander verschachtelten Tabellen auch nicht. Warum machst du solchen Unsinn?

        Wenn jemand eine Antwort auf die Frage des Threaderstellers geben kann, würde ich mich darüber ebenso freuen.

        ?? Du hast doch auf die Antwort auf die Frage des Threaderstellers geantwortet.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. border beim tr

          hurrtz Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo,

          Du hast den Sinn von URIs noch nicht verstanden: Man muss nicht irgendeine angeben, um dann zu sagen click hierhin, click dorthin.

          Wohl war. Stimmt. Da komme ich kaum drum herum: Hast Recht.
          Die spezielle Adresse wäre günstiger gewesen.
          Ich werd's mir zukünftig merken.

          Die dort genannte Richtlinie zur Umsetzung eines Ramens für das <tr>-Tag wurde von mir umgesetzt. Der Effekt im Internet Explorer wurde dadurch jedoch nicht geändert.
          Beim IE im Quirks-Modus würde mich gar nichts wundern. Und bei ineinander verschachtelten Tabellen auch nicht. Warum machst du solchen Unsinn?

          Ich nehme an, dass dich die Antwort, dass ich eine Tabelle in einer Tabelle nutze, um den Seiteninhalt elegant zu zentrieren, wohl nicht befriedigt.
          Aber als Gegenfrage sei mir bitte gestattet: Würde sich das Problem wirklich lösen, wenn ich keine geschachtelten Tabellen verwendete und diese auch nur tabellengerechte und für Tabellen konzipierte Inhalte hätte?
          Ich habe eine Testseite online gestellt: XHTML-konform und an den W3C-Richtlinien über das gestalten von CSS-Ramen orientiert.
          http://www.hurrtz.de/bla/tr-test.htm
          Bei dieser, der Nachvollziehbarkeit halber einfach gehaltenen Seite stellt sich wieder der genannte Effekt ein: Im Internet Explorer wird ignoriert, dass der <tr>-Tag einen Ramen haben sollte.

          Ich bin mir desweiteren nicht sicher, was du mit "Quirks-Modus" meinst.
          Beziehst du dich dabei auf möglicherweise problematische Einstellungen meinerseits im Internet Explorer oder beziehst du dich dabei auf den Internet Explorer im Allgemeinen?

          Wenn jemand eine Antwort auf die Frage des Threaderstellers geben kann, würde ich mich darüber ebenso freuen.

          ?? Du hast doch auf die Antwort auf die Frage des Threaderstellers geantwortet.

          *sich die Hand vor die Stirn haut*
          Na, das habe ich nun wirklich vergessen.

          -hurrtz

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. border beim tr

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            Ich bin mir desweiteren nicht sicher, was du mit "Quirks-Modus" meinst.
            Beziehst du dich dabei auf möglicherweise problematische Einstellungen meinerseits im Internet Explorer oder beziehst du dich dabei auf den Internet Explorer im Allgemeinen?

            Gunnar bezieht sich auf einen im Umfeld der Webseitenerstellung allgemein gebräuchlichen Begriff, den sich der Unkundige bitte von einer Suchmaschine seiner Wahl erklären lassen mag.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. border beim tr

              hurrtz Homepage des Autors
              +1 Informationen zu den Bewertungsregeln

              Hi wahsaga,

              ich halt's nich aus.

              Da halte ich den "Quirks-Mode" für eine eigenwillige Bezeichnung userspezifischer Browserkonfigurationen und dann stellt es sich als Lösung meines Problems heraus...
              Ich habe sie zwar noch nicht gefunden, weiß aber wenigstens inzwischen, dass dieser Modus die Quelle meines Ärgers ist.

              An Christian:
              Der Quirks-Mode bezeichnet einen alternativen Interpretationsmodus des Browsers. Er kennt den normales Modus (wird aktiviert, wenn der doctype  angegeben wird und stimmt) und den Quirks-Modus. Letzterer ist der Versuch des Browsers, einen Quelltext zu interpretieren, von dem er nicht weiß, was ihn erwartet, wo quasi alle tags und Elemente drin stecken können, die es je in HTML gegeben hat und teilweise nicht mehr gibt. Also eine Art Abwärtskompatibilitätsmodus.

              Im Falle des Internet Explorers löst allerdings noch etwas anderes diesen Modus aus: Der Box-Model-Bug.
              Dieser lässt sich darauf reduzieren: Wenn du in Blockelementen (div oder table) sowohl width/height als auch border/padding definierst, springt der Internet Explorer in den Quirks-Mode und versaut die Darstellung, in dem er sie ignoriert.
              So habe ich das jedenfalls verstanden.

              Ich habe inzwischen verstanden, dass der Internet Explorer in den Quirks-Mode springt, weil ich versucht habe, meine Seite XHTML-kompatibel zu machen.
              Via entsprechender Javascript-Funktion habe ich nun herausgefunden, dass ich mit einem HTML-Doctype in den Standard-Compliants-Mode komme.

              Also muss das Problem in besagtem Box-Model-Bug stecken.
              Ich muss nur noch herausfinden, wie ich unbewusst width oder height mit border kombiniert habe und dann sollte das Problem gelöst sein.

              Meine Vermutung wäre ja, dass sich widht/height und border/padding nicht nur auf (z.B.) style="width:xxx; border:xpx solid #000" beschränkt sondern auch schon auf border:xpx solid #000, denn da werden ja bereits Größenangabe und Ramen kombiniert.

              Muss ich also damit Leben, dass dieses Problem im Internet Explorer nicht zu beheben ist, sondern bestenfalls zu umgehen?

              Energie des Verstehens...
              naja. ^^

              -hurrtz

              Beitrag melden
              +1
              Informationen zu den Bewertungsregeln

              1. border beim tr

                Axel Richter
                – Informationen zu den Bewertungsregeln

                Hallo,

                Muss ich also damit Leben, dass dieses Problem im Internet Explorer nicht zu beheben ist, sondern bestenfalls zu umgehen?

                Ja. Der IE interpretiert CSS border für das TR-Element nicht. Ein Workaround wäre, CSS border-top und border-bottom für alle TDs in der gewünschten TR zu setzen. Das würde die Zeile zumindest oben und unten mit einem Rahmen versehen. Voraussetzung ist in jedem Fall
                table { border-collapse:collapse; }

                Weitere Annäherung bringt dann nur noch JavaScript, z.B. in einer CSS expression():

                  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>CSS TR-border-Workaround for IE</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
/*allgemeingueltiges CSS*/  
table { border-collapse:collapse; }  
tr#border { border:2px solid black; }  
</style>  
<!--[if ie]>  
<style type="text/css">  
/*IE-only-CSS*/  
tr#border td { border-top:2px solid black; border-bottom:2px solid black; }  
  
/*ab hier funktioniert es nur noch mit eingeschaltetem JavaScript*/  
tr#border td { border-left:expression((this == this.parentNode.getElementsByTagName("TD")[0])?"2px solid black":"none"); border-right:expression((this == this.parentNode.getElementsByTagName("TD")[this.parentNode.getElementsByTagName("TD").length-1])?"2px solid black":"none"); }  
</style>  
<![endif]-->  
</head>  
<body>  
<table>  
<tr>  
 <td>zelle1</td>  
 <td>zelle2</td>  
 <td>zelle3</td>  
</tr>  
<tr id="border">  
 <td>zelle4</td>  
 <td>zelle5</td>  
 <td>zelle6</td>  
</tr>  
<tr>  
 <td>zelle7</td>  
 <td>zelle8</td>  
 <td>zelle9</td>  
</tr>  
</table>  
</body>  
</html>

                Erläuterung zu

                  
tr#border td { border-left:expression((this == this.parentNode.getElementsByTagName("TD")[0])?"2px solid black":"none"); border-right:expression((this == this.parentNode.getElementsByTagName("TD")[this.parentNode.getElementsByTagName("TD").length-1])?"2px solid black":"none");

                Alle TDs in TR#border bekommen eine linke Rahmenlinie, wenn sie dem ersten TD-Element innerhalb ihres parentNodes (TR) entsprechen(this.parentNode.getElementsByTagName("TD")[0]), also das erste TD im TR sind.

                Alle TDs in TR#border bekommen eine rechte Rahmenlinie, wenn sie dem letzten TD-Element innerhalb ihres parentNodes (TR) entsprechen(this.parentNode.getElementsByTagName("TD")[this.parentNode.getElementsByTagName("TD").length-1]), also das letzte TD im TR sind.

                viele Grüße

                Axel

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

              2. border beim tr

                Gunnar Bittersmann Homepage des Autors
                +1 Informationen zu den Bewertungsregeln

                Hello out there!

                Er kennt den normales Modus

                Nennt sich auch Standard-compliant-Modus. Aber in der Tat, dieser sollte die Normalität sein.

                und den Quirks-Modus. Letzterer ist der Versuch des Browsers, einen Quelltext zu interpretieren, von dem er nicht weiß, was ihn erwartet, wo quasi alle tags und Elemente drin stecken können, die es je in HTML gegeben hat und teilweise nicht mehr gibt.

                Alle Elemente und Attribute meinst du sicher. Und dann weiß der Browser doch, was ihn erwartet.

                Also eine Art Abwärtskompatibilitätsmodus.

                Eher abwärtskompatibel zu alten Versionen des IE.

                Im Falle des Internet Explorers löst allerdings noch etwas anderes diesen Modus aus: Der Box-Model-Bug.

                Nein, du vertauscht hier Ursache und Wirkung. Anhand der Doctype-Deklaration entscheidet sich, in welchem Modus gerendert wird. Im Quirks-Modus begeht der IE den Box-Model-Bug.

                Dieser lässt sich darauf reduzieren: Wenn du in Blockelementen (div oder table) sowohl width/height als auch border/padding definierst, springt der Internet Explorer in den Quirks-Mode und versaut die Darstellung, in dem er sie ignoriert.

                Nichts davon. Wenn sich der IE im Quirks-Modus befindet (keine Doctype-Angabe oder eine ohne System-Identifier), dann interpretiert er Breiten-/Höhenangaben anders. Beispiel:

                #foo {  
  width: 100px;  
  padding: 10px;  
}

                Dieses Element würde im Quirks-Modus 100 Pixel in der Breite beanspruchen. Auf beiden Seiten gehen jeweils 10 Pixel fürs Padding ab, so dass für den Inhalt 80 Pixel zur Verfügung stehen.

                Im Standard-compliant-Modus wird entsprechend dem Box-Modell [CSS2] gerendert: Die Inhaltsbox ist 100 Pixel breit, dazu kommen zu beiden Seiten jeweils 10 Pixel Padding, so dass das Element in der Breite 120 Pixel braucht.

                Ich habe inzwischen verstanden, dass der Internet Explorer in den Quirks-Mode springt, weil ich versucht habe, meine Seite XHTML-kompatibel zu machen.

                Auch hier hast du was falsch verstanden. Ob Quirks- oder Standard-compliant-Modus hat mit der Frage, ob HTML 4.01 oder XHTML 1.0, nichts zu tun.

                See ya up the road,
                Gunnar

                --
                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln

              3. border beim tr

                Orlando Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hallo hurrtz,

                Meine Vermutung wäre ja, dass sich widht/height und border/padding nicht nur auf (z.B.) style="width:xxx; border:xpx solid #000" beschränkt sondern auch schon auf border:xpx solid #000, denn da werden ja bereits Größenangabe und Ramen kombiniert.

                Richtig, die Art und Weise der Deklaration spielt keine Rolle. Das Ergebnis im Browser muss ohnehin das Selbe sein.

                Muss ich also damit Leben, dass dieses Problem im Internet Explorer nicht zu beheben ist, sondern bestenfalls zu umgehen?

                Ja, es gibt einige http://de.selfhtml.org/css/formate/box_modell.htm@title=Workarounds.

                Energie des Verstehens...

                Wir kriegen euch alle. ;-)

                Grüße
                 Roland

                --
                SELFHTML-Community > Visitenkarten > Orlando
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln