[css] probleem met border

[Verwijderd]

Ik heb een probleem met CSS.

ik heb het volgende stukje CSS:
<style type="text/css">
<!--
table {border-collapse: collapse;}
td { border: 1px solid #000000; vertical-align: baseline; }
//-->
</style>

Als ik nu een table op de pagina zet dan heb ik een mooie border van 1 px precies zoals ik dat wil.

als ik nu het volgende CSS doe:
<!--
table {border-collapse: collapse;}
.td { border: 1px solid #000000; vertical-align: baseline; }
//-->
</style>

en dan in iedere TD class="td" zet dan krijg ik tussen de cellen een border van 2 px terwijl de borders die niet aan een andere cell grenzen dit niet hebben. Deze hebben gewoon een rand van 1px. Ik vind het vreemd dat het gedrag veranderd. in CSS betekend toch td {} dat dit toegepast wordt op iedere <td></td> tag en dat is dan toch hetzelfde als .td{} en dan <td class=td></td>

[Willem]

.td betekent de classname .td ; da's niet handig.
Als je dezelfde argumenten van je table wilt toepassen op je td moet je doen

Cascading Stylesheet:

table.className,
table.className td {
  /* ... */ 
}

en als je de td zelf nog specifieke eigenschappen wilt meegeven, geef je die toch ook gewoon een className en definieer je die apart:

Cascading Stylesheet:

td.className {
  /* ... */
}

Lijkt me verder een kwestie van je beetje in CSS verdiepen...

[Grijze Vos]

.td is 'alle objecten met de class td'.

Misschien is td een gereserveerd woord, en mag je het niet in classes gebruiken. (gokje)
Anders zou ie het zo moeten doen.

[crisp]

Grijze Vos schreef op 18 september 2003 @ 18:55:
.td is 'alle objecten met de class td'.

Misschien is td een gereserveerd woord, en mag je het niet in classes gebruiken. (gokje)
Anders zou ie het zo moeten doen.

Het is sowieso redelijk onzinnig, en zelfs verwarrend om namen van bestaande tags ook als classes of id's te gaan gebruiken. Verder kan je het gebruik van classes inderdaad redelijk beperken door gebruik te maken van childselectors zoals willem169 al aangaf

[The Evil Brain]

Verwijderd schreef op 18 September 2003 @ 11:38:
en dan in iedere TD class="td" zet dan krijg ik tussen de cellen een border van 2 px terwijl de borders die niet aan een andere cell grenzen dit niet hebben. Deze hebben gewoon een rand van 1px.

ja hehe, twee keer een rand van 1 pixel = 2 pixels
Of zie ik iets verkeerd?

en zoals de rest al zegt: waarom zo moeilijk doen? als je echt meerdere celuiterlijken wilt, doe het dan met makkelijke namen zoals

Cascading Stylesheet:

td.border1 {} 
en
td.border2 {}

[ Voor 27% gewijzigd door The Evil Brain op 18-09-2003 19:14 ]

[Grijze Vos]

ik zie je foutje al denk ik class=td, probeer eens class="td"

[The Evil Brain]

dat zou niks uit moeten maken; HTML accepteert beide, bij xhtml zou je idd de aanhalingstekens moeten gebruiken (iets wat ik terzijde altijd doe: kun je d'r ook geen problemen mee krijgen)

[ Voor 29% gewijzigd door The Evil Brain op 18-09-2003 19:16 ]

[crisp]

The Evil Brain schreef op 18 September 2003 @ 19:10:
[...]


ja hehe, twee keer een rand van 1 pixel = 2 pixels
Of zie ik iets verkeerd?

en zoals de rest al zegt: waarom zo moeilijk doen? als je echt meerdere celuiterlijken wilt, doe het dan met makkelijke namen zoals

Cascading Stylesheet:

td.border1 {} 
en
td.border2 {}

Nee, de border-collapse zorgt ervoor dat 2 aangrenzende borders zeg maar 'samensmelten'