[CSS] top en bottom border worden niet weergegeven

[KoBolD54]

Na een tijd zoeken op google en op tweakers zonder resultaat heb ik besloten een topic te openen.

Ik heb een tabel die ik in 9 cellen heb verdeeld en waarvan ik de middelste linker- rechterkant, onder- bovenkant een border wil meegegeven. De uiterste 4 hoeken bevaten een ronding (.gif) zodat de tabel op de hoeken rond is.

Ik doe dit met CSS en de link en rechter kant gaat goed maar de boven en onder kant doet het niet.
Dit is mijn css:

Cascading Stylesheet:

.new_left {
    background-color: #ff99ff;
    border-left: 2px solid #ff00ff;
}

.new_top  {
    background-color: #ff99ff;
    border-top: 2px solid #ff00ff;
}

.new_right {
    background-color: #ff99ff;
    border-right: 2px solid #ff00ff;
}

.new_bottom {
    background-color: #ff99ff;
    border-bottom: 2px solid #ff00ff;
}

het resultaat:


Hopelijk kunnen jullie mij helpen

[Gonadan]

Kan je de HTML code ook nog even posten?

[André]

Ik heb het idee dat je classes dan op de verkeerde cellen staan, heb je iets online staan?

[KoBolD54]

Gonadan schreef op vrijdag 21 april 2006 @ 09:03:
Kan je de HTML code ook nog even posten?

Dit is de html code

HTML:

<table width="225" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="11" height="11">[img]"images/corner_left_top.gif"[/img]</td>
    <td class="new_top"></td>
    <td width="11" height="11">[img]"images/corner_right_top.gif"[/img]</td>
  </tr>
  <tr>
    <td class="new_left">&nbsp;</td>
    <td height="91" bgcolor="#ff99ff">&nbsp;</td>
    <td class="new_right">&nbsp;</td>
   </tr>
   <tr>
     <td width="11" height="11">[img]"images/corner_left_under.gif"[/img]</td>
     <td class="new_bottom"></td>
     <td width="11" height="11">[img]"images/corner_right_under.gif"[/img]</td>
    </tr>
</table>

ik heb nog niets online staan ben nog bezig met ontwerp

[ Voor 30% gewijzigd door KoBolD54 op 21-04-2006 09:11 ]

[stimpie79]

de TD's met "new_top" en "new_bottom" zijn leeg,
browsers hebben dan wel eens de neiging ook niets te renderen.

probeer eens met een & nbsp ; in deze TD's? (zoals je ook doet voor left en right)

edit:
nbsp werd natuurlijk niet getoond...

[ Voor 25% gewijzigd door stimpie79 op 21-04-2006 09:15 ]

[André]

Het komt omdat die cellen leeg zijn

[Gonadan]

Als je een lege cel hebt is het beter om er

code:

 

in te zetten.
Voor de zekerheid.

hihi te laat

[ Voor 18% gewijzigd door Gonadan op 21-04-2006 09:14 ]

[crisp]

stimpie79 schreef op vrijdag 21 april 2006 @ 09:13:
browsers hebben dan wel eens de neiging ook niets te renderen.

Hetgeen volledig volgens specificatie is, tenzij empty-cells: show is opgegeven (maar dat snapt IE natuurlijk weer niet).
Het rounded-corner verhaal is natuurlijk een gevalletje wat eenvoudig met een tabel is op te lossen, maar het druist wel in tegen het principe dat tabellen niet bedoelt zijn voor opmaak

[KoBolD54]

het is gelukt bedankt allemaal

een   zorgte ervoor dat de ruimte ertussen te groot werd.
Nu heb ik er een . in gezet met een grote van 1px en dezelfde kleur en het probleem is ook opgelost.

bedankt!

[crisp]

KoBolD schreef op vrijdag 21 april 2006 @ 09:40:
het is gelukt bedankt allemaal

een   zorgte ervoor dat de ruimte ertussen te groot werd.
Nu heb ik er een . in gezet met een grote van 1px en dezelfde kleur en het probleem is ook opgelost.

bedankt!

Je kan ook gewoon de font-size wat kleiner zetten

[BasieP]

KoBolD schreef op vrijdag 21 april 2006 @ 09:40:
het is gelukt bedankt allemaal

een   zorgte ervoor dat de ruimte ertussen te groot werd.
Nu heb ik er een . in gezet met een grote van 1px en dezelfde kleur en het probleem is ook opgelost.

bedankt!

das wel een erg ranzige oplossing.. kijk hierboven even

code:

 

staat voor non-breaking-space, en deze word altijd gebruikt voor dit soort situaties

[ Voor 5% gewijzigd door BasieP op 21-04-2006 09:43 ]

[KoBolD54]

BasieP schreef op vrijdag 21 april 2006 @ 09:43:
[...]


das wel een erg ranzige oplossing.. kijk hierboven even

code:

 

staat voor non-breaking-space, en deze word altijd gebruikt voor dit soort situaties

Ik heb geprobeerd om een   te gebruiken en de fontsize aan te passen maar dat werkt gewoon weg niet.