Hallo zusammen,
im Firefox und Opera wird mein angepasstes Kubrick-Theme richtig dargestellt. Beim Internet Explorer hingegen fällt alles auseinander.
So sieht das ganze momentan aus: http://195.176.254.164/da/blog/
Die Sidebar rutscht nach unten,
der Header wird horizontal auseinander gerissen
und die Gesamtbreite ist zu gross.
Da ich vor diesem Layout noch nicht mit CSS gearbeitet habe, bin ich froh um jeden Hinweis, woher diese Fehler kommen könnten.
Hier hab ich mal einen Auszug aus dem header.php:
PHP
</style>
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div id="header_lo">
<img src="wp-content/themes/da/images/header_bg_lo.gif" border="0" alt="DA">
</div>
<div id="header_mo">
<img src="wp-content/themes/da/images/header_bg_mo.jpg" border="0" alt="asdf" usemap="#header_bg_mo">
<map name="header_bg_mo">
<area shape="rect" coords="0,10,191,33" href="http://195.176.254.164/da/wiki/pmwiki.phpda" alt="asdf" title="asdf">
<area shape="rect" coords="572,3,742,33" href="http://195.176.254.164/da/wiki/pmwiki.phpmo" alt="asdf" title="asdf">
</map>
</div>
<div id="header_ro">
<img src="wp-content/themes/da/images/header_bg_ro.gif" border="0" alt="DA" usemap="#header_bg_ro">
<map name="header_bg_ro">
<area shape="circle" coords="0,33,29" href="http://195.176.254.164/da/wiki/pmwiki.phpro" alt="asdf" title="asdf">
</map>
</div>
<div id="header_unten">
<img src="wp-content/themes/da/images/header_bg_u_mit_navi.jpg" border="0" alt="asdf" usemap="#header_bg_u">
<map name="header_bg_u">
<area shape="rect" coords="0,0,191,5" href="http://195.176.254.164/da/wiki/pmwiki.phpda" alt="asdf" title="asdf">
<area shape="rect" coords="604,0,800,120" href="http://195.176.254.164/da/wiki/pmwiki.phpu" alt="asdf" title="asdf">
</map>
</div>
</div> <!-- /header -->
<div id="page">Und hier aus dem CSS-Stylesheet:
Code
/* Begin Structure */
body {
background-image: url("images/body_bg.png");
}
/* ------------------ 1. Container: Header ----------------- */
#header {
margin-top: 10px; /* Abstand zum oberen Bildschirmrand */
margin-right: auto; /* Damit der Header mittig zentriert wird */
margin-bottom: 0px; /* Abstand nach Header */
margin-left: auto; /* Damit der Header mittig zentriert wird */
padding: 0;
width: 806px;
height: 153px;
/*text-align: left;*/
}
#header_lo {
width: 32px;
height: 33px;
/*background-image: url("images/header_bg_lo.gif");*/
float: left;
}
#header_mo {
width: 742px;
height: 33px;
/*background-image: url("images/header_bg_mo.jpg");*/
float: left;
}
#header_ro {
width: 32px;
height: 33px;
/*background-image: url("images/header_bg_ro.gif");*/
float: left;
}
#header_unten {
clear: both;
width: 806px;
height: 120px;
/*background-image: url("images/header_bg_u.jpg");*/
}
#page {
background-color: white;
margin: 0px auto; /* oben und unten 0px, seitlich "auto", damit zentriert */
padding: 0px 0px 0px 0px;
width: 806px;
/*border: 1px solid #959596;*/
background: url("images/main_bg_o.png");
}
.narrowcolumn { /* Content Postings */
float: left;
padding: 18px 16px 23px 16px; /* Innenabstand */
margin: 0px 16px 23px 19px; /* Aussenabstand */
width: 539px;
}
.widecolumn {
float: left;
margin: 0px 16px 23px 16px;
padding: 0px 16px 23px 16px; /* Innenabstand */
width: 539px;
}
.post {
margin: 0 0 40px;
text-align: justify;
}
.widecolumn .post {
margin: 0;
}
.narrowcolumn .postmetadata { /* Abstand Metadaten unter Posting zum Posting */
padding-top: 5px;
}
.widecolumn .postmetadata {
margin: 30px 0;
}
.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}
.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}
.postmetadata {
clear: left;
}
#main_unten { /* Im IE wird es zu hoch angezeigt */
margin: 0px auto; /* oben und unten 0px, seitlich "auto", damit zentriert */
width: 806px;
height: 5px;
background-image: url("images/main_bg_u.png");
background-repeat: no-repeat; /* für den IE, da der Container höher als 5px angezeigt wird */
background-position: bottom; /* für den IE, da der Container höher als 5px angezeigt wird */
/*background-position: 0px 0px;*/
/*background-color: fuchsia;*/
}
#clear{
clear: both;
}
#footer {
margin: 0px auto; /* oben und unten 0px, seitlich "auto", damit zentriert */
padding: 12px 0px;
width: 800px;
text-align: center;
/*clear: both;*/
/*background-color: fuchsia;*/
}
#footer p {
margin: 0;
/*padding: 20px 0;*/
text-align: center;
}
/* End Structure */
/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}
h2 { /* Content: Haupt-Titel */
margin: 0px 0 0;
}
h2.pagetitle {
margin-top: 30px;
text-align: center;
}
#sidebar h2 { /* Sidebar: Überschriften */
margin: 5px 0 0;
padding: 0;
}
h3 {
padding: 0;
margin: 30px 0 0;
}
h3.comments { /* Kommentare: Überschriften wie "Einen Kommentar schreiben" und "Eine Reaktion zu ..." */
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */
/* Begin Lists
Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before { /* Anführungszeichen Listen */
content: "\00BB \0020";
}
.entry ol {
padding: 0 0 0 35px;
margin: 0;
}
.entry ol li {
margin: 0;
padding: 0;
}
.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#sidebar ul li { /* Listen-Blöcke */
list-style-type: none;
list-style-image: none;
margin-bottom: 15px; /* Abstand nach List-Block vor nächsten Titel */
}
#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px; /* Abstand oberhalb Listen-Blöcke zum Titel */
}
#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0; /* Linienabstände innerhalb der Listen-Blöcke */
padding: 0;
}
/* End Entry Lists */
/* Begin Form Elements */
#searchform {
text-align: left;
padding: 5px 10px;
margin: 10px auto;
}
#sidebar #searchform #s {
width: 150px;
padding: 2px;
}
#sidebar #searchsubmit {
padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}
select {
width: 130px;
}
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}
#commentform textarea {
width: 100%;
padding: 2px;
}
#commentform #submit {
margin: 0;
float: right;
}
/* End Form Elements */
/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}
.commentlist {
padding: 0;
text-align: justify;
}
.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}
.commentlist p {
margin: 10px 5px 10px 0;
}
#commentform p {
margin: 5px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */
/* Begin Sidebar */
#sidebar
{
margin: 0px 16px 14px 619px;
padding: 4px 0px 0px 0px;
width: 164px;
/*background-color: fuchsia;*/
/*padding: 20px 0 10px 0;*/
/*margin-left: 545px;*/
/*width: 190px;*/
}
#sidebar form {
margin: 0;
}
/* End Sidebar */PS: Das Posting habe ich von "Plugins und Hacks" nach "Design" verschoben