• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS-Problem "border-collapse"

LeGato

LeGato

New member
Hi ho,

folgendes Problem:

Ich hätte gerne eine Tabelle, in der die Tabelle selbst und alle Tabellenzellen einen ein Pixel starken Rand haben.

"Kein Problem!" schreit der Webdesigner und schreibt:

<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#7C7D7B">

So weit, so gut. Aaaaaber:

Ich hätte die Border-Anweisung aus Eleganz- und Studiengründen gerne in einer externen CSS-Datei, also z.B.

table.content{
border-collapse: collapse;
(weitere style-vorschriften...)
}
table.content td {
border-width: 1px;
border-color: #7C7D7B;
border-style: solid;
}

Die "border-collapse"-Anweisung soll bewirken, dass die Linie zwischen zwei benachbarten Tabellenzellen ZWEI Pixel breit wird (weil ja jede Zelle ihren eigenen Rand hat).

Das funktioniert auch in den meisten Browsern ganz prima. Nur leider nicht beim Netscape 6.1 und beim IE 5.5 für den Mac. Bei diesen beiden bekommt tatsächlich jede Zelle einen eigenen Rahmen, und damit die Katastrophe perfekt ist, lassen diese Browser auch noch einen Extra-Pixel Platz zwischen diesen Rahmen... :mad:

Hat irgendwer eine Idee?

Danke für alle Antworten!

LeGato
 
funktioniert es denn in den genannten Browsern über den table tag und nur über CSS nicht?

Leider hab ich hier (bin nicht zu Hause) keine Testbrowser zur Verfügung)

Die "border-collapse"-Anweisung soll bewirken, dass die Linie zwischen zwei benachbarten Tabellenzellen ZWEI Pixel breit wird (weil ja jede Zelle ihren eigenen Rand hat).
Zum Vergrößern anklicken....
[edit] soweit ich informiert bin, ist border-collapse dafür da, das bei einer definition von einem 1px border eben nicht zwischen zwei Zellen 2px draus werden, sondern diese sich überlappen und der border auch zwischen diesen Zellen 1px bleibt. Mich wundert grad deine Aussage darüber das ein 2px border entsteht.[/edit]
 
Zuletzt bearbeitet:
Hi bine,

tja, genau das ist ja das Problem: Die beiden genannten Browser halten sich einfach nicht an die Vorgaben des W3C :p

border-collapse soll eigentlich genau die 2px verhindern, klappt aber halt nicht überall...

Ich hab's jetzt so gelöst, dass ich die Zellenränder für jede Zelle einzeln so gelegt habe, dass nie zwei Zellen an der selben Stelle einen Rand haben. Aufwendig, aber es funktioniert (in allen Browsern!).

Aber ärgerlich isses schon.

Ach ja: Frohes neues Jahr wünsch' ich dir!

LeGato
 
soweit ich dich verstehe, könntest du das problem auch so lösen:
Code: 
<html>
<head>
<style>
table.content {
  background-color: #7C7D7B;
}
table.content tr {
  background-color: #FFFFFF;
}
</style>
</head>
<body>
<table class="content" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>asfdsafdsadf safd safasfas adsf</td><td>asdfasd sad sadasdgafdsgsdaf</td>
</tr>
<tr>
<td>aafdsdsaf asfdadsf fsfdg fsdsfddsfg</td><td>adsgffdsagasfdasdf sadf</td>
</tr>
</table>
</body>
</html>
 
Hey Rasputin,

stimmt, darauf bin ich selber natürlich mal wieder nicht gekommen...

Klar, das funktioniert einwandfrei. Vielen Dank!

LeGato
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben