Hallo,
im Archiv ist zu sehen, daß mit diesem Problem schon andere gekämpft haben, ich fand aber leider keine Lösung.
Ich habe CSS bis jetzt eher halbherzig eingesetzt, möchte aber für ein neues Projekt CSS gleich von Beginn an "flächendeckend" einsetzen und bin bei Folgendem hängengeblieben, bei dem ich Euch um Hilfe bitte:
Unter http://www.jedlicka.at/_temp/menu.gif ist ein Screenshot abgelegt, um mein Problem zu veranschaulichen.
Die Hauptpunkte in diesem Vertikal-Menu sollen jeweils durch einen 2- oder 3px-Abstand vom vorigen Menupunkt getrennt sein. Untermenupunkte allerdings, sollten direkt "aneinanderkleben".
Das gelingt nur dann, wenn im table-tag cellspacing="0" angegeben ist.
Was immer ich auch versucht habe cellspacing="0" durch entsprechende CSS-Angaben zu ersetzen, es gelingt einfach nicht (btw. IE5).
Natürlich habe ich auch border-collapse:collapse probiert, aber das ist IE-proprietär und außerdem ist dann die hellere Oberkante dieser simulierten Buttons nicht mehr zu sehen.
Habe ich da 'was übersehen?
Für Eure Hilfe wäre ich sehr dankbar!
Manfred
Das Html dazu:
<html>
<head>
<style>
{ font-family: Arial; }
body { background-color: teal; }
table { border-style: none;
border-width: 0px;
width: 105px; }
td { font-size: 11px;
background-color: #ADCBC6;
border-top-color: #C6DFDE;
border-left-color: #C6DFDE;
border-right-color: #94AEAD;
border-bottom-color: #94AEAD;
border-style: solid;
border-width: 2px;
line-height: 100%;
padding: 1px;
text-align: center; }
td.primary { font-weight: bold; }
td.separate { line-height: 1px;
border-style: none;
border-width: 0px;
background-color: teal; }
</style>
</head>
<body>
<table>
<tr><td class='primary'>Aktuelles</td></tr>
<tr><td class='separate'> </td></tr>
<tr><td class='primary'>Sortiment</td></tr>
<tr><td>Handstrickwolle</td></tr>
<tr><td>Stickmaterial</td></tr>
<tr><td class='separate'> </td></tr>
<tr><td class='primary'>Sortiment</td></tr>
<tr><td>Handstrickwolle</td></tr>
<tr><td>Stickmaterial</td></tr>
</table>
</body>
</html>