"3d" vakken

Zie http://tinyurl.com/5bbb37

Mijn vraag betreft de vakken die ik hier zowel links als rechts gebruik. Hierin staan de menu's en afbeeldingen. Het werkt in principe prima, nadeel is dat IE 6 ze op een vreemde manier toont.

Ik heb ze via het volgende principe gemaakt:

HTML om een vak te krijgen:
<?
<div class="vak">
<div class="begin"></div>
INHOUD
<div class="eind"></div>
</div>
?>

met CSS:
<?
div#linkervak .vak {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
padding: 15px 10px 15px 10px;
background-image: url('../afbeeldingen/vak1_midden.png');
background-repeat: repeat-y;
overflow: hidden;
width: 189px;
}
div#linkervak .vak .begin {
position: absolute;
top: 0px;
left: 0px;
width: 209px;
height: 6px;
background-image: url('../afbeeldingen/vak1_begin.png');
background-repeat: no-repeat;
}

div#linkervak .vak .eind {
position: absolute;
bottom: 0px;
left: 0px;
width: 209px;
height: 11px;
background-image: url('../afbeeldingen/vak1_eind.png');
background-repeat: no-repeat;
}

?>
Wat er eigenlijk gebeurt:
Je opent een vak, hiermee krijg je de achtergrond (hierbij herhaalt zich een stukje image met een hoogte van 1px, met de zijkanten en achtergrond van het vak).
Met begin en eind laat je de boven- en onderkant zien. (ook een image)

Wat doe ik fout, of hoe moet ik deze vakken goed creeëren?
Internet Explorer 6 geeft het fout weer, en ik weet nou niet of dit de netste manier van css/html gebruik is, om zo'n vak te creëren...