nicht angemeldet
Hallo,
ich verzweifel gerade mal wieder an einem css-Layout.
Im Grunde sind es zwei Spalten, die jeweils 50% der Breite einnehmen nebeneinander. Mozilla stellt die Spalten auch nebeneinander da. Beim IE ist die eine Spalte 50%, die andere 100% (das macht aber nichts, weil sie im Hintergrund liegt und der Textanfang korrekterweise in der Bildschirmmitte (=50%) liegt.
ABER während Mozilla die beiden Inhalte direkt aneinander legt, macht der IE dazwischen eine Lücke von 3px. in einfaches verschieben mit left-3px bringt nichts, weil dann die Schrift im Mozilla zu weit links steht. Weiß einer woran das liegen könnte?
Die entsprechende Stelle im Quelltext
<div id=spruch></div>
<div id=box1>
<div id=box2>
<div id="container1">Spalte1</div>
<div id="container2">Spalte2</div>
</div>
</div>
und die css-Datei
#box1 /* erstmal holen wir das ganze Fenster, dann zerschneiden wir es */
{
background:blue;
position:absolute;
top:30px;
left:0px;
width:100%;
height:100%;
z-index:1
}
#box2 /* hier kommen nun die zwei Spalten rein, links bleibt Platz für den Spruch*/
{
background:transparent;
position:relative;
overflow:hidden;
top:0px;
margin-left:65px;
width:auto;
height:auto;
z-index:2;
align:left;
border:0px
}
#container1 /* Spalte1 */
{
position: relative;
z-index:3;
float:left;
width:50%;
height:200px;
vertical-align:top;
background:transparent;
margin:0px;
left:0px;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white
}
#container2 /* Spalte2 */
{
position: relative;
z-index:3;
width:100%;
vertical-align:top;
align:left;
height:200px;
background:transparent;
border-top:2px solid white;
border-bottom:2px solid white
}
#spruch /* der Spruch steht links an der seite */
{
background:transparent;
position:absolute;
overflow:hidden;
top:30px;
left:0px;
height:400px;
width:70px;
z-index:2;
border-top:2px solid white
}