[gelöst] CSS-Probleme sowohl im Firefox und noch stärker im Internet Explorer
Ich hänge seit Tagen an einem Problem fest und komme nicht weiter, weil ich so langsam an meine Grenzen stoße und vor allem vermutlich auch den Wald vor lauter Bäumen nicht mehr sehe. Natürlich wird es ähnliche Fragen auch schon gegeben haben, aber ich finde leider nichts (habe natürlich gesucht vorher), was mir hätte weiterhelfen können.
Dieses Theme möchte ich gerne als Grundlage verwenden für ein ehrenamtliches Projekt, das relauncht werden soll (unter Beibehaltung der Farben). Jetzt komme ich aber sowohl mit FF, als auch (noch schlimmer natürlich :? ) mit dem IE ins Schleudern und keinen Schritt weiter. Vielleicht ist es auch nur eine kleine Zeile oder geringfügige Dinge, die ich beachten muss, aber - wie gesagt - ich komme nicht drauf.
Der Fehler im FF: Mache ich den Bildschirmausschnitt schmaler, springt der mittlere (content-)Bereich nach unten (unter die Sidebars).
Der Fehler im IE: Wie man sieht, sieht man erstmal außer der Hintergrundfarbe nix :shock: . Man muss erstmal scrollen, um zum Inhalt zu gelangen.
Meine Testinstallation findet sich hier, und das wäre die CSS, in der ich der Kasus Knacksus vermute:
Code
body{
background-image: url(images/bg.jpg);
margin: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5C5C5C;
text-align: center;
}
#header{
width: 98%;
margin:0px;
height: 100%; /* 50px; */
background-color: #f5f5dc; /* #99CBFC; */
border-bottom: 1px solid #f5f5dc; /* #FFFFFF; */
text-align: left;
padding-left: 20px;
padding-top: 10px;
}
#container{
margin-top: 20px;
width: 98%;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#container2{
background-color: #f5f5dc; /* White; */
border-left: 1px solid #0303fc; /* #99CBFC; */
border-right: 1px solid #0303fc; /* #99CBFC; */
border-bottom: 1px solid #0303fc; /* #99CBFC; */
border-top: 1px solid #0303fc;
}
#contentleft{
float: left;
position: relative;
width: 200px;
font-size: 11px;
padding: 5px;
}
#contentright{
float: right;
position: relative;
width: 200px;
font-size: 11px;
padding: 5px;
}
#content{
margin-left: 210px;
margin-right: 210px;
font-size: 12px;
position: relative;
}
#content img
{
border: 0;
}
#content div.post img.thumb, #content div.post img.links {
float: left;
position: relative;
margin: 5px 10px 5px 0;
border: none;
}
html>body #content div.post img.thumb,
html>body #content div.post img.links {
position: static;
}
#content div.post img.thumb_r, #content div.post img.rechts {
float: right;
position: relative;
margin: 5px 5px 5px 10px;
border: none;
}
html>body #content div.post img.thumb_r,
html>body #content div.post img.rechts {
position: static;
}
#content div.post img.centered {
margin: 5px auto;
display: block;
}
#footer{
clear: both;
width: 98%;
margin-bottom: 0px;
text-align: center;
background-color: #f5f5dc; /* #0303fc; #99CBFC; */
border-top: 1px solid #f5f5dc; /* #FFFFFF; */
color: #f5f5dc; /* #FFFFFF; */
border-bottom: 1px solid #f5f5dc; /* #FFFFFF; */
font-size: 10px;
padding: 3px 0 3px 0;
}
.blogtitle, .blogtitle a:link,.blogtitle a:visited,.blogtitle a:hover {
margin-top: 0px;
font-weight: bold;
font-size: 26px;
line-height: 1.3em;
color: #ffe398; /* #fe0808; #EEEEEE; */
background: transparent;
border: 0;
text-decoration: none;
}
.blogdescription {
margin: 0 0 10px 0;
padding: 30px 20px 0px 20px;
font-size: 16px;
font-weight: bold;
text-align:left;
background: transparent;
color:#FFFFFF;
}
a:link, a:visited{
color: #0303fc; /* #389AB8; */
text-decoration: none;
}
a:hover{
color: #fe0808; /* #C0E2EB; */
text-decoration: none;
}
ul{
list-style: circle; /* disc; square; */
color: #1B4754;
padding-left: 12px;
margin-left: 5px;
}
h2{
font-weight: bold;
/* font-variant: small-caps; */
color: #0303fc; /* #909090; */
font-size: 11px;
}
h5{
font-weight: bold;
text-align: right;
font-variant: small-caps;
color: #909090;
font-size: 12px;
}
.pside{
font-weight: bold;
text-transform: none; /* lowercase; */
}
.boxSidebar{
padding: 5px 5px 10px 5px;
font-size: 11px;
background:transparent;
margin-bottom: 15px;
line-height: 16px;
border:1px solid #ffe398; /* #fe0808; dotted #CCCCCC; */
}
h2.sectiontitle, #comments, #postcomment, h3{
color: #0303fc; /* #96CEFF; */
font-weight: bold;
/* font-variant: small-caps; */
font-size: 12px;
border-bottom: 1px solid #ffe398; /* #96CEFF; */
margin-bottom: 10px;
}
.titolopost{
color: #0303fc; /* #96CEFF; */
font-weight: bold;
/* font-variant: small-caps; */
font-size: 14px;
border-bottom: 1px solid #ffe398; /* #fe0808; #96CEFF; */
margin-bottom: 10px;
padding-top: 5px;
}
.postmetadata{
font-size: 11px;
color: #0303fc; /* #99CBFC; */
}
.singolocommento{
/* border-bottom: 1px solid #ffe398; #fe0808; #CCCCCC; */
color: #000; /* #A9A9A9; */
padding: 5px;
background-color: #fffff0; /* #EDEDED; */
margin: 5px;
}
blockquote{
background-color: #fffff0; /* #F0F0F0; */
color: #389AB8;
border: 1px solid #ffe398; /* #fe0808; #CCCCCC; */
font-size: 12px;
padding:5px;
}
input,select{
background-color:#FFFFFF;
border: 1px solid #ffe398; /* #fe0808; #CCCCCC; */
padding: 2px;
color: #666666;
font-size: 11px;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 2px;
}
textarea{
background-color:#FFFFFF;
border: 1px solid #ffe398; */ #fe0808; #CCCCCC; */
padding: 2px;
color: #666666;
font-size: 11px;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 2px;
width: 98%;
}
.navigation{
text-align: center;
display: inline;
padding-bottom: 20px;
}
td,th{
font-size: 11px;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#A9A9A9;
}
#wp-calendar{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
width: 190px;
}
#wp-calendar #today{
background-color: #0303fc; /* #99CBFC; */
color: #FFFFFF;
font-weight: bold;
}
caption{
color: #ADD8E6;
font-weight: bold;
letter-spacing: 3px;
margin-bottom: 2px;
}
.titolobox2{
background-color: #DAEDF3;
color: #6DB5FB;
text-align: left;
letter-spacing: 2px;
text-transform: none; /* lowercase; */
margin-bottom: 5px;
padding-left: 3px;
}
.titolobox3{
background-color: #f5f5dc; /* #fe0808; #DAEDF3; */
color: #fe0808; /* #6DB5FB; */
text-align: left;
letter-spacing: 1px;
text-transform: none; /* lowercase; */
margin-bottom: 1px; /* 5px; */
padding-left: 2px;
font-size: 12px;
font-weight: bold;
}
/* menu ________________ */
#navlist{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #0303fc; /* #99CBFC; */
font: bold 12px Verdana, sans-serif;
margin-bottom: 0px;
}
#navlist li{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #0303fc; /* #99CBFC; */
border-bottom: none;
background: #f5f5dc; /* #FFFFFF; */
color: #0303fc; /* #99CBFC; */
text-decoration: none;
}
#navlist li a:link { color: #0303fc; /* #99CBFC; */ }
#navlist li a:visited { color: #0303fc; /* #99CBFC; */ }
#navlist li a:hover{
color: #FFFFFF;
background-color: #fe0808; /* #0303fc; #f5f5dc; #AFD6FD; */
border-bottom: 1px solid #0303fc; /* #FFFFFF; */
border-left: 1px solid #0303fc; /* #99CBFC; */
border-right: 1px solid #0303fc; /* #99CBFC; */
border-top: 1px solid #0303fc; /* #99CBFC; */
}Hat vielleicht jemand eine Idee, was ich falsch gemacht habe oder wo ich noch nachbessern müsste? Ihr seht ja, dass ich schon an der Optik geschraubt und die originalen Angaben auskommentiert habe.
Es würde mich freuen, wenn mir jemand helfen könnte mit einer zündenden Idee. :razz: