Unsichtbar Tabellenrahmen?

Status
Nicht offen für weitere Antworten.

The G

Mitglied
Hallo @ all!

Ich will gerade meine HP für andere Browser validieren, da jetzt die unsichtbaren Linien in einer Tabelle trotz dem angezeigt wedern. Ich habe gehört, dass kan man mit CSS gaz leicht lösen. Was muss ich nun eintippen, wenn ich das:
HTML:
style="border-right-style: none; border-right-width: medium; border-top-color: #666666; border-top-width: 1"

als CSS will?
 
Hi,
etwa so in der Art:

#tabelle{

border-right-style:none;
border-top-width:1px;
border-top-style:solid;
border-top-color: #666666;


}

bei der Tabelle mußt du dann id="tabelle" angeben
 
Ich habe versucht das zu lösen, so wie es in deinem Link steht, doch es klappt bei mir einfach nicht. Könntet ihr mir helfen? Mein Code sieht folgendermaßen aus:

HTML:
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>

</head>

<body>

<div align="left">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#808080" width="548" height="228" id="AutoNumber1">
    <tr class="topic" >
      <td id="#01" width="5" height="21" style="border-right-style: none; border-right-width: medium; border-top-style:solid; border-top-width:1; border-bottom-style:solid; border-bottom-width:1">&nbsp;</td>
      <td class="topic1" width="145" height="21" style="border-right-style: solid; border-right-width: 1; border-top-style:solid; border-top-width:1; border-bottom-style:solid; border-bottom-width:1; border-left-style:none; border-left-width:medium">&nbsp;</td>
      <td class="speci" width="5" height="21" style="border-left-style: solid; border-left-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; border-right-style:none; border-right-width:medium">
      &nbsp;</td>
      <td class="speci" width="441" height="21" style="border-top-style: solid; border-top-width: 1; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
      Hallo</td>
      <td width="5" height="21" style="border-left-style: none; border-left-width: medium; border-top-color:#111111; border-top-width:1">&nbsp;</td>
    </tr>
    <tr>
      <td width="5" height="230" style="border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
      <td width="145" height="230" style="border-left-style: none; border-left-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
      <td width="5" height="230" style="border-right-style:none; border-right-width:medium; border-bottom-style:none; border-bottom-width:medium">&nbsp;</td>
      <td width="441" height="230" style="border-top-style: solid; border-top-width: 1; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium; border-bottom-style:none; border-bottom-width:medium">&nbsp;</td>
      <td width="5" height="230" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    </tr>
    <tr>
      <td width="5" height="1" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium"></td>
      <td width="145" height="1" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium"></td>
      <td width="5" height="1" style="border-top-style: none; border-top-width: medium; border-right-style:none; border-right-width:medium; border-bottom-style:none; border-bottom-width:medium"></td>
      <td width="441" height="1" style="border-style:none; border-width:medium; ">
      Hallo</td>
      <td width="5" height="1" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium"></td>
    </tr>
    <tr>
      <td width="5" height="1" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium"></td>
      <td width="145" height="1" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium"></td>
      <td width="5" height="1" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium"></td>
      <td width="441" height="1" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium">
      Hallo</td>
      <td width="5" height="1" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium"></td>
    </tr>
  </table>
</div>

</body>

</html>

Ich habs versucht doch es klappt einfach nicht. Die Linien wollen im Firefox einfach nicht verschwinden. :(

Wie soll ich da anfangen?
Soviel hab ich schon, doch es werden leider alle Linien angezeigt. Weiß nicht warum.


HTML:
<style>
<!--
tr.topic    { background: #7F9BC3; }
 			
td.zeile1_spalte1  { border-top:1px solid #666666; border-right-style: none; border-left-style:solid; border-left-width:1; border-bottom-style:solid; border-bottom-width:1 }
td.zeile1_spalte2  { border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; border-left-style: none; border-left-width:1; }
-->
</style>
 
So sieht die Seite im Firefox, trotz der paar Zeilen CSS, aus:
 

Anhänge

  • Untitled-2 copy.png
    Untitled-2 copy.png
    16,6 KB · Aufrufe: 89
Hallo!

Also bei dem Code blickt keiner durch.
Was mir aber auffällt.....
In CSS gehören zu Grössenangaben in Zahlen auch Masseinheiten dazu.
Es heisst nicht <style> sondern <style type="text/css">.
Du hast in deinem Style Klassen definiert, die ich nirgends im HTML finde.
Du gibst border-right-style: none; an und im nächstem Atemzug border-right-width: medium;, also für eins von beiden solltest Du dich schon entscheiden, entweder Du willst einen Rahmen haben, oder halt nicht.
Du gibst aber an dass Du kein Rahmen haben willst und der soll medium sein. :suspekt:

Ausserdem lässt sich das ganze mit z.b. border-right: grösse style farbe; verkürzen.
Und wenn Du kein Border haben willst, langt auch border-right: none; voll und ganz aus.

Auch solltest Du die CSS Angaben mindestens im HEAD machen um den BODY so weit wie möglich übersichtlich zu halten, noch besser währe natürlich eine externe CSS-Datei, diese solltest Du sowieso nehmen wenn Du die Formatierungen auf mehreren Seiten anwenden willst.

Valide wird die Seite so nie, dazu brauchst Du erstmal ein Doctype, der gehört noch über den HEAD.

Die Direktformatierung hight in der Tabelle ist nicht HTML 4.01 valide.
Die Direktformatierung width braucht nur in der ersten (oder irgend einer anderen) Tabellenzeile stehen, da die Zellen der übrigen Tabellenzeilen sich nach diesen richten.

Zu Frontpage sage ich lieber erst garnichts. :rolleyes:

Also, alles nochmal überarbeiten und den überflüssigen Kram rauswerfen.

Gruss Dr Dau
 
Guten Morgen/Tag!!

Ich habe den Quelltext nun etwas geändert. Er sieht nun folgendermaßen aus:

HTML:
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>

<style type="text/css">
<!--

td.1_1 { border-top: 1px solid #808080; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080 }
td.1_2 { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none }
td.1_3 { border-top: 1px solid #808080; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080 }
td.1_4 { border-top: 1px solid #808080; border-right: none; border-bottom: 1px solid #808080; border-left: none }
td.1_5 { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none }

td.2_1 { border-top: 1px solid #808080; border-right: none; border-bottom: none; border-left: 1px solid #808080 }
td.2_2 { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: none; border-left: none }
td.2_3 { border-top: 1px solid #808080; border-right: none; border-bottom: none; border-left: 1px solid #808080 }
td.2_4 { border-top: 1px solid #808080; border-right: none; border-bottom: none; border-left: none }
td.2_5 { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: none; border-left: none }

td.3_1 { border-top: none; border-right: none; border-bottom: none; border-left: 1px solid #808080 }
td.3_2 { border-top: none; border-right: 1px solid #808080; border-bottom: none; border-left: none }
td.3_3 { border-top: none; border-right: none; border-bottom: none; border-left: 1px solid #808080 }
td.3_4 { border-top: none; border-right: none; border-bottom: none; border-left: none }
td.3_5 { border-top: none; border-right: 1px solid #808080; border-bottom: none; border-left: none }

td.4_1 { border-top: none; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080 }
td.4_2 { border-top: none; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none }
td.4_3 { border-top: none; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080 }
td.4_4 { border-top: none; border-right: none; border-bottom: 1px solid #808080; border-left: none }
td.4_5 { border-top: none; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none }

-->
</style>
</head>

<body>

<div align="left">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="548" height="228" id="AutoNumber1">
    <tr class="topic" >
      <td class="1_1" width="5" height="21">&nbsp;</td>
      <td class="1_2" width="145" height="21">&nbsp;</td>
      <td class="1_3" width="5" height="21">&nbsp;</td>
      <td class="1_4" width="441" height="21">Hallo</td>
      <td class="1_5" width="5" height="21">&nbsp;</td>
    </tr>
    <tr>
      <td class="2_1" width="5" height="230">&nbsp;</td>
      <td class="2_2" width="145" height="230">&nbsp;</td>
      <td class="2_3" width="5" height="230">&nbsp;</td>
      <td class="2_4" width="441" height="230">&nbsp;</td>
      <td class="2_5" width="5" height="230">&nbsp;</td>
    </tr>
    <tr>
      <td class="3_1" width="5" height="1"></td>
      <td class="3_2" width="145" height="1"></td>
      <td class="3_3" width="5" height="1"></td>
      <td class="3_4" width="441" height="1">Hallo</td>
      <td class="3_5" width="5" height="1"></td>
    </tr>
    <tr>
      <td class="4_1" width="5" height="1"></td>
      <td class="4_2" width="145" height="1"></td>
      <td class="4_3" width="5" height="1"></td>
      <td class="4_4" width="441" height="1">Hallo</td>
      <td class="4_5" width="5" height="1"></td>
    </tr>
  </table>
</div>

</body>

</html>

Doch trotz dem sieht die Seite im Firefox noch immer gleich aus. Der einzige unterschied: Alle Linien sind grau. (Was kein Problem ist)

Was mache ich falsch? :(
 
Die Klassen dürfen nicht mit Zahlen beginnen.
Ich halte es so: eindeutige Namen (z.b. class="ueberschrift" class="oben_links" class="oben_mitte" usw.), keine sonderzeichen (lediglich unterstriche inerhalb der Namen zur besseren lesbarkeit), keine Umlaute und wenn möglich gänzlicher verzicht auf Zahlen.

[edit] Und nimm die Grössenangaben der Zellen auch mit in den Klassen auf, dabei wieder bedenken dass Du eine Masseinheit angeben musst (z.b. td.oben_links { width: 5px; height: 21px; } )
Denn in CSS sind height Angaben erlaubt, bei der Direktformatierung aber nichtmehr. [/edit]
 
Zuletzt bearbeitet:
Ich hab nun die Namen geändert und "width" und "heigh" auch noch in die Klassen aufgenommen.

HTML:
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<META HTTP-EQUIV="Refresh" CONTENT="30;URL=http://mhribernik.mh.funpic.de/index.php">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 3</title>

<style type="text/css">
<!--

td.oben_a { border-top: 1px solid #808080; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080; width: 5px; height: 21px; }
td.oben_b { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none; width:145px; height: 21px; }
td.oben_c { border-top: 1px solid #808080; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080; width: 5px; height: 21px; }
td.oben_d { border-top: 1px solid #808080; border-right: none; border-bottom: 1px solid #808080; border-left: none; width: 441px; height: 21px; }
td.oben_e { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none; width: 5px; height: 21px; }

td.mitte_a { border-top: 1px solid #808080; border-right: none; border-bottom: none; border-left: 1px solid #808080; width: 5px; height: 230px; }
td.mitte_b { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: none; border-left: none; width: 145px; height: 230px; }
td.mitte_c { border-top: 1px solid #808080; border-right: none; border-bottom: none; border-left: 1px solid #808080; width: 5px; height: 230px; }
td.mitte_d { border-top: 1px solid #808080; border-right: none; border-bottom: none; border-left: none; width: 441px; height: 230px; }
td.mitte_e { border-top: 1px solid #808080; border-right: 1px solid #808080; border-bottom: none; border-left: none; width: 5px; height: 230px; }

td.unten_a { border-top: none; border-right: none; border-bottom: none; border-left: 1px solid #808080; width: 5px; height: 1px; }
td.unten_b { border-top: none; border-right: 1px solid #808080; border-bottom: none; border-left: none; width: 145px; height: 1px; }
td.unten_c { border-top: none; border-right: none; border-bottom: none; border-left: 1px solid #808080; width: 5px; height: 1px; }
td.unten_d { border-top: none; border-right: none; border-bottom: none; border-left: none; width: 441px; height: 1px; }
td.unten_e { border-top: none; border-right: 1px solid #808080; border-bottom: none; border-left: none; width: 5px; height: 1px; }

td.boden_a { border-top: none; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080; width: 5px; height: 1px; }
td.boden_b { border-top: none; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none; width: 145px; height: 1px; }
td.boden_c { border-top: none; border-right: none; border-bottom: 1px solid #808080; border-left: 1px solid #808080; width: 5px; height: 1px; }
td.boden_d { border-top: none; border-right: none; border-bottom: 1px solid #808080; border-left: none; width: 441px; height: 1px; }
td.boden_e { border-top: none; border-right: 1px solid #808080; border-bottom: 1px solid #808080; border-left: none; width: 5px; height: 1px; }

-->
</style>
</head>

<body>

<div align="left">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="548" height="228" id="AutoNumber1">
    <tr class="topic" >
      <td class="oben_a">&nbsp;</td>
      <td class="oben_b">&nbsp;</td>
      <td class="oben_c">&nbsp;</td>
      <td class="oben_d">Hallo</td>
      <td class="oben_e">&nbsp;</td>
    </tr>
    <tr>
      <td class="mitte_a">&nbsp;</td>
      <td class="mitte_b">&nbsp;</td>
      <td class="mitte_c">&nbsp;</td>
      <td class="mitte_d">&nbsp;</td>
      <td class="mitte_e">&nbsp;</td>
    </tr>
    <tr>
      <td class="unten_a"></td>
      <td class="unten_b"></td>
      <td class="unten_c"></td>
      <td class="unten_d">Hallo</td>
      <td class="unten_e"></td>
    </tr>
    <tr>
      <td class="boden_a"></td>
      <td class="boden_b"></td>
      <td class="boden_c"></td>
      <td class="boden_d">Hallo</td>
      <td class="boden_e"></td>
    </tr>
  </table>
</div>

</body>

</html>

Nun sieht die Tabelle so aus: Die Linien die als "none" deffiniert sind, sin anders gefärbt.

Was mache ich die ganze zeit falsch? Wo liegt der Fehler?
 

Anhänge

  • ff.png
    ff.png
    2,3 KB · Aufrufe: 57
Tja, dein border-collapse: collapse ist das Problem.
SelfHTML hat gesagt.:
Bei der Angabe collapse kommt es zu Konflikten zwischen Rahmenformatierungen einzelner Zellen.
Ausserdem fehlt noch der Doctype.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Die height Angabe im TABLE ist nicht zulässig (auch wieder mit CSS formatieren).
Und Du musst in die leeren Zellen ein erzwungenes Leerzeichen &nbsp; setzen, weil sonst z.b. der IE die Zellen (und damit verbunden die Zellenrahmen) nicht darstellen kann.
 
Status
Nicht offen für weitere Antworten.
Zurück