IE 6 zeigt Div-Container nicht richtig an

[c3ntry]

Hallo,

ich bin noch n ziemlicher HTML/CSS etc. Anfänger. Zur Zeit versuche ich mich an einer eigenen Website. Leider gibt es da ein Problem:

In Chrome (Version 29.0.1547.57) wird meine "Linkbox" bzw. Die Div-Container in dieser so angezeigt wie ich das gerne hätte (Bild). In IE 6 (IE Tester) allerdings gibt es keinen Abstand (oben bzw unten) zwischen den Divs. Ich weiß nicht woran das liegt, hab auch schon ein bisschen gegooglet aber nichts gefunden. Wie gesagt bin noch relativer Anfänger.:)

Code CSS:

a:link    {
        color:white;
        text-decoration:none;
        text-underline: none;}
    a:visited {
        color:white;
        text-decoration:none;
        text-underline: none;
            }
    a:hover  {
        color:black;
        text-decoration:none;
        text-underline: none;
        }
    a:active  {
        color:white;
        text-decoration:none;
        text-underline: none;
        }

       
#LinkBox    {
    background-color: green;
    width: 200px;
    height: 650px;
    position: absolute;
    top: 220px;
    left: 30px;
        }
#ButtonHome    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
    margin-top: 15px;
        }
#Button2    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
    margin-top: 15px;
        }
#Button3    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
    margin-top: 15px;
        }
#Button4    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
        }
#Button5    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
        }       
#Button6    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
        }       
#Button7    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
        }   
#Button8    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
        }       
#Button9    {
    background-color: darkgreen;
    width: 180px;
    height: 50px;
    position: absoulute;
    z-index: 1;
    margin: 0px auto;
    text-align: center;
    line-height: 50px;
        }

Code HTML:

<div id="LinkBox">
            <a href="linktest.html">
                <div id="ButtonHome">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html" >
                <div id="Button2">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button3">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button4">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button5">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button6">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button7">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button8">
                    <h2 border="2">Home</h2>
                </div>
            </a>
            <a href="linktest.html">
                <div id="Button9">
                    <h2 border="2">Home</h2>
                </div>
            </a>
</div>

Bild:


Über Hilfe würde ich mich Freuen:)

MfG c3ntry

 

[Tronjer]

Es gibt weder position:absoulute noch ein ein border: 2 für <h>-Elemente, und auch ein position: absolute sollte man tunlichst vermeiden. Falls die Darstellungsprobleme lediglich im IE6 auftreten, beruhige dich. Windows 98 ist unseren Breitengraden kaum noch vertreten.

Trotzdem solltest du dich lieber mit aktuellen Tutorials befassen, anstatt Dinge zu lernen, die heute nicht mehr verwendet werden.

 

[Cheffchen]

hallö,

ie6 :-) .
das hat nichts mit unsere breitengrade zu tun, selbst Südamerika zählt der nicht mehr.

wichtiger ist aber, das soll wohl ein Menü werden, dann mach es als Menü mit li Liste wie sich das gehort.

cheffchen