nicht angemeldet
Hallo Forengemeinde,
Ich habe eine Webseite (nur index-Seite) in HTML geschreiben, sämtliche Formatierungen liegen in CSS.
In Firefox, Safari und Opera, sowie in IE7 wird mir die Seite korrekt angezeigt.
In IE6 verhaut mir der Browser allerdings meine DIV-Container.
Da die Zielgruppe dieser Seite allerdings häufig noch IE6 verwendet, bleibt mir nichts anderes übrig, als sie auch hierfür zu optimieren.
Siehe:
Lorem ipsum
Quelltext ist über Browser abrufbar, deshalb wird er hier nicht angefügt.
Hat jemand eine Idee, wie ich dieses Problem beheben kann? Wir rätseln schon seit Tagen mit 4 Personen hier rum und finden leider die Lösung nicht.
Für eure Hilfe bin ich jetzt schon sehr dankbar.
Gruß Kacy
Die CSS dafür ist:
body {
background: #FFFFFF;
color: #000000;
font-family:Verdana, Helvetica, sans-serif;
font-size: 101%;
}
a { font-family: Verdana, Helvetica, sans-serif; color: #335785; text-decoration: none; }
a:hover { color: #9E834C; text-decoration: none; }
a:active { text-decoration: underline; }
h2 {
margin:0 0 5px 0;
padding:0;
border:0;
color:#9E834C;
font-size:1.4em;
font-weight:lighter;
}
h3 {
margin:15px 0 5px 0;
padding:0;
border:0;
color:#000000;
font-size:1em;
font-weight:lighter;
}
/* h4 und h5 nur im News-Kasten!!! */
h4 {
margin:0px 0 7px 0;
color:#9E834C;
font-size:1.2em;
font-weight:600;
}
h5 {
margin:0px 0 4px 0;
color:#335785;
font-size:1.0em;
font-weight:600;
}
p {
display:block;
margin:0;
padding:5px 0;
border:0;
}
em { color:#000000; font-weight:600; font-style:normal; }
strong { color:#000000; font-weight:bold; font-style:normal; }
/*zitieren
cite {
padding:0 5px;
border-left:5px solid #7490B8;
background-color: #C2D3EE;
font-size:1em;
}
/* Horizontallinie
hr {
margin:15px 0 25px 0;
width:100%;
height:5px;
border:1px solid #86B637;
border-left:0 none;
border-right:0 none;
color:#E5E5E5;
background-color:#E5E5E5;
}
*/
html, body{
margin:0;
padding:0;
text-align:center;
}
#pagewidth{
width:960px;
text-align:left;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-width:1px;
border-color:#335785;
}
#header{
position:relative;
height:145px;
width:100%;
}
#header #headimage {
margin:0;
padding:0;
border:0;
width:210px;
height:145px;
float:left;
background-color:#7490B8;
}
#header #headbanner {
margin:0;
padding:0;
border:0;
width:539px;
height:145px;
float:left;
background:url(headimage.gif) no-repeat;
border-left:1px solid #335785;
/*border-right:1px solid #335785;*/
}
#header #headbanner h1{
display:none;
}
#header #logo {
margin:0;
margin-right:1px;
padding:0;
border:0;
width:209px;
height:145px;
float:left;
background-color: #FFFFFF;
background-position: left;
}
#header #logo img{
padding:0;
border:0;
}
#leftcol{
margin:0:
padding:0;
border:0;
width:210px;
float:left;
position:relative;
}
#leftcol div.emptyspace{
height:20px;
width:210px;
background-color:#335785;
display:block;
}
/* NAVIGATION .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/
#navigation {
margin:0;
padding:0;
border:0;
width: 210px;
list-style: none;
font-size:0.85em;
}
#navigation a {
display: block;
margin:0;
padding-top:8px;
padding-left:50px;
border:0;
width: 160px;
height:25px;
background: url(punkthellblau.gif) repeat-y;
border-bottom: 1px solid #335785;
border-right: 1px solid #335785;
font-size:0.9em;
}
#navigation a:link, #navigation a:visited {
color: #335785;
text-decoration: none;
}
#navigation a.active {
background: url(punkt.gif) repeat-y;
color: #335785;
}
#navigation a:hover {
background: url(punktbeige.gif) repeat-y;
color: #335785;
}
#twocols{
width:750px;
float:left;
position:relative;
border-right:solid;
border-color:#335785;
border-width:1px;
}
/* RIGHT COLLUM .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/
#rightcol{
width:209px;
float:left;
position:relative;
background-color:#FFFFFF;
}
#news{
height:19px;
background-color:#335785;
display:block;
list-style:none;
color:#FFFFFF;
font-size:0.8em;
padding-left:10px;
padding-top:1px;
}
#newsinhalt{
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-size:0.6em;
border-bottom: solid 1px #335785;
}
#newsinhalt2{
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-size:0.6em;
border-bottom: solid 1px #335785;
}
#kontakt{
width:208px;
height: 73px;
border-bottom: 1px solid #335785;
}
#kontaktbild{
width:208px;
height:69;
border-right:1px solid #335785;
border-bottom:1px solid white;
border-left:1px solid white;
border-top:1px solid white;
}
#kontakt a {
display: block;
margin:0;
width: 200px;
height:70px;
}
#kontakt a.active, #kontakt a:link, #kontakt a:visited #kontakt a:hover {
color:#FFFFFF;
text-decoration: none;
}
/*CONTENT .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/
#maincol{
margin:0;
padding:0;
float: left;
display:inline;
position: relative;
width:540px;
}
#maincol #content {
padding:25px 25px;
float:none;
border-left:1px solid #335785;
width:490px;
font-size:0.7em;
}
/* SUBNAVIGATION -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-*/
div#subnavigation {
margin:0;
padding:0;
border:0;
border-left:1px solid #7490B8;
border-right: 1px solid #7490B8;
height:20px;
width:539px;
display:block;
background-color:#335785;
}
#subnavigation ul li {
display: inline;
}
#subnavigation ul {
margin:0;
padding:0;
font-size:.65em;
}
#subnavigation ul li a {
height:17px;
padding: 3px 12px 0 12px;
color: #C3D3EE;
text-decoration: none;
float: left;
border-right: 1px solid #7490B8;
}
#subnavigation ul li a:hover, #subnavigation ul li a:active, #subnavigation ul li a.active {
color: #FFFFFF;
text-decoration: none;
text-align: left;
}
#footer {
width:960px;
font-size:0.6em;
text-align:center;
border-top:solid;
border-width:1px;
border-color:#335785;
}
#twocols:after, #wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#twocols, #wrapper{display: inline-table;}
* html #twocols, * html #wrapper{height: 1%;}
#twocols, #wrapper{display: block;}
Gernot Back