nicht angemeldet
Ich mache gerade meinen ersten Gehversuche in css. Als Test habe ich eine zentrierte graue Box mit Rahmen erstellt (box1), innerhalb der am linken unteren Ende Navigationsbuttons (box2) angezeigt werden sollen.
Schon beim ersten Button sieht es im FF so aus, wie es aussehen soll, beim Blick in den IE schließt der Button (box2) leider nicht mit dem unteren Teil der grauen Box ab sondern überlappt...
Ich verstehe das Ganze leider nicht, denn sowohl die 1. als auch die 2. Box haben feste Positionsangaben für die Höhe und auch feste Höhenangaben.
Was kann ich tun?
Hier der css-Teil:
.box1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
background-color: #999;
height: 100px;
width: 700px;
border: 1px solid #666;
position: absolute;
left: 50%;
top: 25px;
right: auto;
font-weight: lighter;
padding: 4px;
float: none;
clear: none;
margin-left: -350px;
}
.box2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
background-color: #637BCF;
height: 12px;
width: auto;
border: 1px solid #365A96;
position: absolute;
left: 50%;
top: 125px;
right: auto;
font-weight: lighter;
padding: 4px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -350px;
}
Das html-Gerüst sieht so aus:
<body>
<p class="box1">Test 1</p>
<span class="box2">Startseite</span>
</body>
apsel