nicht angemeldet
Ich bin inzwischen echt am verzweifeln!
Ich habe ein Layout mit Divs gestaltet. Die linke Navigation floatet den Content und der Content floatet die rechte Navi. Soweit so gut. Im FF sieht alles wunderbar aus. Im IE7 habe ich es auch annährend ähnlich hinbekommen. Auf jeden Fall gibt es auch dort keine gravierenden Anzeigefehler.
Dann schau ich mir die Seite im IE6 an und muss feststellen, dass dort nichts an seinem Platz ist.
Nach dem ersten Laden der Seite ist alles ein Stück nach links verschoben. Sobald man über einen Link fährt, springt alles an seinen Platz. Mit ausnahme der rechten Navigation. Die fängt erst unter dem Content an.
Das zur Verschiebung.
Dann gibt es noch das Problem, dass der IE6 die Hintergrundbilder von h2 und navi-links nicht lädt (mit einer Ausnahme) und dass er border-bottom die meiste Zeit auch ignoriert.
Ich weiß nicht mehr weiter. Und ich versteh nicht, wonach der geht.
Ich habe mal 3 Screenshots gemacht, wie es derzeit bei mir ausschaut...:
http://www.5hearts.de/screens/ie6-1.jpg (--> Direkt nach dem Laden der Seite)
http://www.5hearts.de/screens/ie6-2.jpg (--> Content ist an den richtigen Platz gesprungen, nach dem man über einen Link gefahren ist)
http://www.5hearts.de/screens/ie6-3.jpg (--> Die rechte Navigation, die erst unter dem Content anfängt. Und die mehrere h2's hat, von denen aber nur eine richtig dargestellt wird...)
So, jetzt noch der Code, der nur für den IE6 ist... Ich arbeite mit Conditional Comments.
body {
background: #000000;
margin:0;
color:#000000;
font-family:Arial, "Sans Serif";
}
/* --------------------- STRUKTUR 1 --------------------- */
#box {
z-index:0;
width: 900px;
background-image: URL(img/strip.jpg);
background-repeat: repeat-y;
padding: 0px;
margin: 0px auto 0px auto;
}
#header {
z-index:1;
margin:0px;
border:0px;
background: URL(img/header.jpg);
}
/* --------------------- NAVIGATION1 --------------------- */
.lnavi {
float:left;
position:relative;
z-index:2;
margin-top:40px;
margin-left:10px;
width:148px;
text-align:justify;
color:#000000;
font-size:10px;
}
.lnavi h2 {
display:block;
background-image: url('img/navi-bg-145.jpg');
color:#FFFFFF;
font-family:Georgia;
font-style:italic;
font-size:24px;
line-height:50px;
letter-spacing:-1px;
padding-left:15px;
margin-top:30px;
margin-bottom:1px;
border:0;
}
.lnavi ul {
list-style:none;
margin-left:0px;
}
.lnavi li {
line-height:100%;
margin:0;
}
.lnavi ul li a:link, .lnavi ul li a:visited, .lnavi ul li a:active {
display:block;
font-variant: normal;
text-align:left;
padding-left:18px;
background-image: url('/img/logo-mini.jpg');
background-repeat:no-repeat;
background-position:top left;
font-family:Tahoma;
color:#cc525d;
font-size:12px;
font-weight:normal;
letter-spacing:0px;
line-height:130%;
border-bottom:1px solid #eaeaea;
}
.lnavi ul li a:hover {
display:block;
font-variant: normal;
text-align:left;
padding-left:18px;
background: url('/img/logo-mini-hover.jpg') no-repeat left;
font-family:Tahoma;
color:#b40212;
font-size:12px;
font-weight:normal;
letter-spacing:0px;
line-height:130%;
border-bottom:1px solid #d4d3d1;
}
/* --------------------- STRUKTUR 2 --------------------- */
#content {
float:left;
position:relative;
z-index:2;
margin-top:40px;
margin-left:11px;
padding:3px;
width:487px;
background-color:transparent;
font-size:11px;
line-height:150%;
text-align:justify;
color: #000000;
border:0px;
}
/* --------------------- NAVIGATION2 --------------------- */
.rnavi {
position:relative;
z-index:2;
margin-top:40px;
margin-left:685px;
width:200px;
text-align:justify;
color:#000000;
font-size:10px;
line-height:110%;
}
.rnavi li h2 {
background:URL(img/navi-bg-195.jpg) no-repeat left;
color:#FFFFFF;
font-family:Georgia;
font-style:italic;
font-size:24px;
line-height:50px;
letter-spacing:-1px;
padding-left:15px;
margin-top:30px;
margin-bottom:1px;
border:0;
}
.rnavi ul {
list-style:none;
margin-left:0px;
}
.rnavi li {
line-height:110%;
margin:0;
}
.rnavi li A, .rnavi li A:visited, .rnavi li A:active {
display:block;
font-variant: normal;
text-align:left;
padding-left:8px;
background-color:transparent;
font-family:Tahoma;
color:#cc525d;
font-size:12px;
font-weight:normal;
letter-spacing:0px;
line-height:180%;
border-bottom:1px solid #eaeaea;
}
.rnavi li A:hover {
display:block;
font-variant: normal;
text-align:left;
padding-left:8px;
background-color:transparent;
font-family:Tahoma;
color:#b40212;
font-size:12px;
font-weight:normal;
letter-spacing:0px;
line-height:180%;
border-bottom:1px solid #d4d3d1;
}
.rnavi ul .recent {
list-style:none;
width:180px;
margin-left:1px;
line-height:110%;
text-align:left;
}
.rnavi ul .recent A {
display:inline;
background:transparent;
font-variant:normal;
padding:0;
color:#cc525d;
font-size:12px;
line-height:100%;
letter-spacing:0px;
border:0;
}
.rnavi ul .recent A:visited {
display:inline;
background:transparent;
font-variant:normal;
padding:0;
color:#cc525d;
font-size:12px;
line-height:100%;
letter-spacing:0px;
border:0;
}
.rnavi ul .recent A:hover {
display:inline;
background:transparent;
font-variant:normal;
padding:0;
color:#b40212;
font-size:12px;
line-height:100%;
letter-spacing:0px;
border:0;
}
/* --------------------- STRUKTUR 3 --------------------- */
#footer {
clear:both;
border:0px;
margin:0px;
background: URL(img/footer.jpg) no-repeat left;
color:#000000;
font-size:11px;
height:70px;
}
.footbla {
color:#a49f9f;
font-size:11px;
padding-top:15px;
margin-left:190px;
}
.footbla2 {
color:#a49f9f;
font-size:11px;
margin-top:-12px;
margin-left:190px;
}
Ich habe jetzt schon ziemlich viel an dem Code herumgespielt, aber im Grunde sollte er so aussehen. Ich habe nur die Inhalt-spezifischen Sachen weggelassen, weil die erst mal nicht von Relevanz sind...
Live betrachten kann man sich die Seite hier: http://www.5hearts.de
Ich wäre echt dankbar, wenn jmd. eine Lösung für mein Problem hat. =/