Kai: Gitternetzlinien nicht anzeigen

Hallo,

ich hoffe ihr könnt mir weiterhelfen, ich verstehe es einfach nicht. Ich möchte bei bestimmten Zellen oder Zeilen die Gitternetzlinie nicht anzeigen:

HIer mein Code:

<table width="95%" style="margin-top:6px;margin-bottom:8px;border-collapse:collapse;border-style:solid;border-width:2;border-color:#000000;" id="t1" frame="box">  
<caption style="margin-bottom:6px;margin-top:8pt;font-weight:bold;">Tabelle zum Ausbau von Unterbaugruppen</caption>  
<col align="left">  
<col align="left">  
<col align="left">  
<col align="left">  
<thead valign="">  
<tr style="font-weight:bold;background-color:#eaeaa5;">  
<td style="border-bottom:hidden 0px #FFFFFF;border-right:0px hidden #FFFFFF;"></td>  
<td style="border-bottom:hidden 0px #FFFFFF;border-right:0px hidden #FFFFFF;"></td>  
<td style="border-bottom:hidden 0px #FFFFFF;border-right:2px solid #000000;" align="center" colspan="2">Vorher auszubauend</td>  
</tr>  
<tr style="font-weight:bold;background-color:#eaeaa5;">  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">A</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">Test</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">BE</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">FP</td>  
</tr>  
</thead>  
<tbody>  
<tr style="background-color:#eeeeee;">  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">Test </td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">Diode</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">7</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">1</td>  
</tr>  
<tr style="background-color:#eeeeee;">  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">2</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">4</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">8</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">1</td>  
</tr>  
<tr style="background-color:#eeeeee;">  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">dies ist ein test</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">Steckerplatte</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">10-15</td>  
<td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">1</td>  
</tr>  
</tbody>  
</table>

beim Firefox zeigt er es richtig an, dass er bei der 1.Zeile die Gitternetzlinie, die unterhalb des Textes läuft nicht anzeigt, beim IE8 funktioniert es leider nicht. Hat jemand einen Tipp für mich, woran das liegt und wie ich das beheben könnte?

Vielen Dank im Voraus
Viele Grüße
Kathrin

  1. Hallo Kathrin,

    dein Code gefällt mir! Es ist ein Paradebeispiel wieso es css gibt! Wenn du css Klassen benutzt sparst du dir einen Haufen schreib bzw. kopier Arbeit!
    Zu deinem Problem.
    Ich denke das hier verursacht den Fehler:
    border-collapse:collapse;border-style:solid;border-width:2;border-color:#000000;
    Border-Collapse

    Gruß
    im Rahmen bleibender
    T-Rex

    1. Hi T-Rex,

      ich verwende eigentlich XML und eine Stylesheet-Datei - ich hatte nur den generierten Text kopiert ;)

      Hm ich dachte, dass es besser wäre, border-collapse zu verwenden, damit wenn man border-bottom:hidden verwendet, keine weißen Linien entstehen durch den Abstand zwischen den beiden Zellen. Ich hoffe, du verstehst wie ich das meine. Ich finde, die Tabelle sieht an sich auch schöner aus, wenn man collapse verwendet oder bekommt man das auch hin, wenn man seperate verwendet, dass es nur einen Strich für jede Gitternetzlinie gibt?

      Gruß

      1. Hallo Kathrin,

        ich verwende eigentlich XML und eine Stylesheet-Datei - ich hatte nur den generierten Text kopiert ;)

        kann das keinen schöneren Code produzieren?

        Hm ich dachte, dass es besser wäre, border-collapse zu verwenden,

        das hat mit dem Darstellungsproblem sicher nichts zu tun, sondern ist ganz bestimmt das, was Du verwenden willst.

        Freundliche Grüße

        Vinzenz

        1. » Hallo Kathrin,

          ich verwende eigentlich XML und eine Stylesheet-Datei - ich hatte nur den generierten Text kopiert ;)

          kann das keinen schöneren Code produzieren?

          Das produziert nur das, was ich (bzw mein Chef früher) in die XSL-Datei reingeschrieben haben und da ich das nie richtig gelernt habe (keine schulung und im Studium auch nicht behandelt), ist das sicher nicht so perfekt. Ich habe immer nur das verändert, das nicht gepasst hat, der Rest blieb so stehen :o

          Hm ich dachte, dass es besser wäre, border-collapse zu verwenden,

          das hat mit dem Darstellungsproblem sicher nichts zu tun, sondern ist ganz bestimmt das, was Du verwenden willst.

          wie meinst du das? Meinst du dass es nicht an border-collapse:collapse liegt, sondern dass ich wohl unbedingt den doctype aufnehmen muss oder?

          LG

          1. Hallo,

            kann das keinen schöneren Code produzieren?
            Das produziert nur das, was ich (bzw mein Chef früher) in die XSL-Datei reingeschrieben haben und da ich das nie richtig gelernt habe (keine schulung und im Studium auch nicht behandelt), ist das sicher nicht so perfekt. Ich habe immer nur das verändert, das nicht gepasst hat, der Rest blieb so stehen :o

            tja, ich fände folgendes HTML-Fragment schöner und vor allem übersichtlicher:

            <table id="t1" frame="box">  
            <caption>Tabelle zum Ausbau von Unterbaugruppen</caption>  
            <col>  
            <col>  
            <col>  
            <col>  
            <thead>  
            <tr>  
                <td class="randlos"></td>  
                <td class="randlos"></td>  
                <td class="rand" colspan="2">Vorher auszubauend</th>  
            </tr>  
            <tr>  
                <td>A</td>  
                <td>Test</td>  
                <td>BE</td>  
                <td>FP</td>  
            </tr>  
            </thead>  
            <tbody>  
            <tr>  
                <td>Test </td>  
                <td>Diode</td>  
                <td>7</td>  
                <td>1</td>  
            </tr>  
            <tr>  
                <td>2</td>  
                <td>4</td>  
                <td>8</td>  
                <td>1</td>  
            </tr>  
            <tr>  
                <td>dies ist ein test</td>  
                <td>Steckerplatte</td>  
                <td>10-15</td>  
                <td>1</td>  
            </tr>  
            </tbody>  
            </table>
            

            und moderne Browser benötigen noch nicht einmal die beiden Klassen, von denen  bei Ersetzen der td-Elemente in der ersten Zeile durch th-Elemente sowieso nur eine (für alte Browser wie IE) erforderlich wäre.

            wie meinst du das? Meinst du dass es nicht an border-collapse:collapse liegt, sondern dass ich wohl unbedingt den doctype aufnehmen muss oder?

            ja. Ganz bestimmt willst Du das collapsing-border-Modell verwenden. Ganz bestimmt kann man mit MSXML einen DOCTYPE schreiben.

            Freundliche Grüße

            Vinzenz

    2. Grüße dich T-Rex,

      dein Code gefällt mir! Es ist ein Paradebeispiel wieso es css gibt! Wenn du css Klassen benutzt sparst du dir einen Haufen schreib bzw. kopier Arbeit!

      Was sind CSS-Klassen? Und wozu die Mehrzahl? Die Tabelle benötigt höchstens eine Klasse, möglicherweise funktioniert auch eine ID. Etwas bessere Strukturierung und schon kann alles von der Wurzel aus angesprochen werden.

      Das Verwenden von zu vielen IDs und Klassen in HTML ist leider auch bei Fortgeschrittenen ein weit verbreitetes Manko.

      Gruß, Daniel

    3. @@T-Rex:

      nuqneH

      Wenn du css Klassen benutzt sparst du dir einen Haufen schreib bzw. kopier Arbeit!

      Wenn du gültige Rechtschreibung benutzt, sparst du anderen einen Haufen Les- bzw. Erkennungsarbeit!

      Und CSS-Klassen kann man aufgrund ihrer Nichtexistenz nicht benutzen.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
  2. Hallo Kai (Kathrin?),

    HIer mein Code:

    <table width="95%" style="margin-top:6px;margin-bottom:8px;border-collapse:collapse;border-style:solid;border-width:2;border-color:#000000;" id="t1" frame="box">

    <caption style="margin-bottom:6px;margin-top:8pt;font-weight:bold;">Tabelle zum Ausbau von Unterbaugruppen</caption>
    <col align="left">
    <col align="left">
    <col align="left">
    <col align="left">
    <thead valign="">
    <tr style="font-weight:bold;background-color:#eaeaa5;">
    <td style="border-bottom:hidden 0px #FFFFFF;border-right:0px hidden #FFFFFF;"></td>
    <td style="border-bottom:hidden 0px #FFFFFF;border-right:0px hidden #FFFFFF;"></td>
    <td style="border-bottom:hidden 0px #FFFFFF;border-right:2px solid #000000;" align="center" colspan="2">Vorher auszubauend</td>
    </tr>
    <tr style="font-weight:bold;background-color:#eaeaa5;">
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">A</td>
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">Test</td>
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">BE</td>
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="center" valign="top">FP</td>
    </tr>
    </thead>
    <tbody>
    <tr style="background-color:#eeeeee;">
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">Test </td>
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">Diode</td>
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">7</td>
    <td style="border-bottom:solid 2px #000000;border-right:solid 2px #000000;" align="left" valign="top">1</td>
    </tr>

    [...]

    </tbody>
    </table>

      
    
    > beim Firefox zeigt er es richtig an, dass er bei der 1.Zeile die Gitternetzlinie, die unterhalb des Textes läuft nicht anzeigt, beim IE8 funktioniert es leider nicht. Hat jemand einen Tipp für mich, woran das liegt und wie ich das beheben könnte?  
      
    vermutlich am Quirksmodus. Im standardkonformen Modus kann der IE8 das.  
    Welchen <http://de.selfhtml.org/html/xhtml/unterschiede.htm#dokumenttyp@title=Doctype> verwendest Du?  
      
    Tipps:  
      
     - Verzichte auf Inlinestyles. Dein Code wird schlanker und übersichtlicher.  
     - Verzichte auf veraltete HTML-Attribute, die die Darstellung beeinflussen  
       wie valign und align. Verwende dafür die entsprechenden CSS-Eigenschaften.  
      
      
    Freundliche Grüße  
      
    Vinzenz
    
    1. Hallo Kai (Kathrin?),

      Sorry ich schreibe gerne mal unter einem männlichen Namen, weil ich schon mal doof hingestellt wurde, als ich etwas gefragt habe, dass das ja typisch Frau wäre :o

      vermutlich am Quirksmodus. Im standardkonformen Modus kann der IE8 das.
      Welchen http://de.selfhtml.org/html/xhtml/unterschiede.htm#dokumenttyp@title=Doctype verwendest Du?

      Ich habe gesehen dass wir gar kein Doctype verwenden bisher :o Wenn ich

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
             "http://www.w3.org/TR/html4/loose.dtd">

      eintrage, dann funktioniert es *freu* Allerdings habe ich keine Ahnung wie ich den Doctype bei uns reinbekomme, da wird das XML ja mit dem XSL über

      xml=new ActiveXObject("MSXML.DOMDocument");
      load = xml.load("Pfad zur Datei");
      if(load ==true){
        parent.frames[0].document.open();
        parent.frames[0].document.write(xml.transformNode(cs.XMLDocument);
      }

      anzeigen. Ich weiß das ist nicht standardkonform, sondern Microsoft-Murks. Könnt ihr mir da trotzdem weiterhelfen?

      Tipps:

      • Verzichte auf Inlinestyles. Dein Code wird schlanker und übersichtlicher.

      Was sind in meinem Code Inlinestyles?

      Vielen lieben Dank schon mal für die Tipps. Das mit valign und align werde ich auf jeden Fall ändern, das mit den Inlinestyles auch, sobald ich es verstanden habe :)

      LG Kathrin

      1. Hallo Kathrin,

        Hallo Kai (Kathrin?),
        Sorry ich schreibe gerne mal unter einem männlichen Namen, weil ich schon mal doof hingestellt wurde, als ich etwas gefragt habe, dass das ja typisch Frau wäre :o

        viel öfter gibts den umgekehrten Fall, dass jemand auf einen Frauenbonus spekuliert :-)

        vermutlich am Quirksmodus. Im standardkonformen Modus kann der IE8 das.
        Welchen http://de.selfhtml.org/html/xhtml/unterschiede.htm#dokumenttyp@title=Doctype verwendest Du?
        Ich habe gesehen dass wir gar kein Doctype verwenden bisher :o Wenn ich

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
               "http://www.w3.org/TR/html4/loose.dtd">

        eintrage, dann funktioniert es *freu* Allerdings habe ich keine Ahnung wie ich den Doctype bei uns reinbekomme, da wird das XML ja mit dem XSL über

        +1 für meine Glaskugel

        xml=new ActiveXObject("MSXML.DOMDocument");
        load = xml.load("Pfad zur Datei");
        if(load ==true){
          parent.frames[0].document.open();
          parent.frames[0].document.write(xml.transformNode(cs.XMLDocument);
        }

        anzeigen. Ich weiß das ist nicht standardkonform, sondern Microsoft-Murks. Könnt ihr mir da trotzdem weiterhelfen?

        • Verzichte auf Inlinestyles. Dein Code wird schlanker und übersichtlicher.
          Was sind in meinem Code Inlinestyles?

        Die Inhalte des style-Attributes.

        statt valign verwendest Du besser die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align und statt align die Eigenschaft http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=text-align.
        Ganz bestimmt kann man das auch mit MSXML hinbekommen, aber damit habe ich mich bisher nicht herumschlagen müssen :-)

        Freundliche Grüße

        Vinzenz

        1. Hi Vinzenz,

          +1 für meine Glaskugel

          Allerdings :)

          statt valign verwendest Du besser die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align und statt align die Eigenschaft http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=text-align.

          wird geändert :)

          Habe es herausbekommen, geht nicht über MSXML sondern kann man sogar im Stylesheet eintragen. wer es mal sucht, man muss folgendes einbinden:
          <xsl:output
              method="html"
              doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" doctype-system="http://www.w3.org/TR/html4/loose.dtd"
              encoding="ISO-8859-1"
              omit-xml-declaration="yes"
              version="1.0" />

          Was allerdings sehr komisch ist, dass wenn ich den Quelltext anzeigen lasse, als html speichere und im IE und Firefox anzeigen lasse, dann sieht meine Tabelle so aus wie ich sie haben möchte, aber in unserer Umgebung mit Frames und im Hintergrund läuft ein Apache (nur als Info, der hat natürlich nichts mit der Darstellung zu tun), ist die 1.Spalte nicht einheitlich ausgerichtet und die Zeile, die eigentlich nicht sichtbar sein sollte, ist so eine ganz leichte graue Linie. Falls jemand eine Idee hat, woran sowas liegen könnte, wäre ich ihm/ihr seeeeehr dankbar. Kann es mir nämlich nicht erklären.

          Vielen Dank für dein übersichtliches Beispiel. Ich werde es versuchen umzusetzen, hast natürlich recht. Werd ich morgen gleich mal probieren

          Viele Grüße und vielen Dank für deine bisherige Hilfe
          Kathrin

      2. Om nah hoo pez nyeetz, Kathrin!

        • Verzichte auf Inlinestyles. Dein Code wird schlanker und übersichtlicher. Was sind in meinem Code Inlinestyles?

        Es gibt grundsätzlich verschiedene Möglichkeiten, style-Angaben zu machen:

        * in einem style-Attribut --> "inline-style"  * in einem style-Element  * in einer externen Ressource (* durch missbilligte Attribute)

        siehe auch: SELFHTML-Wiki: Stylesheets einbinden Matthias

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif