Hallo!
Habe zwei Probleme mit der Darstellung meiner Homepage im IE6! Im firefox funktioniert alles so wie ich es mir vorstelle, nur der IE spinnt ein wenig...
Der Content-div erstreckt sich im IE über die gesamt breite des Bodys, soll aber wie im FF zwischen den beiden sidebars sein...
die beiden Bilder (unten) sind im IE genau mittig, sollen aber so wie im FF angezeigt werden.
Der Footer enthält noch einen div Namens footer-inside, und an disem sind die beiden Bilder mit position:absolute angeheftet...FF interpretiert das richtrig nur der IE nicht.
Hier ist mein CSS:
body {
font-family: Verdana;
font-size: 62.5%;
text-align: center;
background-color: #101010;
color: #000;
padding: 0;
margin: 10 10 10 10;
}
#page {
width: 900px;
background-color: black;
border-width: 1px;
border-style: solid;
border-color: gray;
margin: 10px auto;
}
#rsidebar {
padding: 0;
border: none;
margin: 0;
width: 165px;
float: right;
overflow: auto;
}
#rsidebar-inside ul {
border-width: 1px;
border-style: solid;
border-color: gray;
background-color: #101010;
list-style: none;
padding: 5px;
margin: 10px;
text-align: left;
}
#rsidebar-inside ul ul {
border: none
}
#rsidebar-platzhalter {
padding: 0;
margin: 0;
height: 512px;
}
#content {
background-color: black;
padding: 0;
border: none;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
overflow: auto;
}
#content-inside {
background-color: #101010;
padding: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: gray;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
margin: 10px 0 0 0;
}
#lsidebar {
padding: 0;
border: none;
margin: 0;
width: 165px;
float: left;
overflow: auto;
}
#lsidebar-inside ul {
border-width: 1px;
border-style: solid;
border-color: gray;
background-color: #101010;
list-style: none;
padding: 5px;
margin: 10px;
text-align: left;
}
#lsidebar-inside ul ul {
border: none
}
#lsidebar-platzhalter {
padding: 0;
margin: 0;
height: 512px;
}
#header {
background-color: black;
padding: 0;
border: none;
margin: 0;
width: 100%;
heigth: 150px;
overflow: auto;
}
#header-inside {
background-color: black;
padding: 0;
border: none;
margin: 0;
color: #FF0000;
}
#footer {
background-color: black;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: gray;
margin: 10px;
height: 20px;
clear: both;
overflow: auto;
}
#footer-inside {
background-color: black;
color: white;
position: absolute;
padding: 0;
border: none;
margin: 0;
}
#lsidebar-pic {
background-image: url(boarder_l.jpg);
position: absolute;
bottom: 3px;
left: 0px;
padding: 0;
margin-bottom: 10px;
width: 138px;
height: 512px;
}
#rsidebar-pic {
background-image: url(boarder_r.jpg);
position: absolute;
bottom: 3px;
left: 742px;
padding: 0;
margin-bottom: 10px;
width: 138px;
height: 512px;
}
#thumbs {
padding 0;
border: none;
margin: 0 auto;
}
#wp-calendar {
font-size: 90%;
word-spacing: 0px;
display: inline-table;
border-collapse: collapse;
width: 130px;
margin: 0px auto;
text-align: center;
color: #CCCCCC;
}
/* Classes */
h1, h2, h3 {
font-family: Garamond, 'Copperplate Gothic Light', Georgia, 'Times New Roman', Serif;
font-weight: bold;
}
h1 {
font-size: 3.5em;
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
color: #993300;
}
h2 {
font-size: 1.6em;
color: #FF0000;
}
h3 {
font-size: 1.3em;
color: #E4D3A6;
}
p {
font-size: 1.2em;
text-align: justify;
}
.entry img {
margin-left: 5px;
margin-right: 5px;
}
.entry p.meta a {
font-size: 1em;
}
.entry p a {
font-size: 1em;
}
.entry a {
font-size: 1.5em;
}
#header-inside a {
color: #FF0000;
}
a {
color: #FF6600;
text-decoration: none;
}
p {
color: #cccccc;
}
.entry {
text-align: left;
color: #cccccc;
padding-top: 5px;
}
#lsidebar-inside ul ul li:before {
content: "\00BB \0020";
color: white;
}
.thumbs img {
position:relative;
padding-top: 5px;
margin:0;
}
.thumbs img:hover{
background: url(images/flash.gif); /* Delete this line to remove the blinkingblue frame around the thumbnails */
}
und hier ist meine index.php:
https://www.forum-hilfe.de/www.erdeanthom…omas/index.phps
Hoffe mir kann da jemand helfen!