Positionierung von Divs, sprunghaftes verhalten

[BIG]

Hatte eine Idee..
Die gilt es umzusetzen
Seit ca. 14 Stunden tüftle und verzweifle ich. Google und co bemüht.
CSS nochmal z-index eingelesen, paddings und margins berechnet..
Denkanstösse aus dem Netz umgesetzt, hat die sache meist nur noch verschlimmert.

Idee ist folgende:
Ein Box muss her, um Downloads anzubieten und anzupreisen.
Eine feste Vorstellung davon ist in meinem Kopf, die auch zu 99% umgesetzt ist. Jedoch fehlt der 1% zur perfektion.
Also ein Div her mit Rahmen, schaut edel aus mit schlagschatten.
Dieses Div nennen wir : vorlagenbox
In dieses Div packen wir noch ein Div das als Button zur vorschau dienen soll.
Daneben ein Bild damit man gleich am ersten Blick sieht was vor dem Klick auf "Vorschau" passieren könnte.
Neben diesem Bild noch ein Button, den nennen wir selbst erklärender weise "Download".
Diese zwei Buttons, so fix in meinem Kopf verankert, sollen aufrecht stehen. Liegende buttons kann ja jeder (nun ich kann auch keine fehlerfreien gedrehten )
Unter dieser Box, soll noch ein Div liegen das die bisherigen Downloads anzeigt.

Schaut dann so aus : http://www.pixelmania.at/pix2/boxmodel/

Problem: wenn man auf Download fährt, hüpft das unten liegende Div ein paar pixel nach oben.
Was wiederrum damit zusammen hängen muss das der Download button grösser wird beim hovern, obwohl die selben grössenangaben wie beim "normalen" zustand.
Auch hier hab ich schon mit grössenangaben gespielt, macht es nur noch schlechter..

Bisher probiert:
Paddings und margins anpassen (ändert nur die buttongrösse, behebt aber nicht das problem im gegenteil verursacht mehrere darstellungsfehler da er nicht mehr abschliesst mit der restlichen box)
Div anderswo platzieren im Html Quelltext, also Childs vererbung in allen variationen ausprobiert, kein Effekt, ausser wieder: es hat es noch mehr zerschossen. Daher denke ich das ich mit der jetzigen Lösung am nächsten dran bin, aber ich irgendwo einen kleinen denkfehler habe.
Achja, natürlich soll diese box floaten, da viele kommen sollen und keine fixe anzahl definiert wird.
Nächstes riesen problem:
Chrome, Opera und FF stellen es gleich dar, bis vielleicht auf winzige kleinigkeiten die man übersehen kann.
nur der IE schaffts wiedermal nicht. Die effekte sind zu umfangreich um sie hier zu beschreiben, bitte einfach selbst damit ansehen.
Und auch position: relative, absolut probiert in allen erdenklichen formen, entweder noch mehr zerrissen oder gar nicht gegangen, nicht mehr gefloatet, falsch gefloatet oder sonstwas...

Aufgrund der 267 relevanten Zeilen im CSS poste ich hier kein CSS.
Das ist zu finden unter: http://www.pixelmania.at/pix2/boxmodel/style.css
HTML:

<div id="vorlagenbox">
   <div class="vorschaubutton" onClick="window.open('vorlagen/holz','form','scrollbars=yes')">Vorschau</div>
<img class="vorschaubild" src="../vorlagenvorschau/holz.png" />
   <div class="downloadbutton" onclick="location.href='vorlagen/holz.zip';">Download</div>
   <div id="downloads">Downloads: 53245</div>
</div>

auf die ID(obwohls ja nur einmal vorkommen darf) hab ich zwischen meinen versuchen zurück gegriffen, um das z-index problem zu lösen das ich zwischen zeitlich versucht hatte zu lösen.
Eigentlich sollte diese "Downloadzahl leiste" unter dem Vorlagenbox div liegen.
Was auch nicht ging.... schon gar nicht mit einer klasse.

der Stand vom CSS und html ist der letzte, die ganzen zwischenversuche von mittlerweile 17 stunden lösung suchen, hier zu posten würde wohl den rahmen sprengen

ich denke viel mehr das ich einen groben denkfehler in der idee habe und hoffe hier auf anregungen.

Wie soll der endeffekt aussehen?
die Box wie sie jetzt ist.
Von Links nach Rechts:
"Vorschaubutton hochkant" "Vorschaubild" "Downloadbutton hochkant"
"Schlagschatten über der Downloadleiste" (also box sollte über der Leiste liegen, wie ohne ID und z index?)
"Downloadleiste".

Fällt hier jemanden eine Lösung ein die in allen browsern funkt, auf css3 basiert und natürlich die box so darstellt wie sie jetzt ist, ohne diesen "Sprungbug" und dem IE problem?
Ich schliesse nicht aus, dass mein Denkansatz für die gesamte komplett falsch ist, dann bitte auch eine kurze erklärung wie der Aufbau besser zu realisieren wäre
3 divs einzeln nebeneinander sodas die drei bereiche, vorschau, bild, download aneinander gestückelt werden und das vierte div unten dran kleben?

EDIT: Beim hover ist derzeit mit absicht ein pixel weniger, da dass Div unten ansonsten nicht abschliessen würde. Ein problem das gelöst wäre, würde es unter dem vorlagen div liegen, wie angedacht eigentlich

Danke,
lg rainer

[BIG]

Sry, für Doppelpost.
Glaube ich hab das Problem gelöst.
1; Falscher Doctype, mit strict xhtml1.1 scheint das nicht so ganz zu gehen.
2; neuer Doctype, xhtml1.0 transitional, dann hats mal einiges zerschossen, aber welch wunder, so zerschossen das es mit den unterschiedlichen grössenangaben die ich mühevoll mit dem falschen doctype irgendwie so hingebogen habe wiederrum sinn ergeben hat.
die gesamten grössenangaben neu gemacht, nun sind auch beide button zustände gleich gross und siehe da, es geht alles