[HTML][CSS]Rozwalona strona w IE8 Opcje

[smietek]

Czy mógłby ktoś mi powiedzieć, dlaczego poniższy kod rozwala stronę na IE8 (prócz tego, że IE to nasienie szatana i zmora webdesignerów) oraz jak to naprawić?
Na wszystkich innych przeglądarkach strona działa perfekcyjnie, a na IE "Główna część strony" jest poniżej "Bocznego menu", chociaż powinno być na równi z nim.

[HTML] pobierz, plaintext 
<div id="topMenu" style="position: fixed; top: 0px; left: 0px; width: 100%; z-index: 100;">Jakieś dane</div>
        <div id="topMenu_placeHolder" style="position: relative; top: 0px; left: 0px; width: 100%; visibility: hidden;">Jakieś dane</div>
        <div id="gameZone" style="position: relative; left: 0px;">
            <div id="leftMenu" style="position: fixed; left: 0px; width: 12%; z-index: 100;" class="style">Boczne menu</div>
            <div id="leftMenu" style="position: relative; left: 0px; width: 12%; float: left; visibility: hidden;">&nbsp;</div>
            <div id="gameContent" style="float: left; width: 88%;">
                <center>
                    Główna część strony
                </center>
            </div>
        </div>
[HTML] pobierz, plaintext 

[Damonsson]

Po pierwsze może IE bardzo nie lubi, złej rzeczy jaką jest kilka takich samych #ID. Nie wiem o co chodzi z tą pomyłką, może po prostu zmień to?
Po drugie nie jestem wróżką i jestem leniwy, nie chcę mi się sprawdzać jak to wygląda w praktyce, więc miło byłoby gdybyś wstawił gdzieś przykład
Po trzecie skoro coś jest poniżej, to znaczy iż pewnie jest za szerokie, albo IE to tak interpretuje.


Tak:

[HTML] pobierz, plaintext 
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
[HTML] pobierz, plaintext