[CSS] border-top en border-bottom geven geen resultaat

Pagina: 1
Acties:

  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022
Ik heb de volgende html:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style>
table, th, td {
  border-collapse  : collapse;
  }

#domains .row_top {
  border-top       : 1px solid #F6C938;
  }

#domains .row_odd, #domains .row_bottom {
  background-color : #FDEEC3;
  }

#domains .row_bottom {
  border-bottom    : 1px solid #F6C938;
  }

#domains .price {
  border-right     : 1px solid #F6C938;
  }
</style>

<table id="domains" cellpadding="2">
<tr class="row_top">
  <td>.nl</td><td class="price">5.99</td>
  <td>.com</td><td class="price">7.50</td>
  <td>.net</td><td class="price">7.50</td>
  <td>.org</td><td class="price">7.50</td>
</tr>
<tr class="row_odd">
  <td>.info</td><td class="price">7.50</td>
  <td>.biz</td><td class="price">7.50</td>
  <td>.name</td><td class="price">10.00</td>
  <td>.be</td><td class="price">10.00</td>
</tr>
<tr class="row_even">
  <td>.de</td><td class="price">17.50</td>
  <td>.nu</td><td class="price">50.00</td>
  <td>.co.uk</td><td class="price">25.00</td>
  <td>.org.uk</td><td class="price">25.00</td>
</tr>
<tr class="row_bottom">
  <td>.com.tw</td><td class="price">29.00</td>
  <td>.org.tw</td><td class="price">29.00</td>
  <td>.vg</td><td class="price">17.50</td>
  <td>.bla</td><td class="price">99.99</td>
</tr>
</table>

In IE ziet dat er als volgt uit:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/colortable-ie.gif

En zo in FF:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/colortable-ff.gif

Waarom ziet het er niet gewoon zo uit?

Afbeeldingslocatie: http://www.danandan.luna.nl/got/colortable-me.gif

Voor de duidelijkheid - ik wil boven en onder een border zetten. Volgens mij doe ik dat met onderstaande regels, maar om de een of andere manier werkt dat niet:
Cascading Stylesheet:
1
2
3
4
5
6
7
#domains .row_top {
  border-top       : 1px solid #F6C938;
  }

#domains .row_bottom {
  border-bottom    : 1px solid #F6C938;
  }

Ik heb al verschillende dingen geprobeerd, zoals de css te veranderen naar .row_bottom # domains of zelfs gewoon .row_bottom, maar dit maakt geen verschil. Wat doe ik nu verkeerd?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."


  • Blaise
  • Registratie: Juni 2001
  • Niet online
Kan je niet gewoon de border aan de table geven?

[ Voor 73% gewijzigd door Blaise op 19-09-2005 18:54 ]


  • Michali
  • Registratie: Juli 2002
  • Laatst online: 22-03 18:12
Een rij is niet te stijlen. Het is puur een structureel element. Pas het toe op de cellen of beter nog (zoals Blaise voorstelt) gewoon op de tabel.

Noushka's Magnificent Dream | Unity


  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022
Michali schreef op maandag 19 september 2005 @ 19:03:
Een rij is niet te stijlen. Het is puur een structureel element. Pas het toe op de cellen of beter nog (zoals Blaise voorstelt) gewoon op de tabel.
Het is een goed idee om de tabel te stylen via de table:
Cascading Stylesheet:
1
2
3
#domains {
  border          : 1px solid #F6C938;
}

Alleen de opmerking dat een rij niet te stylen is klopt volgens mij niet, want ik kan wel een achtergrondkleur aan een rij meegeven.
Cascading Stylesheet:
1
2
3
#domains .row_odd, #domains .row_bottom {
  background-color : #FDEEC3;
  }

EDIT: GoT doet het overigens ook zo, zie ik:
Cascading Stylesheet:
1
2
3
4
5
6
table.listing tr.alt1 {
    background-color: #fefefe;
}
table.listing tr.alt2 {
    background-color: #fafafa;
}

[ Voor 23% gewijzigd door Reveller op 19-09-2005 19:17 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."


  • UltimateB
  • Registratie: April 2003
  • Niet online

UltimateB

Pomdiedom

Ik gebruik persoonlijk altijd.

Cascading Stylesheet:
1
2
3
4
5
6
table tr.row_top td {
 border-top:1px solid #F6C938;
}
table tr.row_)bottom td {
 border-bottom:1px solid #F6C938;
}


Ik loop me er ook nog wel eens aan te irriteren dat het niet helemaal gaat zoals je zou zeggen :)

Vandaag zelfs nog... :X

"True skill is when luck becomes a habit"
SWIS