Sidebar hängt am footer (IE - Theme 3 Spaltig)

hardraada

Hallo zusammen

so langsam werde ich noch ganz wirr ...

Problem ist folgendes, ich habe unter http://www.tobias-stark.com ein dreispaltiges Theme. Die rechte und eigentlich Standard-Sidebar von Wordpress fällt bei der Anzeige im Internet Explorer herab bis zum Footer.
Da meine Programmierkenntnisse sich aufs Einfachste beschränken hänge ich nun an dem Punkt, an dem es für mich nicht mehr voran geht.
Ich will auch nicht abstreiten, dass ich mir nach der ewigen Bastelei und meinem Halbwissen nun irgendwas vermurkst haben könnte. Nur ich finde meinen Fehler einfach nicht. Ich hab vieles Ausprobiert aber komme nie zu einem schönen Ergebnis. Im Firefox ist alles einwandfrei nur im IE bekomme ich halt meine Probleme.

Anbei mal die wichtigsten Informationen:

URL für den Quelltext: http://www.tobias-stark.com
Ursprungstheme: 3c-black-letterhead Theme
CSS (ohne typography&colors weil Text sonst zu lang):

Code

/* Begin Structure */
body {
    margin: 0;
    padding: 0;
    background: #101010 url(images/bg.jpg);
    background-repeat: repeat; 
    }


#page {
    background-color: #2E2E2E;
    background: #2e2e2e url(images/bg-side.jpg);
    background-repeat: repeat-y;
    background-position: right; 
    margin: 20px auto;
    padding: 0;
    width: 1024px;
    border: 1px solid #959596;
    }
    
#header {
    padding: 0;
    margin: 0 auto;
    height: 350px;
    width: 100%;
    background-color: black;
    }
#wrap
    {
    height: 100%;
    margin-left: 224px;
    width: 800px;
    background-color: #1E1301;
       background: url(images/bg-side.jpg);
       background-repeat: repeat-y;
    background-position: right; 
    }
.narrowcolumn {
    float: left;
    padding: 0 25px 20px 25px;
    margin: 0px 0 0;
    width: 585px;
    }


.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 100px;
    width: 600px;
    }


.pagepost {
    margin: 0 0 40px;
    }
    
.post {
    margin: 0 0 15px;
    text-align: justify;
    border-bottom: 1px solid grey;
    }
    
#tabelle_oben {
    margin: 0 0 0;
    width: 585px;
    height: 100px;
    background-color: black;
    text-align: center;
    margin-left: 226px;
    }
    
.widecolumn .post {
    margin: 0;
    }


.narrowcolumn .postmetadata {
    padding-top: 5px;
    }


.widecolumn .postmetadata {
    margin: 30px 0;
    }
    
#footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 1023px;
    clear: both;
    }


#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Structure */


/*    Begin Headers */
h1 {
    padding-top: 40px;
    margin: 0;
    }


.description {
    text-align: center;
    }


h2 {
    margin: 30px 0 0;
    }


h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}


#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }
#sidebar2 h2 {
    margin: 5px 0 0;
    padding: 0;
    }




h3 {
    padding: 0;
    margin: 30px 0 0;
    }


h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* End Headers */
/* 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 {
    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 {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }


#sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }


#sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }


#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;
    padding: 0;
    }
/* End Entry Lists */






/* Begin Form Elements */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    text-align: center;
    }


#sidebar #searchform #s {
    width: 115px;
    padding: 2px;
        background-color: #909090;
        border-style: ridge;
    }


#sidebar #searchsubmit {
    padding: 1px;
    background-color: #909090;
    }


.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;
        background-color: #A0A0A0;
        border-style: ridge;
    }


#commentform textarea {
    width: 100%;
    padding: 2px;
        background-color: #A0A0A0;
        border-style: ridge;
    }


#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
{
    padding: 20px 0 10px 20px;
    margin-left: 809px;
    width: 195px;
    height: 100%;
       background-color: #2E2E2E;
       background: url(images/bg-side.jpg);
       background-repeat: repeat-y;
    background-position: right; 
    }


#sidebar form {
    margin: 0;
    }
/* End Sidebar */


/* Begin Sidebar2 */
#sidebar2
{
    padding: 20px 0 10px 0;
    margin-left: 0px;
    width: 224px;
        float: left;


    }


#sidebar2 form {
    margin: 0;
    }
/* End Sidebar2 */










/* Begin Calendar */
#wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }


#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }


#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }


#wp-calendar a {
    display: block;
    }


#wp-calendar caption {
    text-align: center;
    width: 100%;
    }


#wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }


#wp-calendar td.pad:hover { /* Doesn't work in IE */
    background-color: #fff; }
/* End Calendar */


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
    cursor: help;
    }


acronym, abbr {
    border-bottom: 1px dashed #999;
    }


blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }


blockquote cite {
    margin: 5px 0 0;
    display: block;
    }
hr {
 display: none;
 }
 
.center {
    text-align: center;
    }


a img {
    border: none;
    }


.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }


.entry img, .entrytext img {
    margin: 7px;
    }


.theme {
    font: 80% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: left;    
       }




/* End Various Tags & Classes*/

Alles anzeigen

Falls ihr sonst noch Informationen benötigt einfach schrein.

Vielen Dank schonmal
Tob

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

ich würd vermuten, dass der content evtl. zu breit ist. Versuchs testweise mal mit einer kleineren width:

Code

.narrowcolumn {
float:left;
margin:0 0 0;
padding:0 25px 20px;
[COLOR=Red]width:500px;[/COLOR]
}

kaiser

hab jetzt leider nicht den nerv mich durch alles durch zu wühlen. deswegen nur ein anhaltspunkt am rand: schau dir einmal die float:-geschichten in einem css-tutorial an (ie bugs beachten). sidebar und narrowcolumn brauchen vermutl. display: und clear-attribute. ich weiß es jetzt leider nicht auswendig, aber du solltest soweit ich mich erinnere zuerst #page mit display: block anpassen und alles was darinnen liegt links "floaten", beiderseits "clearen" und inline "displayen" ... so, genug deutschenglisch. :mrgreen:

hardraada

Hab den Fehler gefunden.

Code

#sidebar
{
    padding: 20px 0 10px 20px;
    [COLOR=Red]margin-left: 809px;[/COLOR]
    width: 195px;
    height: 100%;
    background-color: #2E2E2E;
    background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"]url[/URL](images/bg-side.jpg);
    background-repeat: repeat-y;
    background-position: right; 
    }

Alles anzeigen

Dieser Part ausgehen aus dem Theme selbst war das Problem. Hatte ihn vorher einfach nach meinen wünschen angepasst. Nun aber habe ich es dann mit "float: right;" ersetzt und tada ... geht!

Vielen Dank trotzdem für die Hilfen :)

Grüße
Tob

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar hängt am footer (IE - Theme 3 Spaltig)

Jetzt mitmachen!