[Valid XHTML en CSS] Vreemd probleem met TD height en DOCTYP - Softwareontwikkeling

dinsdag 8 februari 2005 18:04

Acties:

Topicstarter

Ik heb een tabel waarin alle TD's een hoogte krijgen van 20 pixels. Behalve 1 TD, deze moet 1 pixel hoog zijn en gevuld met een background kleur.

Dit had ik prima werkend, totdat ik de DOCTYPE veranderde, toen dacht ik, dit werkt niet, en toen veranderde ik het weer terug, maar de TD die 1 pixel hoog moet blijven is nu ook 20 pixels hoog.

Het document is valid XHTML Transitional 1.0 en de CSS is valid CSS.

Hier is de code:

Dit is de DOCTYPE

HTML:

1 2	<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dit is de TABLE waar het om gaat:

HTML:

<table width="380" border="0" cellpadding="0" cellspacing="0" class="tdheight20">
 <tr>
  <td colspan="2" width="380" height="20"></td>
 </tr>
 <tr>
  <td colspan="2" height="16"><b>Bedrijfsgegevens</b></td>
 </tr>
 <!-- Dit is de TD die 1 pixel hoog zou moeten zijn, zie de stylesheet voor de seperateline style//-->
 <tr>
  <td colspan="2" class="seperateline"></td>
 </tr>
 <tr>
  <td colspan="2" height="2"></td>
 </tr>
</table>

Dit is de stylesheet die erbij hoort:

Cascading Stylesheet:

body
{ 
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 cursor: default;
}
body.popup
{
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
}
form
{
 margin: 0px 0px 0px 0px;
}
table
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
}
td
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
}
table.tdheight20 td
{
 height: 20px;
}
.tdtopalignment
{
 vertical-align: top;
 padding-top: 3px;
 padding-bottom: 4px;
}
.seperateline
{
 height: 1px;
 background: #E06500;
}

Het vreemde vind ik dat zodra ik van:

HTML:

1
2
3

 <tr>
  <td colspan="2" class="seperateline"></td>
 </tr>

Maak -->

HTML:

1
2
3

 <tr>
  <td colspan="2" style="height: 1px;" class="seperateline"></td>
 </tr>

Het werk werkt.
Tevens vind ik het raar dat voor de verandering van alleen de DOCTYPE dit wel prima werkte, zowel in IE6 als in Opera.

Als ik het doe zoals het laatste code fragment hierboven is dit toch dubbelop?
Waarom krijg ik de TD nu niet gewoon 1pixel hoog met alleen die class="seperateline"?

Dan nog iets:
Opera pakte eerste de hoogte van de TD = 20 pixels ook niet goed op, na op de Opera website wat info te hebben gelezen heb ik alle tagnames in de Stylesheet lowercase gemaakt, wat dat probleem oploste. In de code had ik namelijk <table> dus lowercase, maar in de stylesheet had ik alle tagnames UPPERCASE.

[ Voor 18% gewijzigd door Urk op 08-02-2005 19:55 . Reden: reactie overbodig ]

dinsdag 8 februari 2005 20:38

Acties:

Koeniepoenie

Hm, het lijkt er sterk op dat je die als een soort border gebruikt.. Je kunt dan beter die cel weglaten en gewoon border-bottom in je CSS definieren..

correct me if I'm wrong..

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337

dinsdag 8 februari 2005 20:54

Acties:

faabman

Urk schreef op dinsdag 08 februari 2005 @ 18:04:
Het document is valid XHTML Transitional 1.0 en de CSS is valid CSS.

dat zegt natuurlijk vrij weinig over de semantische correctheid van je document en die is minstens, zo niet belangrijker als de validatie...

@ je vraag:
Speel anders ff met line-height en font-size...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

dinsdag 8 februari 2005 21:59

Acties:

Urk

Topicstarter

faabman schreef op dinsdag 08 februari 2005 @ 20:54:
[...]

dat zegt natuurlijk vrij weinig over de semantische correctheid van je document en die is minstens, zo niet belangrijker als de validatie...

@ je vraag:
Speel anders ff met line-height en font-size...

Bedankt voor de berichten...

line-height op 1px zetten en font-size op 0pt in de CSS helpt ook niet, het probleem blijft!

Wat ik in mijn code doe is toch ook gewoon correct? Het ligt lijkt me ook niet aan de DOCTYPE.

[ Voor 4% gewijzigd door Urk op 08-02-2005 21:59 . Reden: betere leesbaarheid ]

dinsdag 8 februari 2005 22:28

Acties:

Verwijderd

Het is heel eenvoudig en heeft te maken met de CSS-regel: hoe specifieker hoe hoger in rang.

Cascading Stylesheet:

/* deze regel is specifieker */
table.tdheight20 td
{
 height: 20px;
}

/* dan deze regel */
.seperateline
{
 height: 1px;
 background: #E06500;
}

Hij zal dus de 20px gebruiken. Oplossing:maak je .seperateline regel specifieker:

Cascading Stylesheet:

table.tdheight20 td.seperateline
{
 height: 1px;
}

meer info: http://www.w3.org/TR/CSS21/cascade.html#specificity
P.S. De eerdere posters in dit topic hadden wel gelijk over het andere: dit is een bijzonder ranzige manier om een horizontale streep te genereren in je pagina.

[ Voor 21% gewijzigd door Verwijderd op 08-02-2005 22:31 ]

dinsdag 8 februari 2005 22:42

Acties:

Verwijderd

Daarnaast zijn de waarden van jouw CLASS attribuut om te huilen en doen me denken aan de tijd toen FONT nog populair was.

dinsdag 8 februari 2005 22:46

Acties:

Urk

Topicstarter

Verwijderd schreef op dinsdag 08 februari 2005 @ 22:28:
Het is heel eenvoudig en heeft te maken met de CSS-regel: hoe specifieker hoe hoger in rang.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
/* deze regel is specifieker */
table.tdheight20 td
{
 height: 20px;
}

/* dan deze regel */
.seperateline
{
 height: 1px;
 background: #E06500;
}
Hij zal dus de 20px gebruiken. Oplossing:maak je .seperateline regel specifieker:
Cascading Stylesheet:
1
2
3
4
table.tdheight20 td.seperateline
{
 height: 1px;
}
meer info: http://www.w3.org/TR/CSS21/cascade.html#specificity
P.S. De eerdere posters in dit topic hadden wel gelijk over het andere: dit is een bijzonder ranzige manier om een horizontale streep te genereren in je pagina.

Ok! Bedankt $_/-\o_$
Wilde bijna zeggen dat dit wel goed werkt in IE6 maar niet in Opera 7.54 maar gelukkig werkt dat nu ook goed. De code is als volgt:

HTML:

<table width="380" border="0" cellpadding="0" cellspacing="0" class="tdheight20">
 <tr>
  <td colspan="2" width="380"></td>
 </tr>
 <tr>
  <td colspan="2" style="height: 16px;"><b>Bedrijfsgegevens</b></td>
 </tr>
 <tr>
  <td colspan="2" class="seperateline"></td>
 </tr>
 <tr>
  <td colspan="2" style="height: 2px;"></td>
 </tr>
</table>

Cascading Stylesheet:

body
{ 
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 cursor: default;
}
body.popup
{
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
 margin-top: 10px;
}
form
{
 margin: 0px 0px 0px 0px;
}
table
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
}
td
{
 font-family: Verdana, "Lucida Sans Unicode", sans-serif;
 font-size: 8pt;
}
table.tdheight20 td
{
 height: 20px;
}
table.tdheight20 td.seperateline
{
 height: 1px;
 background: #E06500;
}
.seperateline
{
 height: 1px;
 background: #E06500;
}

De laatste .seperateline staat er ook nog in omdat deze ook word gebruikt in tables die niet de tdheight20 class dragen

dinsdag 8 februari 2005 22:57

Acties:

Urk

Topicstarter

Verwijderd schreef op dinsdag 08 februari 2005 @ 22:42:
Daarnaast zijn de waarden van jouw CLASS attribuut om te huilen en doen me denken aan de tijd toen FONT nog populair was.

Verklaar je nader en noems een voorbeelden, en eventuele verbeteringen in jouw ogen.
Ben ik wel benieuwd naar...

Enne....nobody is mr. perfect

dinsdag 8 februari 2005 23:08

Acties:

Verwijderd

Classes moet je gebruiken met semantiek in het achterhoofd (vrij vertaald van w3c), ze geven een soort subclasse aan van een element. Het is meer iets als een beroep voor personen ofzo, een politieagent noem je ook geen "meneer-in-zwart-uniform"

nja, ik heb het allemaal al eens opgeschreven dus ik spam maar weer eens een beetje:
http://www.rikkertkoppes.com/thoughts/class-and-style

en w3c:
http://www.w3.org/QA/Tips/goodclassnames

[ Voor 8% gewijzigd door Verwijderd op 08-02-2005 23:13 ]

dinsdag 8 februari 2005 23:10

Acties:

crisp

Devver

Pixelated

Urk schreef op dinsdag 08 februari 2005 @ 22:57:
[...]

Verklaar je nader en noems een voorbeelden, en eventuele verbeteringen in jouw ogen.
Ben ik wel benieuwd naar...

Enne....nobody is mr. perfect

CSS is juist bedoelt om een scheiding te creeëren tussen style en opmaak, op het moment dat je een class 'tdheight20' noemt dan kan je net zo goed height="20" of style="height:20px" in je opmaak zetten. Je ondermijnt dus het hele idee achter CSS

Intentionally left blank

dinsdag 8 februari 2005 23:48

Acties:

Urk

Topicstarter

Verwijderd schreef op dinsdag 08 februari 2005 @ 23:08:
Classes moet je gebruiken met semantiek in het achterhoofd (vrij vertaald van w3c), ze geven een soort subclasse aan van een element. Het is meer iets als een beroep voor personen ofzo, een politieagent noem je ook geen "meneer-in-zwart-uniform"

nja, ik heb het allemaal al eens opgeschreven dus ik spam maar weer eens een beetje:
http://www.rikkertkoppes.com/thoughts/class-and-style

en w3c:
http://www.w3.org/QA/Tips/goodclassnames

Hier zit inderdaad wel wat in ja! Hoewel ik er wel gedeeltelijk goed gebruik van maakte, ik had namelijk niet mijn hele CSS gepost. Ik heb namelijk ook classnames in gebruik als bijv:
inputerror, sortheader, header e.d.
Deze zijn wel goed genoemd, toch?

woensdag 9 februari 2005 00:04

Acties:

Verwijderd

Voor 'header' heb je over het algemeen ook gewoon elementen in HTML 4.01 zitten. 'inputerror' zoul wat algemener als 'error' kunnen denk ik. (Op het moment dat je hem op een INPUT element of iets dergelijks zet wordt hij vanzelf specifiek. Geld ook voor 'sortheader', maar ik heb de context waarin ze voorkomen niet gezien dus ik ben niet 100% zeker.)

Pagina: 1

Reageer